实用插件的积累

从事前端职位以来，感触最深的就是，前端的插件应有尽有，如果在项目开发的过程中合理的使用，就会达到事半功倍的效果，那么今天自己也将积累的一些插件分享出来。下面代码中的一些方法知识是我平时使用到的，可能有些没有写到，大家就自己看官方的文档吧

插件1：Nprogress(进度条)

github
有时候看见页面加载的时候会有一个进度条的效果，看着挺炫。大家一看究竟吧。

1
2
3
使用方法：首先引入包文件，css样式，调用下来方法
NProgress.start();
NProgress.done();

插件2：jquery.form.js(Ajax提交表单)

官方网址
1.Add a form to your page. Just a normal form, no special markup require

1
2
3
4
5
<form id="myForm" action="comment.php" method="post">
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
    <input type="submit" value="Submit Comment" />
</form>

2.Include jQuery and the Form Plugin external script files and a short script to initialize the form when the DOM is ready:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <head>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
        <script src="http://malsup.github.com/jquery.form.js"></script>
             <script>
                
                $(document).ready(function() {
                // bind 'myForm' and provide a simple callback function
                 $('#myForm').ajaxForm(function() {
                      alert("Thank you for your comment!");
                      });
                 });
        </script>
  </head>
</html>

插件3：bootstrap.datepicker.js（日历）

官方网址
依赖bootstrap包，注意如果下载的是bootstrap V3版本的，要引入bootstrap-datepicker3.css文件。

1
2
3
4
5
// 使用方法1：（html标签）
//在input标签中引入下面内容 （data-date-format="yyyy-mm-dd"是改变显示的格式内容)
<input data-provide="datepicker" data-date-end-date="0d" data-date-format="yyyy-mm-dd">
// 如果要使用汉化的话，需要引入汉化的包bootstrap-datepicker.zh-CN.js
// 然后在input标签中添加“data-date-language="zh-CN"”

1
2
3
4
5
6
7
8
9
// 使用方法2：(js方法)
  // 1.首先引入包名
  // 2.给input标签添加一个id属性
<input type="text" class="form-control input-sm" id="datepicker">
  // 3.在javascript中
  $('#datepicker').datepicker({
  		format:'yyyy-mm-dd',
  		language:'zh-CN'
  	})

插件4：jquery-validate (验证表单插件)

github
依赖jquery包，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('表单标签').validate({
				 onKeyup:true,//何种条件下触发验证
		        sendForm:false, // return false 阻止表单默认提交
		eachInvalidField:function(){
			// 当元素不合法时，会触发此方法
		},
		eachValidField:function(){
			// 每一个合法的表单会触发
		},
		valid:function(){
			//所有表单元素都合法才触发
		}
	    ....等等
	})

插件5：CKEditor(编辑器)

下载地址
文档使用说明
简单使用说明：
1.引入包名ckeditor.js
2.在文本域中添加一个id属性，例如

1
<textarea name="" id="textEditor" cols="30" rows="10"></textarea>

3.在js中引用一个方法

1
CKEDITOR.replace( 'textEditor' );

这样就可以显示出来了，如果不想使用编辑器中的某些菜单选项，可以找到下载文件中的confg.js，自己修改所带的菜单项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 默认带有的菜单项：
config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
大专栏  实用插件的积累e">		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' }
	];

插件6：Jcrop(图片裁剪插件)

官网

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//首先引入相应的包
//css
  <link rel="stylesheet" href="./css/Jcrop.css">
//js
<script src="jquery.min.js"></script>
<script src="Jcrop.js"></script>
// html
  <img src="timg.jpg" alt="">
//js
$('img').Jcrop({
  // 如果需要这些属性可以传入，不需要可以不传
        boxWidth: 400, //最大盒子的宽度
        aspectRatio: 2 //限制宽高的比例关系  
  }, function () {
   // 当Jcrop调用之后，回调函数设置一些默认的情况
  // console.log(this);//this指的就是你调用的对象，里面有属性可以获得图片裁剪的位置大小：this.ui.stage.width(height)
   // 1.例如默认显示选区位置
        this.newSelection();//声明设置选区
        this.setSelect([x, y, w, h]);//设置选区，前两个参数是左上角坐标值，后两个参数是宽度和高度

      //2. 默认显示缩略图
      var jcrop_api = this;
      thumbnail = this.initComponent('Thumbnailer', { width: 130, height: 130 });//缩略图的引入
});
// 一些事件说明:给图片的父元素注册事件
$(img).parent().on('cropmove cropend',function(selection, coords, c){
      //第三个参数可以拿到图片的裁剪的位置值
      //c.x   c.y  c.w  c.h
  })

插件7：imgAreaSelect(图片裁剪插件)

官网

1
2
3
4
5
6
7
8
9
10
11
12
13
//html
  <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  <script type="text/javascript" src="scripts/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
  //js
  <script>
  $(document).ready(function () {
    $('img#photo').imgAreaSelect({
        handles: true,
        onSelectEnd: someFunction
    });
 });
 </script>

插件8：uploadify(图片上传插件)

官网
是基于jquery的插件，有两个版本，一个是flash Version,另一个是html5 Version(收费的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 简单用法说明：
// html代码
<input type="file" id="upfile">
// js代码（注意先引入jquery文件和uplodify文件）
$(() {
    $("#upfile").uploadify({
        height        : 30,
        formData      : {},  //用于文件上传给后端的数据信息,相当于jquery中的data属性
        fileObjName   ：'tc_avatar', // 上传时的文件的名字，相当于表单中的name属性的值
        swf           : '/uploadify/uploadify.swf',// flash文件路径
        uploader      : '/uploadify/uploadify.php',// 后台接口
        width         : 120, // 宽度，自己定义
        height        :auto,//高度，自己定义
        buttonClass:'btn btn-success btn-sm',//允许将覆盖的样式修改
        fileSizeLimit:'2MB',//限制上传的文件的大小
        fileTypeExts: '*.gif; *.jpg; *.png',//上传文件格式的限制
        buttonText    : '',// 显示的文本内容
        itemTemplate: '<span></span>',//上传文件的进度信息模板
        onUploadSuccess: function(file, data) {
           // 文件上传成功在前端处理的事情
        }
        ...以上属性自己使用时根据需要选取
    });
});

未完待续……

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lijianming180/p/12251628.html