[jQuery] jQuery UI怎样自定义组件？

又是第一次，现在的感受是jQueryUI Widget能让你代码组织得更好,风格更一致。
如何开始使用

首先用$.widget()方法开始定义你的组件，它只接收三个参数：第一个是组件名称，第二个是可选的基类组件（默认的基类是$.Widget），第三个是组件的原型。

组件名称必须包含命名空间，要注意的是，官方组件的命名空间是以‘ui’开头的，比如:‘ui.tabs’。我在下面的用‘我’的拼音(‘wo’)。


	$.widget("yourNamespace.yourWidgetName",[yourBaseWidget],yourWidgetPrototype)

$.Widget基类含有一个重要的属性‘options’，它用来定义公有参数，组件初始化时外部调用的参数会覆盖内部定义的参数；以及三个重要的私有的方法‘_create’、‘_init’、‘’，前两个相当于构造函数的作用，按顺序执行，_create()方法执行之后会触发'create'事件。 _trigger()方法会将参数中的指定函数标准化为W3C事件，并且触发这个自定义事件。
另外还有三个公有方法‘enable’，‘disable’，‘destroy’，分别表示启用、禁用和销毁组件。

这里很有意思的，是私有方法和公有方法的实现。jQuerUI Widget暴露的方法都是不以‘_’开头的：


	// prevent calls to internal methods
	if ( isMethodCall && options.charAt( 0 ) === "_" ) {
		return returnValue;
	}

实际上，jQueryUI Widget还是保留了原始的API，比如这样使用：


	var $div = $('.demo:first');
	var api = $div.data('divZoom');
	// console.dir(api);
	api.zoomIn();
	// 对比
	$div.divZoom('zoomIn');

一个实现完全私有变量的小技巧：


(function($) {
	var privateVar = '';
	$.widget(&quot;wo.divZoom&quot;,{});
})(jQuery)