发布于 2016-10-09 23:08:57 | 51 次阅读 | 评论: 0 | 来源: 网友投递
jQuery UI 网页用户界面代码库
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
一、创建
1、 jQuery plugin
(function($){
$.fn.MyPlugin=function(){
//js代码
}
})(jQuery)
为了与页面上其他代码友好相处,将plugin定义在一个闭包里，MyPlugin是plugin的名字。调用方式:$(‘选择器’).MyPlugin();
2、 jquery ui widget
(function($){
$.widget(‘ui.mywidget’,{
options:{
//默认的配置参数
},
//方法的定义
})
})(jQurry)
同样定义在一个闭包里。Mywidget 为这个widget的名字。调用方式:$(‘选择器’).mywidget();
上述代码只是简单概述，具体实现jQuery官方文档讲得很详细。
二、实现原理
创建一个jQuery plugin其实是创建了一个jQuery对象（在这里我把通过$(‘选择器’)的返回值叫做jQuery对象）的方法。看下$()和$.fn 是什么就明白了。
通过$.widget 这个Widget Factory 函数创建的一个widget，本质上是通过创建一个类即一个构造函数实现的。
看下 widget 工厂函数的调用，方法：$.widget(name,[,base],prototype)。
name:要创建的widget的名字，包扩命名空间。如：ui.mywidget。
base：为一个父类。新创建的类将继承他的方法。默认为：$.Widget。
Prototype:作为创建的类即构造函数的prototype属性值。
再看下widget的调用。
实例化：通过$(‘选择器’).mywidget()，实例化相应的类，并通过$.data()将实例化后得到的对象存储在对应的$(‘选择器’)中。源码：$.data( this, fullName, new object( options, this ) );
对象操作: $(‘选择器’).mywidget(方法名，方法的参数); 调用存储在$(‘选择器’)对应对象的方法。注意在对对象操作前必须实例化，否则会报错。