从事前端职位以来，感触最深的就是，前端的插件应有尽有，如果在项目开发的过程中合理的使用，就会达到事半功倍的效果，那么今天自己也将积累的一些插件分享出来。下面代码中的一些方法知识是我平时使用到的，可能有些没有写到，大家就自己看官方的文档吧
插件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 require1
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>
// wait for the DOM to be loaded
$(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：(js方法) |
插件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' ] },
{ 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 | //首先引入相应的包 |
插件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文件）
$(function() {
$("#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) {
// 文件上传成功在前端处理的事情
}
...以上属性自己使用时根据需要选取
});
});