Как создать пользовательский элемент управления с помощью jquery UI?

Question

Я хочу создать элемент управления с помощью фреймворка JQuery UI. Я знаю, что я должен использовать в качестве базы jquery.ui.widget.js как фабрику.

Этот элемент управления, который я хочу создать, имеет поведение, похожее на tabcontrol. Я хочу создать мозаичное представление, поэтому, когда вы выбираете содержимое на панели из нескольких представлений ... оно расширяется, а остальные сворачиваются в сторону элемента управления. Как этот 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 ) );