一些常用插件整合

插件

"jquery.js"

不解释。

"bootstrap"

不解释。

"require.js"

requireJS用于模块化开发。

（1）、define()定义模块，require()引用模块。
eg:
define(["jquery"],function($){

}

require(["assets/jquery"])

require的里面写模块名称，用中括号括起；
define中第一个参数为一个数组，数组里面写需要传入的其他模块的名称，
function()的形参与数组中模块的返回值一一对应；

（2）、配置模块的路径与名称
eg:
require.config({
baseUrl:"/views/public",
paths:{
"jquery":"assets/jquery/jquery.min",
"bootstrap":"assets/bootstrap/js/bootstrap.min",
"ckeditor": "assets/ckeditor/ckeditor",
},
shim:{
"bootstrap":{
deps:["jquery"]
}
"ckeditor":{
exports:"CKEDITOR"
},
}
})
baseUrl为基本路径；
paths为每个模块的名称和相对应的路径；
tips:一个模块的真实路径 = baseUrl + paths

shim为模块的垫片，
有些模块需要先加载另外一个模块才能正常使用，用deps给这个模块加上依赖；
一些模块没有返回值，在外部需要调用这个模块内部的变量，用exports引入这个变量。

tips：其实现在有了ES6，讲真require跟sea会慢慢过时...

"nprogress.js"

进度条插件。
NProgress.start();		进度条开始。
NProgress.done();		进度条结束。

tips：可以配合利用jquery的ajax全局对象给所有的ajax请求添加进度条事件。
eg：
$(document)
.ajaxStart(function(){
NProgress.start();
$("#shade").fadeIn();
})
.ajaxStop(function () {
NProgress.done();
$("#shade").fadeOut();
})
tips：ajax全局对象，触发ajax时的各个阶段，可以设置其回调函数。
ajax全局对象由$(document)调用。
执行顺序：
1.ajaxStart(全局事件)：当多个ajax存在时，在当前批次的所有ajax开始时调用；

2.beforeSend

3.ajaxSend(全局事件)：每一个ajax开始发送请求时都会被调用一次；

4.success

5.ajaxSuccess(全局事件)：每一个ajax请求成功时都会被调用一次；

6.error

7.ajaxError (全局事件)：每一个ajax请求出错时都会被调用一次；

8.complete

9.ajaxComplete(全局事件)：每一个ajax请求完成时都会被调用；

10.ajaxStop(全局事件)：在当前批次的所有ajax完成时会调用。

tips：全局对象的ajaxStart和ajaxStop指的是当前这一批的ajax请求全部开始或结束发送的时候调用的函数；

"jquery.cookie.js"

jquery.cookie是jquery的一个插件，提供了方便的操作cookie的方法。、
eg：
$.cookie("tcInfo");
$.cookie("tcInfo","xx");

artTemplate

artTemplate是一个模板插件，可以实现动态的数据生成指定的html代码。
分为简洁语法和普通语法。
（1）、以普通语法为例。
eg：

<script type="text/template" id="list_info_tpl">
{{each result as v i}}
<tr>
<td>{{i+1}}</td>
<td>{{v.tc_name}}</td>
<td>{{v.tc_roster}}</td>
<td>{{v.tc_birthday}}</td>
{{if v.tc_gender == 0}}
<td>男</td>
{{else}}
7fe0

<td>女</td>
{{/if}}
<td>{{v.tc_cellphone}}</td>
<td data-id={{v.tc_id}}>
<a href="#teacherModal" data-toggle="modal">查 看</a>
<a href="./teacher_add.html">编 辑</a>
{{if v.tc_status == 0}}
<a href="javascript:;" data-status="{{v.tc_status}}">注 销</a>
{{else}}
<a href="javascript:;" data-status="{{v.tc_status}}">启 用</a>
{{/if}}
</td>
</tr>
{{/each}}
</script>
var html = template("list_info_tpl" , info);

tips：each result as v i，这里的result指代了info中的result对象；

（2）、template语法
基本语法：
eg：
{{ each list as value index }}
<li>{{$value}}</li>
{{/each}}
tips：list是一个对象数组，value指该数组的元素，index指索引；
在赋值时，写作{{$value}}、{{$index}}

判断语法：
eg：
{{if v==?}}
<li>{{v}}{{xxx}}</li>
{{else}}
<li>{{v}}</li>
{{/if}}

引用语法：在这个模板中引用另一个模板，即模板嵌套；
eg：
{{include "sub_tpl"}}
tips：sub_tpl为模板的id名；

字符串渲染方式添加模板：
当获取到了数据时，拼接字符串完成模板，将其输出到页面中；
方法：template.compile(source , options);
eg:
var render = template.compile(htmlStr);
var html = render(person);
xxx.innerHTML = html;
eg:
var htmlStr = "{{each result as v i}}"+
"<option value='{{v.cg_id}}'>"+
"{{v.cg_name}}"+
"</option>{{/each}}";
var render = template.compile(htmlStr);
var html =render(data);
$("select[name=cs_cg_id]").html(html);

"echarts"

echarts是一个生成图表的插件。
eg：
//1、初始化图表
var myChart = echarts.init(document.getElementById('main'));

//2、指定图表的配置项和数据
var option = {
//2.0、图表标题
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
//2.1、x方向的数据
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},

//2.2、y方向的数据
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};

