<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Widget - Default functionality</title> <link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../demos.css"> <style> .custom-colorize { font-size: 20px; position: relative; width: 75px; height: 75px; } .custom-colorize-changer { font-size: 10px; position: absolute; right: 0; bottom: 0; } </style> <script src="../../external/requirejs/require.js"></script> <script src="../bootstrap.js" data-modules="button"> // the widget definition, where "custom" is the namespace, // "colorize" the widget name $.widget( "custom.colorize", { // default options options: { red: 255, green: 0, blue: 0, // Callbacks change: null, random: null }, // The constructor _create: function() { this.element // add a class for theming .addClass( "custom-colorize" ); this.changer = $( "<button>", { text: "change", "class": "custom-colorize-changer" }) .appendTo( this.element ) .button(); // Bind click events on the changer button to the random method this._on( this.changer, { // _on won't call random when widget is disabled click: "random" }); this._refresh(); }, // Called when created, and later when changing options _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's canceled if ( this._trigger( "random", event, colors ) !== false ) { this.option( colors ); } }, // Events bound via _on are removed automatically // revert other modifications here _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 options that are changing // always refresh when changing options _setOptions: function() { // _super and _superApply handle keeping the right this-context this._superApply( arguments ); this._refresh(); }, // _setOption is called for each individual option that is changing _setOption: function( key, value ) { // prevent invalid color values if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) { return; } this._super( key, value ); } }); // Initialize with default options $( "#my-widget1" ).colorize(); // Initialize with two customized options $( "#my-widget2" ).colorize({ red: 60, blue: 60 }); // Initialize with custom green value // and a random callback to allow only colors with enough green $( "#my-widget3" ).colorize( { green: 128, random: function( event, ui ) { return ui.green > 128; } }); // Click to toggle enabled/disabled $( "#disable" ).on( "click", function() { // use the custom selector created for each widget to find all instances // all instances are toggled together, so we can check the state from the first if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) { $( ":custom-colorize" ).colorize( "enable" ); } else { $( ":custom-colorize" ).colorize( "disable" ); } }); // Click to set options after initialization $( "#green" ).on( "click", function() { $( ":custom-colorize" ).colorize( "option", { red: 64, green: 250, blue: 8 }); }); </script> </head> <body> <div> <div id="my-widget1">color me</div> <div id="my-widget2">color me</div> <div id="my-widget3">color me</div> <button id="disable">Toggle disabled option</button> <button id="green">Go green</button> </div> <div class="demo-description"> <p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p> <p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented</p> <p>To learn more about the widget factory, <a href="http://learn.jquery.com/jquery-ui/widget-factory/">visit learn.jquery.com</a>.</p> </div> </body> </html>
