YouTip

Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets. For more details on the Widget Factory, please see the API documentation (#). ## Default Functionality This demo shows a simple custom widget created using the Widget Factory (jquery.ui.widget.js). The three blocks are initialized in different ways. Click to change their background color. View the source and comments to understand how it works. .custom-colorize { font-size: 20px; position: relative; width: 75px; height: 75px; } .custom-colorize-changer { font-size: 10px; position: absolute; right: 0; bottom: 0; } $(function() { // Widget definition, where "custom" is the namespace and "colorize" is the widget name $.widget( "custom.colorize", { // Default options options: { red: 255, green: 0, blue: 0, // Callbacks change: null, random: null }, // Constructor _create: function() { this.element // Add a themed class .addClass( "custom-colorize" ) // Prevent double-click to select text .disableSelection(); this.changer = $( "", { text: "Change", "class": "custom-colorize-changer" }) .appendTo( this.element ) .button(); // Bind the click event on the changer button to the random method this._on( this.changer, { // When the widget is disabled, _on will not call random click: "random" }); this._refresh(); }, // Called when created and subsequently when options are changed _refresh: function() { this.element.css( "background-color", "rgb(" + this.options.red +"," + this.options.green + "," + this.options.blue + ")" ); // Trigger a callback/event this._trigger( "change" ); }, // A public method to change the color to a random value // Can be called directly via .colorize( "random" ) random: function( event ) { var colors = { red: Math.floor( Math.random() * 256 ), green: Math.floor( Math.random() * 256 ), blue: Math.floor( Math.random() * 256 ) }; // Trigger an event, check if it was canceled if ( this._trigger( "random", event, colors ) !== false ) { this.option( colors ); } }, // Automatically remove events bound via _on // Here, reset other modifications _destroy: function() { // Remove generated elements this.changer.remove(); this.element .removeClass( "custom-colorize" ) .enableSelection() .css( "background-color", "transparent" ); }, // _setOptions is called with a hash of all changed options // Always refresh when options change _setOptions: function() { // _super and _superApply this._superApply( arguments ); this._refresh(); }, // _setOption is called for each individual changed option _setOption: function( key, value ) { // Prevent invalid color values if ( /red|green|blue/.test(key) && (value 255) ) { return; } this._super( key, value ); } }); // Initialize with default options $( "#my-widget1" ).colorize(); // Initialize with two custom options $( "#my-widget2" ).colorize({ red: 60, blue: 60 }); // Initialize with a custom green value and a random callback that only allows sufficiently green colors $( "#my-widget3" ).colorize( { green: 128, random: function( event, ui ) { return ui.green > 128; } }); // Click to toggle enabled/disabled $( "#disable" ).click(function() { // Use a custom selector to find all instances for each widget // All instances are toggled together, so we can check the state from the first one if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) { $( ":custom-colorize" ).colorize( "enable" ); } else { $( ":custom-colorize" ).colorize( "disable" ); } }); // After initialization, click to set options $( "#black" ).click( function() { $( ":custom-colorize" ).colorize( "option", { red: 0, green: 0, blue: 0 }); }); });

Change Color

Change Color

Change Color

Toggle disabled option Set to black