jQuery学习笔记之插件

jQuery插件：

1、使用插件

1).插件的查找与帮助，http://plugins.jquery.com  ,http://www.oschina.net

2、jQuery UI插件

——主要包括以下几个功能：

Effect(效果)，

在引入核心效果文件下，扩展的.animate()方法可以接受另外一些样式属性：
-backgroundColor，-borderBottom/Left/Right/TOpColor,-Color,-outlineColor
还可以通过effect(),hide(),show()等函数实现特殊效果

Interactions(交互组件)，

-Draggable决定元素是否能够拖放
-Droppable
-Risizable
-Sortable可以将任何元素转换为拖放风格的列表，支持达几十种选项、事件效果

Widget(部件)，

-Dialog，对话框部件，可以将div元素转换为一个对话框组件，可拖动，可关闭
option选项：-auotoOpen ,-buttons,-resizable,-其他参考手册
-accordion等等

3、日历插件

1).M97日历插件是比较常用的插件之一
下载引入WdatePicker.js即可,在需要使用的位置调用WdatePicker()方法
2).属性，以M97为例，常用的有(以{}对象的方法引入)：
-el类型string通过id指定一个控件用来显示日期值
-doubleCalender类型值布尔，设为true显示双月模式
-firstDayOfWeek设置一周的第一天
-isShowWeek是否显示周
3).内置函数，$dp.$D(id,obj)将id对应的日期字符串，加上定义的日期差量，返回使用real格式化的字符串
-id对象的ID  -obj：日期差量，可设置为{y:k,m:k,d:k,h:k,m:k,s:k}    
4).事件：
-onpicking选择日期时，激发的事件
-onpicked选择日期后激发的事件
-onclearing
-oncleared
-事件对象：dp
dp.cal.getDateStr():返回选择前的日期对象格式化值
dp.cal.getNewDateStr():返回选择后的日期对象格式化值

4、表单验证插件

1.常用验证插件;

-formValidator

支持五种验证方式：分别是：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型）、ajaxValidator（通过ajax到服务器上做数据校验）、regexValidator（提供可扩展的正则表达式库）
、functionValidator （提供可扩展函数库来做校验）

0).formValidator()函数 是用来做初始化的类型必须执行,针对某一个具体的表单元素进行初始化

  1).InputValidator 对输入值进行验证  onError不是必需属性



size即区间，value即有一个标准值用来比较，如果onError定义的元素值为空将覆盖掉onEmpty的定义值
2).CompareValidator 控件与控件之间，值比较的验证函数， desID为必须属性。



3).RegexValidator
datatype: string类型,与自己写的验证规则进行匹配



4).AjaxValidator
5).FunctionValidator

2.公共函数
$.formValidator.initConfig 一定要出现在验证之前，对全局的验证操作初始化



$.formValidator.PageIsValid 选择这对哪个form组进行验证

-jQuery.Validator

-easyForm

3.校验组

1.设置控件校验组
$obj.formValidator({
validatorGroup:"1",
onShow:"",
onFocus:"",
onEmpty:""
}).InputValidator({})....;
2.初始化校验组
$.formValidator.initConfig({
validatorGroup:"1"
})
//选填资料 click事件
$("#choose").click(function(){
if(this.checked){
$.formValidator.initConfig({
validatorGroup:"2"
})
}
})
3.判断校验组中的元素是否可以提交
var v1=$.formValidator.PageIsValid("1");
var v2=true;
判断不同的校验组
if($("#choose"),attr("checked")==true){
v2=$.formValidator.PageIsValid("2");
}
if(v1&&v2){ return true ;} return false;

5、zTree树控件

——zTree是利用jQuery核心代码，实现一套能完成大部分常用功能的tree插件,专门处理web界面的有关树操作

1).zTree的使用

下载引入相关文件 JQuery.ztree.core和jQuery文件是必须的

2).核心函数

$.fn.zTree.init(obj,zSetting,zNodes);
初始化函数，通过init函数能
4000
够将数据绑定到树控件上
obj:用于展现zTree的DOM容器
zSetting:zTree的配置数据，以setting配置为准
zNodes:zTree的节点数据，支持Json

3).setting配置

var setting={
//配置data
data:{
//配置simpleData
simpleData:{
enable:true,
idKey:"id",
pIdKey:"pid"
}
},
//配置callback
callback:{
//激发展开事件treeId在这里就是ztree
beforeExpand: function (treeId,treeNode) {
//                return false;即无法展开
/*                if(treeNode.name=="日本"){
return false;
}*/
return true;
},
onExpand:ztreeOnExpand
},
//配置check节点的单/多选的关联设置
check:{
enable:true,
chkboxType:{
"Y":"ps","N":"p"
}
},
edit:{
enable:true
},
view:{
showIcon:false,
showLine:false
}
};

4).支持方法

6、开发插件

  1.添加新的全局函数

