jquery ui widget
- 格式：doc
- 大小：201.81 KB
- 文档页数：18
Jquery ui widget开发Jquery ui 提供了一些基本的widget，但是他提供了很好的机制来创建widget。
下面就简单的介绍下jquery ui 的开发指引Jquery的官方文档中对此写的很清晰。
一般来说，jquery ui都是继承自jquery.ui.widget.js这个文件的。
这个文件提供了一个工厂方法来创建widget对象。
其方法是$.widget(String name, Options prototype).下面简单介绍下这个类提供的方法和属性。
在创建widget的时候将重写这些。
destroy()：将widget实例从dom对象上移除，在开发widget的时候一般此方法是必须的。
就是移除你自己在dom element上添加的样式和行为以及dom结构options：在这里面保存的是widget的配置信息，在创建widget的时候需要设置一些配置参数。
element：就是widget作用的dom对象。
enable()和disable()这两个方法就是禁用和启用widget的。
其实是修改options.disabled。
还有两个私有方法是创建widget的时候要重写的。
_create() 这个方法就是创建widget的方法，在页面调用widget的时候，就会执行此方法，来构建widget。
Widget的绝大大多数行为和结构都是在这里创建的。
_init() 这个方法大多数时候不会被重写，这个方法在构建widget的时候在_create 后执行。
从相关的文档上查询到：_create()方法在widget构建的时候执行，而_init()方法在构建和重新初始化的时候执行。
而destroy方法则是在移除widget的时候被执行。
在widget中，所有的私有方法都将加以"_"前缀_setOption():此方法提供了options的属性的设置，一般情况下如果options里面的参数不需要特殊处理（校验，类型转换，以及设置属性的时候触发某一操作等）的时候不需要对此方法进行重写事件如果有自定义的事件，可以采用widget为我们封装好的方法来处理_trigger()这个方法来处理，其调用方法this._trigger(type, event, data)，第一个参数为时间类型，第二个参数为事件event对象，第三个参数为事件要传递的参数。
jQuery UI widget factory 编写前言：所有的jQuery UI的控件和交换都是基于一个简单的，可重用的jQuery UI控件工厂。
它使用一个一致的api作为一个插件可伸缩的基础，来生产复杂，有状态的插件。
它被设计为不仅仅作为jQuery UI控件的一部分，而且可以作为不想重构公共组件生成面向对象组件的开发者的一般工具。
它不依赖其他的jQuery UI，但是大多数的jQuery UI依赖它。
它是什么控件的工厂是一个在全局jQuery对象上的一个简单的方法，它有2个或者3个参数。
jQuery.widget( "namespace.widgetname", /* 可选的- 一个已经存在的组件的prototype来继承*/, /* 传递到组件prototype有一系列的属性组成的对象*/ {...} );第一个参数是一个包含一个命名空间和组件名称的字符串，通过"."来分割。
命名空间必须有，它指向widget prototype存储的全局jQuery对象（fuck这什么意思啊） . 如果命名空间没有，widget factory将会为你生成。
widget name是插件函数和原型的真实名称，比如：jQuery.widget( "demo.multi", {...} ) 将会生成jQuery.demo , jQuery.demo.multi , and jQuery.demo.multi.prototype .第二个参数（可选）是widget prototype继承于什么对象。
例如jQuery UI有一个“mouse”的插件，它可以作为其他的插件提供的基础。
为了实现这个所有的基于mouse的插件比如draggable, droppable可以这么做：jQuery.widget( "ui.draggable", $.ui.mouse, {...} );如果没有这个参数，widget默认继承自“base widget” jQuery.Widget（注意jQuery.widget 和jQuery.Widget不同）。
widget factory的最后一个参数是一个对象文字，它会转化为所有widget实例的prototype。
widget factory会生成属性链，连接到她继承的widget的prototype。
一直到最基本的jQuery.Widget。
一旦你调用jQuery.widget，它会在jQuery prototype ( jQuery.fn )上生成一个新的可用方法对应于widget的名字，比如我们这个例子jQuery.fn.multi。
.fn方法是包含Dom元素的jquery对象和你生成的widget prototyp实例的接口，为每一个jQuery对象生成一个新的widget的实例。
更多一点在Plugin Authoring Guidelines（英文：/Plugins/Authoring 中文：/blog/1103545）中说了很多实现有状态，面向对象插件的方法。
widget factory给你提供了jQuery UI的API，与你的插件的实例来交互，并且抽象了一系列的重复任务。
∙生成命名空间（如果需要）和属性通过namespace和name生成一个伪选择器，可以这样查询：$( ":demo-multi" )。
∙prototype和jQuery.fn连接通过使用jQuery.widget.bridge来实现。
∙通过用户提供的选项来合并默认的选项默认的值是暴露的，所以用户可以修改默认的值∙通过$("#something").data("pluginname")访问插件的实例实例对象的属性this.element是一个包含Dom元素的jQuery对象的引用，所以从对象到元素或者元素到对象的转换比较的简单。
∙通过在jQuery prototype上的方法和字符串可以访问widget的methods: $("#something").multi("refresh")。
或者直接访问实例自己：$( "#something" ).data( "multi" ).refresh()。
∙避免在相同元素下widget的多实例化。
∙链式的转发回调插件，用户可以触发this._trigger( "clear" )用户可以定义一个选项$("#something").multi({clear: function(event) }});或者使用.bind()$("#something").bind("multiclear", function( event ) {});实例化后简化和修改插件选项的方法：$( "#something" ).multi( "option", "clear" , function ( event ) { alert( "I cleared the multiselect!" ); } );很容易enable或者disable widget,或者整体实力的销毁和返回元素的元素状态。
构建自己的属性基础你给widget factory传递的对象，可以作为你需要的复杂的widget属性。
但是最起码需要default options , and basic _create , _setOption , and destroy callbacks。
Js代码1.$.widget( "demo.multi", {2.// These options will be used as defaults3. options: {4. clear: null5. },6.// Set up the widget7. _create: function() {8. },9.10.// Use the _setOption method to respond to changes to options11. _setOption: function( key, value ) {12.switch( key ) {13.14.case"clear":15.// handle changes to clear option16.break;17. }18.19.// In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget20. $.Widget.prototype._setOption.apply( this, arguments );21.// In jQuery UI 1.9 and above, you use the _super method instead22.this._super( "_setOption", key, value );23. },24.25.// Use the destroy method to clean up any modifications your widget has made to the DOM26. destroy: function() {27.28.// In jQuery UI 1.8, you must invoke the destroy method from the base widget29. $.Widget.prototype.destroy.call( this );30.// In jQuery UI 1.9 and above, you would define _destroy instead of destroy and not call the base method31. }32.});33. jQuery ) );在方法中包装传递的对象也许也需要包含方法来处理各种各样的插件具体的功能。
