css预解析插件
less.js
-
解析less语法下的css
-
使用:
1- <link rel="stylesheet/less" href="./main.less"> 2- <script src="./less.js"></script> 3- 在服务器中运行
normalize.css
-
去掉标签的一些默认设置
字体图标库
Font Awesome
zepto.js
-
移动端的像jquery的库
fastclick.js
-
解决移动端click事件300ms延迟以及点透事件
jquery附属插件
jQuery Easing
-
动画效果扩展:增加更多的过渡的效果
jquery.cookie.js
-
关于cookie读取、写入、删除插件
-
https://github.com/carhartl/jquery-cookie
$.cookie(key,value,{ expire: 7,//(有效期天) path:'/',//页面根目录下均可访问 domain:'顶级域名', secure:'true(在https协议下才可行)/false' })
html5shiv.js
-
解决HTML5提出的新的元素不被IE6-8识别问题
jquery相关简单插件
jqzoom
-
jQuery放大镜插件jqzoom.js
jquery-fullpage
-
基于jquery的全屏滚动插件
jQuery Circlr插件
-
实现产品图片360度旋转
bootstrap
-
前端框架(非模块)
-
注意:此插件是基于jquery的插件,必须先引入相关的js文件
-
2.常用
-
全局css样式
-
-
组件
-
javascript插件
-
3.心得
-
利用类名控制样式,很多时候只需要增加类名既可以得到相关的样式,不必制定相应的标签
-
-
响应式布局
-
respond.js让IE6/7/8支持@media媒体查询*
bootstrap-paginator3.0
(基于bootstrap的分页插件)
1.学习地址
http://blog.csdn.net/u010688587/article/details/53641910
https://www.cnblogs.com/crf-Aaron/p/7833500.html
2.心得
此插件自己封装了一些事件,参数已经够给定
bootstrap-datepicker
-
日期选择插件
-
语言配置
需要再引入
<script src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>
-
使用方法
1-第一种方法
<input class="datepicker" data-date-format="mm/dd/yyyy" data-languge='zh-CN'">
2-第二种方法
<input type='text' id='selectDate' > $('.datepicker').datepicker({ format:"yyyy-mm-dd/",//2018-2-26 languge:'zh-CN' });
ajax
axios
-
专门用以ajax请求
-
使用
1- npm i axios -S 2- 引入axios.js 3- get请求 axios.get('url?id=xxx').then(function (response) {成功后的回调函数，注意该插件对返回值做了进一步的封装，数据服务器实际返回的数据在response.data中，也经常用response.status判断状态码}) .catch(function (error) {失败以后的回调,可以省略不写}); 也可以直接写作：axios('url?id=xxx').then(); 4- post请求 axios.post('/user', {直接通过这种方式传递到服务器的数据格式是json格式的，$.ajax对传递的数据做了'www-form-urlencoded'处理，这里应该自己传入一个去掉花括号序列化的数据}) .then(function (response) { 成功时的回调函数 }) .catch(function (error) { 失败时的回调函数 }); 如：axios.post(url,$('form').serialize).then()
NProgress
-
使用
不是基于jquery的,只需引入NProgress.js和NProgress.css即可
NProgress.configure({//去除右上角旋转的小圆圈 showSpinner: false }); /* 监听全局的ajax请求 */ $(document).ajaxStart(function () { //开始请求数据的时候,显示加载的模态框,以及进度条 NProgress.start();//进度条开始 }); $(document).ajaxStop(function () { //结束加载时,隐藏模态框以及完成进度 NProgress.done();//进度条完成 });
jquery-form
-
表单提交
-
使用
$( 'form表单' ).ajaxSubmit({ url/success/type 数据会自己序列化,对于自己额外增加的数据可以 data:{ k: v } })
art-template
-
官方文档 https://aui.github.io/art-template/zh-cn/docs/index.html
-
模板引擎,用于在ajax请求数据以后动态渲染页面
1.简单语法{{}}
{{each xx as value index }}{{/each}}
不写as {{each}} 使用项和索引时用{{$value}} {{$index}} {{/each}}
{{if xxxxx }}{{/if}}
2.原生语法<% %>
<% if ( ){ %> <% } else { %> <% } %>
取值<%= title %>
3.此模板引擎会对html标签进行转义变为字符串,不转义 {{ @ tc_introduce }} <%- tc_introduce %>
4.过滤器
js代码中 template.defaults.imports.up = function ( input, param1, param2 ) { return input.toUpperCase() + param1 + ', ' + param2; } // 定义的方法的第一个参数为需要格式化的数据; 往后的参数都是过滤器的传参 模板中{{value | filter1 | filter2}} ----- {{ txt | up: '参数1': '参数2' }}
MUI
-
以iOS移动端开发前端框架
canvas前端图表
echarts百度图表
highcharts
konva
外国的图表插件
Swiper
-
常用于移动端网站的内容触摸滑动
iScroll
-
无依赖，多平台的js滚动插件
模块化的实现方式
node.js
-
CommonJS规范
-
同步的, 如果处理耗时操作,可能造成浏览器假死, 适用于服务器环境开发
require.js
-
AMD规范
-
异步的, 加载模块时不会让其他资源等待. 比较适合浏览器环境开发
-
使用方式
require.config({ baseUrl: "/assets", paths: { //第三方插件 jquery: 'lib/jquery/jquery-3.2.0', //jquery的短名称必须与返回的值名字保持一致 bootstrap: 'lib/bootstrap/dist/js/bootstrap', CKEDITOR: 'lib/ckeditor/ckeditor', //自定义模块 common: 'js/common', login: 'js/index/login', tools: 'js/tools' }, shim: { bootstrap:{ deps:['jquery'] }, CKEDITOR: { exports: 'CKEDITOR' } } }) require(['less', 'common', 'logout']); define(['jquery', 'template', 'cookie'], function($, template) { //拷贝之前common.js中的内容 });
sea.js
-
CMD规范 国产
-
和AMD比较类似, 阿里玉伯开发
前端校验
bootstrap-validator
(基于bootstrap的前端校验插件)
1.学习地址
http://blog.csdn.net/u013938465/article/details/53507109
http://blog.csdn.net/nazhidao/article/details/51542508
http://bootstrapvalidator.votintsev.ru/api/
http://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd
jquery-validate
-
使用方法
<form> <input type='text' name='test' data-required data-conditional='f1 f2' data-pattern="\d+" 无// data-describedby='forTest' data-description='testText' > <span id='forTest'></span> </form>
js中
$('form').validate({ conditional:{ f1:function(){} f2:function(){} } } onBlur: true,//失去焦点时触发 description: { required: { required: '请填写完整信息' }, pattern:'必须为数字', testText:'' } });
文件上传
百度WebUploader
http://fex.baidu.com/webuploader/getting-started.html
uploadify
-
使用方法
1.引入相关文件
<link rel="stylesheet" href="./uploadify/uploadify.css"> <script src="./jquery/jquery-3.2.0.js"></script> <script src="./uploadify/jquery.uploadify.js"></script> 2.准备标签 <input id="upload" type="file" > 3.js代码 $('#upfile').uploadify({ buttonText: '上传图片', buttonClass: '按钮样式', buttonImage:'按钮背景图片地址', buttonText:'按钮文字', buttonCursor:'arrow/hand(默认)' //注: bootstrap若给按钮加了样式, 可能对此属性有影响', width: '按钮高度', height: '按钮高度', fileObjName: '定义上传文件的key值, 默认是Filedata', formData: {cs_id: cs_id}, itemTemplate: '<span></span>', uploader: '接口地址', fileSizeLimit: '约束文件大小' fileTypeExts:'约束文件扩展名', fileTypeExts: '*.jpg; *.gif; *.png', swf: '/public/assets/uploadify/uploadify.swf', // 注意:chrome默认禁用flash,可以在设置->高级->内容设置->Flash->允许网站运行 onUploadSuccess: function (_, data) { //可以打印一下这些参数,看一下 var data = JSON.parse(data); }, onInit:function(){ //这是此插件渲染完成之后可以做的一些操作 } });
jquery-fileupload
-
异步上传,先传入服务器,服务器返回一个地址,然后根据地址在本地进行预览
-
使用方式
1.需要引入的文件 jquey-1.8.3.min.js jquery-ui-widget.js jquery.iframe-transport.js jquery.fileupload.js 2.html结构 <input id="fileupload" type="file" name="file[]" multiple> 3.js代码 $('#fileupload').fileupload({ dataType: 'json', done: function (e, data) { } });
城市级联
jquery-region.js
-
先生自己的城市级联
-
使用方法
1.准备相应的标签 <div id="hometown"> <select id="p" data-id=""></select> <select id="c" data-id=""></select> <select id="d" data-id=""></select> //设置data-id后会显示对应的城市,否则显示第一个 </div> 2. 引入 jquery.js 与 region.js 3.js代码 $( '#hometown' ).region({ url: './jquery-region/region.json' });
富文本编辑器
百度UEditor
CKEditor
-
注意: art-template 无法对textarea做不转义处理,此时需要模板时,实际上是CKEditor的操作
-
使用方法
<div class="box">
<textarea name="" id="txt" cols="30" rows="10"></textarea> </div> //防止textarea拖拽只需要在外层包裹一个div盒子,并设置宽高即可 <script> CKEDITOR.replace( 'txt' );//此时已经产生了对应的样式 1.ajax提交的时候,需要 // 将 CKEDITOR 中的数据更新到 textarea 中 for ( var k in CKEDITOR.instances ) { CKEDITOR.instances[ k ].updateElement(); }//此时,就可以使用表单元素的序列化获取相应的内容了 2.传统的利用form表单的子弹提交,不需要额外处理 </script>
图片裁切
areaselect
Jcrop
-
使用方法
1.引入jquery.js+jcrop.js jcrop.css
2.html结构 <div class='preview'> <img src="http://jcrop-cdn.tapmodo.com/assets/images/sierra2-750.jpg" /> </div> <form id="text-inputs"> <input type="hidden" name="x" id="crop-x" /> <input type="hidden" name="y" id="crop-y" /> <input type="hidden" name="w" id="crop-w" /> <input type="hidden" name="h" id="crop-h" /> <input type="submit" value='裁剪'> </form> 3.js代码 $('.preview img').Jcrop({ aspectRatio: 2, boxWidth: 400, //setSelect: [ x, y, w, h ] , }, function () { // 配置预览区域 /*预览区域大小与图片大小有关币可以 方法一: 根据$(img).width() 在上面设置 setSelect: [ 100, 100, 100, 100 ] ,行 不通?? 方法二: 全部插件的方法,获取图片宽高 this.ui.stage.width/height 设置的时候需要设置两个,this.newSelection(); this.setSelect( [ x, y, w, h ] ) */ //var jcrop_api = this; /* for ( var k in this ) { //打印所有函数 if ( typeof this[ k ] == 'function' ) { console.log( k ); } } */ // 计算选取的尺寸,保证宽高比为2:1,并且位置位于中间 var w = this.ui.stage.width, h = this.ui.stage.width / 2, x = 0, y = (this.ui.stage.height - h) / 2; this.newSelection(); this.setSelect([x, y, w, h]); this.initComponent('Thumbnailer', { width: 240, height: 120 ,target: '.thumb' }); $('.preview').on('cropmove cropend', function (e, s, c) { $('#crop-x').val(c.x); $('#crop-y').val(c.y); $('#crop-w').val(c.w); $('#crop-h').val(c.h); }); $('#text-inputs').on('change', 'input[type=text]', function (e) { $('.preview img').Jcrop('api').animateTo([ parseInt($('#crop-x').val()), parseInt($('#crop-y').val()), parseInt($('#crop-w').val()), parseInt($('#crop-h').val()) ]); }); });
-
注意:
-
因为要讲预览框放到相应的位置,所以更改了jcrop.js1798行源码
将.appendTo( this.core.container);更改为.appendTo( this.target || this.core.container);
-
因为这个预览宽是追加到后面的,所以要把之前的代码隐藏掉
-
此处增加的form表单,jcrop.css中有一个padding-top:20px,会破坏原有结构
解决方式1)通过样式进行覆盖 .main .course-add form{padding: 0;}
2)为form元素,增加一个行内样式,<form style="display: none"></form>
-
