如何使用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));