基于jQuery UI 构建自己的UI组件库

1、遵循UI的基本格式

(function($) {
/*********************************form组件************* ********************************/
//youi.form youi 为我自己定义的命名空间，按照自己的需要命名，也可以直接使用UI 的 ui ；
//form 为组件名 通过 element.form() 对$dom元素进行组件化,使用element.form('methodName') 调用组件方法
//私有方法使用 _ 作为前缀，外部访问不到（widget自动过滤带_前缀的方法）
$.widget("youi.form", {
//初始化入口
_init:function(){

},
destroy:function{
//按需重写销毁的实现
}
});

$.extend($.youi.form,{
defaults:{
//默认参数
},
getter:[...]//
});

})(jQuery);


2. 适当使用 getter
在我们自己构建组建时设置 getter 方法，以便直接通过 element.tree('getCurrentCheckedIds') 返回 'getCurrentCheckedIds'的返回值
$.extend($.youi.tree,{
defaults:{
  //....
},

getter:['getSelected','getOriginalCheckedIds','getCurrentCheckedIds']
});

3. 使用 $.ui.mouse
通过继承 $.ui.mouse 可以定制自己需要的拖动接收等操作，可以最大的优化拖动的效率。
_mouseStart: function(event) {},
_mouseDrag: function(event) {},
_mouseStop: function(event) {},
_mouseCapture: function(event) { return true; }
在树的本身的拖放操作中使用该方式可以非常优雅的实现