如何使用jquery ui创建自定义控件？

Question

我想创建一个使用jQuery UI框架的控件。我知道我必须使用jquery.ui.widget.js作为工厂的基础。

我想创建的这个控件有一个类似于tabcontrol的行为。我想创建一个tileview，所以当你在多个视图面板中选择一个内容时......它会展开，而其他视图会折​​叠到控件的一侧。 喜欢这个http://demos.telerik.com/silverlight/#TileView/FirstLook 有没有教程，一步一步来创建一个自定义小部件？

Answer 1

一个很好的出发点是关于这一主题的jQuery UI文件：http://wiki.jqueryui.com/w/page/12138135/Widget-factory

在最小的部件必须实现以下代码（样品从资料为准）：

(function($) { 
    $.widget("demo.multi", { 

    // These options will be used as defaults 
    options: { 
     clear: null 
    }, 

    // Set up the widget 
    _create: function() { 
    }, 

    // Use the _setOption method to respond to changes to options 
    _setOption: function(key, value) { 
     switch(key) { 
     case "clear": 
      // handle changes to clear option 
      break; 
     } 

     // In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget 
     $.Widget.prototype._setOption.apply(this, arguments); 
     // In jQuery UI 1.9 and above, you use the _super method instead 
     this._super("_setOption", key, value); 
    }, 

    // Use the destroy method to clean up any modifications your widget has made to the DOM 
    destroy: function() { 
     // In jQuery UI 1.8, you must invoke the destroy method from the base widget 
     $.Widget.prototype.destroy.call(this); 
     // In jQuery UI 1.9 and above, you would define _destroy instead of destroy and not call the base method 
    } 
    }); 
}(jQuery));