1).全局函数
全局函数实际上就是jquery对象的方法，可以看作位于jquery命名空间内部的函数，JQuery内置的某些功能就是通过全局函数实现的
如：$.ajax(); (ˇˍˇ) 向JQuery命名空间添加一个函数，只需要将这个新函数指定为JQuery的一个属性 jQuery.globalFunction=function(){alert("这是一个全局函数")}
如果要调用全局函数可以使用JQuery.globalFuction();或$.globalFuction()
2).添加多个函数
①如果想在插件中添加多个全局函数，可以独立声明这些函数：

JQuery.fuctionOne=function(){alert("这是一个全局函数")} 
JQuery.fuctionTwo=function(param){alert("param就是"+param)}

②还可以使用函数$.extend()调用来使函数的定义更加清晰：

$.extend({
fuctionOne(){alert("这是一个全局函数")},
<span style="white-space:pre">	</span>fuctionTwo(param){alert("param就是"+param)}
});

③以上代码虽然能实现，但是存在有关命名空间的风险，所以最好把属于一个插件的所有全局函数封装到一个对象中

jQuery.myPlugin={
fuctionOne(){alert("这是一个全局函数")},
fuctionTwo(param){alert("param就是"+param)}
}

通过以上代码，实际上为全局函数创建了另一个命名空间jQuery.myPlugin,其中myPlugin对象则是全局对象的一个属性，而fcuntionOne和functionTwo则称为myPlugin的方法，因此在调用函数时必须必须包含插件的名称：$.myPlugin.functionOne(); $.myPlugin.fuctionTwo(param);
3).创建实用方法
jQuery提供的许多全局函数都是实用方法，如$.each()等
下面以添加一个新的$.sum函数为例：

jQuery.sum=function(arrray){
var total=0;
jQuery.each(array,function(index,value){
total+=value;
})
return total;
}

2.添加JQuery对象方法

——jQuery中大多数内置功能都是通过其对象方法实现的，当函数需要操作DOM元素时，就极适合将其创建为对象方法
全局函数需要扩展jQuery对象，而添加对象方法则扩展jQuery.fn对象

对象方法的环境

在任何插件内部，关键字this引用的都是当前的jQuery对象，因此可以在this上面调用任何内置的jQuery方法，或者提取他们的DOM节点并操作该节点

方法连缀

除隐式迭代外，JQuery需要正常使用连缀行为，因此我们需要在所有插件中返回一个JQuery对象，除非对应方法明显用于取得不同的信息
返回的JQuery对象就是this引用的对象，即return this。
如果使用$.each(..)迭代this，可以只返回迭代的结果

3.方法的参数

——在一些插件方法中，有的方法是显示的接收参数，有的则不是，如前面提到的this始终是方法的执行环境。此外还可以提供影响方法执行的其他信息

简单的参数

有的方法在执行时会依赖一些用户可能会修改的信息，此时可以把这些信息定义为参数，以便用户根据需要来改，如下：

jQuery.fn.shadow=function(index,name,score){
//带有三个参数的方法
//操作代码
}

参数映射

作为一种插件，参数映射要比使用参数列表更为友好，映射会为每个参数提供一个有意义的标签，同时让参数的顺序变得无关紧要，如下：

jQuery.fn.shadow=function(option){
for(var i=0;i<option.slices;i++){
....
zIndex:option.zIndex,
opacity:option.opacity,
...
}
}

默认参数值

随着方法参数的增多，始终指定每个参数不是必需的，一组合理的默认值可以增强插件接口的易用性：

var defaults={
zIndex:1,
opacity:0.5,
slices:5
}
var opt=jQuery.extend(defaults,option);

通过jQuery.extend();将defaults和option合并

回调函数

方法参数有时候也可能不是一个简单的数值，可能更复杂，比如将回调函数作为参数。
回调函数可以极大增加插件的灵活性，却不用编写多少代码。
要在方法中使用回调函数，则需要接收一个函数对象作为参数：

jQuery.fn.shadow=function(options){
<span style="white-space:pre">	</span>var defaults={
<span style="white-space:pre">		</span>sliceOffset:function(i){
<span style="white-space:pre">		</span> return:{x:i,y:i}
<span style="white-space:pre">		</span> <span style="white-space:pre">	</span>}
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>var opts=jQuery.extend(defaults,options);
}

可定制的默认值

通过为方法参数设定合理的参数值，能够显著改善用户的插件使用体验，但不同的使用者，默认值也很难确定，可以通过定制默认值来减少代码量
所谓定制默认值，就是将默认值代码从方法中移出来，放到方法外面即可

jQuery.fn.shadow.defaults={
<span style="white-space:pre">	</span>zIndex:1,
<span style="white-space:pre">	</span>opacity:0.5,
<span style="white-space:pre">	</span>slices:5
<span style="white-space:pre">	</span>sliceOffset:function(i){
<span style="white-space:pre">		</span>return {x:i,y:i}
<span style="white-space:pre">	</span>}
}

jQuery.fn.shadow=function(options){
<span style="white-space:pre">	</span>var opts=jQuery.extend({

<span style="white-space:pre">	</span>},jQuery.fn.shadow.defaults,options);
}