cómo crear control personalizado usando jquery ui?

Question

Quiero crear un control utilizando el marco de jquery ui. Sé que tengo que usar como base el jquery.ui.widget.js como una fábrica.

Este control que quiero crear tiene un comportamiento similar al de tabcontrol. Quiero crear una vista de mosaico, por lo que cuando seleccionas un contenido en un panel de vistas múltiples ... se expande y los otros colapsan hacia un lado del control. Como este http://demos.telerik.com/silverlight/#TileView/FirstLook ¿Hay algún tutorial, paso a paso, para crear un widget personalizado?

Answer 1

Un buen punto de partida es la documentación de jQuery UI en este tema: http://wiki.jqueryui.com/w/page/12138135/Widget-factory

Como mínimo el widget debe implementar siguiente código (muestra tomada de la documentación):

(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));