前端网页端常用的插件

css预解析插件

less.js

解析less语法下的css

使用:1- <link rel="stylesheet/less" href="./main.less">
2- <script src="./less.js"></script>
3- 在服务器中运行 ​

normalize.css

去掉标签的一些默认设置

字体图标库

Font Awesome

http://fontawesome.dashgame.com/

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的全屏滚动插件
http://www.jq22.com/jquery-info1124

jQuery Circlr插件

实现产品图片360度旋转

bootstrap

前端框架(非模块)
1.地址 http://www.bootcss.com/注意:此插件是基于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.html2.心得 此插件自己封装了一些事件,参数已经够给定

bootstrap-datepicker

日期选择插件
https://bootstrap-datepicker.readthedocs.io/en/stable/
语言配置需要再引入<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'
18922
).then();
4- post请求
  axios.post('/user', {直接通过这种方式传递到服务器的数据格式是json格式的，$.ajax对传递的数据做了'www-form-urlencoded'处理，这里应该自己传入一个去掉花括号序列化的数据})
.then(function (response) {
  成功时的回调函数
})
.catch(function (error) {
  失败时的回调函数
});
如：axios.post(url,$('form').serialize).then()​

NProgress

进度条插件http://blog.csdn.net/joyhen/article/details/24458427
使用​不是基于jquery的,只需引入NProgress.js和NProgress.css即可 NProgress.configure({//去除右上角旋转的小圆圈
    showSpinner: false
});

/* 监听全局的ajax请求 */
$(document).ajaxStart(function () { //开始请求数据的时候,显示加载的模态框,以及进度条
  NProgress.start();//进度条开始
});
​
$(document).ajaxStop(function () { //结束加载时,隐藏模态框以及完成进度
  NProgress.done();//进度条完成
});

jquery-form

表单提交
https://github.com/jquery-form/form
使用
$( 'form表单' ).ajaxSubmit({
url/success/type
数据会自己序列化,对于自己额外增加的数据可以
data:{ k: v }
})

art-template

官网 http://aui.github.io/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移动端开发前端框架1.网址http://dev.dcloud.net.cn/mui/
​

canvas前端图表

echarts百度图表

http://echarts.baidu.com/

highcharts

http://www.hcharts.cn/

konva

外国的图表插件

Swiper

常用于移动端网站的内容触摸滑动
http://www.swiper.com.cn/

iScroll

无依赖，多平台的js滚动插件
http://iscrolljs.com/

模块化的实现方式

node.js

CommonJS规范
同步的, 如果处理耗时操作,可能造成浏览器假死, 适用于服务器环境开发

require.js

AMD规范
异步的, 加载模块时不会让其他资源等待. 比较适合浏览器环境开发
http://requirejs.org/
使用方式
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

学习地址 https://github.com/DiegoLopesLima/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

http://www.uploadify.com/
使用方法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

http://www.jq22.com/jquery-info230
异步上传,先传入服务器,服务器返回一个地址,然后根据地址在本地进行预览
使用方式
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

http://ueditor.baidu.com/website/

CKEditor

https://ckeditor.com/download
注意: 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

http://odyniec.net/projects/imgareaselect/

Jcrop

http://jcrop.org/
使用方法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>

其他一些有趣的插件

easyui

​ http://www.jeasyui.net/