How to create user control using jquery ui?

Question

I want to create a control using jquery ui framework. I know that I should use jquery.ui.widget.js as a factory as the base.

This control that I want to create has a behavior similar to tabcontrol. I want to create a tileview, so when you select content in a panel with multiple views ... it expands and the rest collapses towards the control. Like this http://demos.telerik.com/silverlight/#TileView/FirstLook Is there any tutorial, step by step, to create your own widget?

Answer 1

A good starting point is the jQuery UI documentation on this topic: http://wiki.jqueryui.com/w/page/12138135/Widget-factory

At least your widget should implement the following code (sample taken from the documentation):

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