// 3、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

"bootstrap-datepicker.min"

datepicker是bootstrap的一个日历插件。
eg：
$("[name='tc_birthday']").datepicker({
format:"yyyy-mm-dd",
language:"zh-CN",
startDate:"-3d",
endDate:"+3d"
});

"bootstrap-datepicker.zh-CN.min.js"

通过引入zh-CN，可以对日历插件进行汉化。
设置language："zh-CN"即可。

"jquery-validate.min.js"

validate是一个表单验证插件。
eg:
$("form").validate({
//1、清除表单默认的自动提交事件
sendForm:false,

//2、添加事件，当失去焦点的时候给元素进行表单验证
onBlur:true,

//3、添加键盘事件，当键盘弹起的时候进行表单验证，
并且点击了提交按钮的时候将提示信息显示出来
onKeyup:true,

//6、定义表单的提示信息
description:{
name:{
required:"请输入用户名",
valid:"√"
},
pwd:{
required:"请输入密码",
pattern:"密码长度请维持在6-15位",
valid:"√"
},
join_date:{
required:"请选择入职时间"
}
},

//4、当表单验证通过或者不通过的时候，
给表单元素赋予相应的class名称，并将之前的名称进行清除；
eachInvalidField: function () {
this.parent()
.removeClass("has-success")
.addClass("has-error")
},
eachValidField: function () {
this.parent()
.removeClass("has-error")
.addClass("has-success")
},

//5、当所有的表单都验证通过时，且点击了提交按钮，
这时候，给服务器发送ajax请求
valid:function(){
$("form").ajaxSubmit({
url:url,
type:"post",
success: function (data) {
if(data.code == 200){
alert("请求发送成功");
}
}
})
}
conditional:{
confirm:function(){
//自定义的方法名；
}
}
})
tips：为了作用到相对应的标签中，还需要给标签定义其属性；

data-pattern = "正则表达式";		定义正则表达式验证规则；

data-description = "name";		对应了description中相对应的描述；

data-describedby = "idxx";		定义了decription中required需要插入的位置，其值和另一标签的id名对应；
<div id="idxx">提示信息</div>
· description中的valid值，为验证通过时的提示信息，也插入到该标签中；

data-required		具备该属性的表单元素必须填写否则不得提交；
data-conditional="自定义的conditional方法名"

"jquery.form.js"

jquery.form是一个表单提交插件，可以自动生成表单数据提供给ajax发送给服务器；
eg：
$("form").ajaxSubmit({
url:"/api",
type:"post",
success: function (data) {
alert("创建成功！");
}
})

"jquery.region.js"

省市级三级联动插件。

"ckeditor"

ckeditor是一个富文本编辑框的插件。
eg：
CKEDITOR.replace("introduce",{
toolbarGroups:[
{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
{ name: 'links' },
{ name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
]
});
tips：这里的introduce，指的是页面中textarea标签的id名。
可以通过增删toolbarGroups中的元素，进行增删富文本框不同的模块。

<textarea name="editor1"></textarea>
<button id="getText">获取内容</button>
<div id="text">

</div>
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var editorObj = CKEDITOR.replace( 'editor1' ,{
toolbar: [
{ name: 'clipboard', items: [ 'Undo', 'Redo' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic','Strike', '-', 'RemoveFormat' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'document', items: [ 'Source' ] }
]
});
//当editorObj加载完毕之后
editorObj.on('instanceReady', function (event) {
console.log(1);
});

$("#getText").click(function(){
//使用setData，可以给文本框写入数据
CKEDITOR.instances.editor1.setData("1241151325");

//获取editor1里面的数据，包含html标签的字符串
var text = CKEDITOR.instances.editor1.getData();

//获取editor1里面的纯文本
var pureText = editorObj.document.getBody().getText();

$("#text").text(text);
})
</script>

"Jcrop"

Jcrop是一个截图插件。
eg：
$(".preview img").Jcrop({
aspectRatio:2,			//宽高比例

setSelect:[x,y,w,h],	//初始化选择框的位置和大小
boxWidth:300			//裁切的最大宽度
}, function () {
jcrop_Api = this;

//配置其裁切框
thumbnail = this.initComponent('Thumbnailer', {
width: 240,
height: 120,
thumb: '.thumb'
});
})

"jquery.uploadify"

uploadify是一个上传图片的插件。
eg：
$("#upload").uploadify({
//（1）、上传按钮是一个flash插件
swf:"/views/public/assets/uploadify.swf",

//（2）、上传的地址
upload:"/api/uploader/cover",

//（3）、按钮的文本内容
buttonText:"选择图片",

//（4）、按钮宽度
width:70,
height:"auto",

//（5）、文件对象名称
fileObjName:"cs_cover_original",
buttonClass:"btn btn-success btn-sm",

//（6）、需要提交的数据
formData:{cs_id:cs_id},
itemTemplate:"<span></span>",

//（7）、上传成功后的回调函数
onUploadSuccess:function(file, data, response){
console.log(data);

//当上传图片成功之后，需要将图片加到img标签的src中
$(".preview img").attr("src",JSON.parse(data).result.path);
//同时，解锁裁切图片的按钮
$("#cropBtn").prop("disabled",false);
}
})