diff options
| -rw-r--r-- | demos/widget/default.html | 68 |
1 files changed, 40 insertions, 28 deletions
diff --git a/demos/widget/default.html b/demos/widget/default.html index ec272e994..410318e0a 100644 --- a/demos/widget/default.html +++ b/demos/widget/default.html @@ -18,14 +18,17 @@ </style> <script> $(function() { - // the widget definition, where 'custom' is the namespace, - // 'colorize' the widget name - $.widget( 'custom.colorize', { + // the widget definition, where "custom" is the namespace, + // "colorize" the widget name + $.widget( "custom.colorize", { // default options options: { red: 255, green: 0, - blue: 0 + blue: 0, + + // callbacks + random: null }, // the constructor @@ -35,9 +38,10 @@ .addClass("colorize") // prevent double click to select text .disableSelection(); + // bind click events to random method this._bind({ - // _bind won't call random when widget is disabled + // _bind won"t call random when widget is disabled click: "random" }); this._refresh(); @@ -45,18 +49,18 @@ // 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 + ')' + this.element.css( "background-color", "rgb(" + + this.options.red +"," + + this.options.green + "," + + this.options.blue + ")" ); // trigger a callback/event - this._trigger( 'change' ); + this._trigger( "change" ); }, // a public method to change the color to a random value - // can be called directly via .colorize( 'random' ) + // can be called directly via .colorize( "random" ) random: function( event ) { var colors = { red: Math.floor( Math.random() * 256 ), @@ -64,10 +68,9 @@ blue: Math.floor( Math.random() * 256 ) }; - // trigger an event, check if it's canceled - if ( this._trigger( 'random', event, colors ) !== false ) { - $.extend( this.options, colors ); - this._refresh(); + // trigger an event, check if it"s canceled + if ( this._trigger( "random", event, colors ) !== false ) { + this.option( colors ); } }, @@ -75,31 +78,39 @@ // revert other modifications here _destroy: function() { this.element - .removeClass( 'colorize' ) + .removeClass( "colorize" ) .enableSelection() - .css( 'background-color', 'transparent' ); + .css( "background-color", "transparent" ); }, - // always refresh when changing an option _setOption: function( key, value ) { + // prevent invalid color values + if ( /red|green|blue/.test(key) && value < 0 || value > 255 ) { + return; + } + this._super( "_setOptions", options ); + }, + + // always refresh when changing options + _setOptions: function() { // _super handles keeping the right this-context - this._super( "_setOption", key, value ); + this._superApply( "_setOptions", arguments ); this._refresh(); } }); // initialize with default options - $( '#my-widget1' ).colorize(); + $( "#my-widget1" ).colorize(); // initialize with two customized options - $( '#my-widget2' ).colorize({ + $( "#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( { + $( "#my-widget3" ).colorize( { green: 128, random: function( event, ui ) { return ui.green > 128; @@ -107,15 +118,16 @@ }); // click to toggle enabled/disabled - $( '#disable' ).toggle(function() { - $( ':custom-colorize' ).colorize( 'disable' ); + $( "#disable" ).toggle(function() { + // use the custom selector created for each widget to find all instances + $( ":custom-colorize" ).colorize( "disable" ); }, function() { - $( ':custom-colorize' ).colorize( 'enable' ); + $( ":custom-colorize" ).colorize( "enable" ); }); // click to set options after initalization - $( '#black' ).click( function() { - $( ':custom-colorize' ).colorize( 'option', { + $( "#black" ).click( function() { + $( ":custom-colorize" ).colorize( "option", { red: 0, green: 0, blue: 0 @@ -142,7 +154,7 @@ <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.</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><a href="http://wiki.jqueryui.com/w/page/12138135/Widget-factory">For more details on the widget factory, visit the jQuery UI planning wiki.</a></p> </div><!-- End demo-description --> |