Widget demo: Some improvements based on Scott's comments.

Author: jzaefferer

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,87 +38,96 @@
 					.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();
 			},
 
 			// 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 ),
 					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 ) {
-					$.extend( this.options, colors );
-					this._refresh();
+				// trigger an event, check if it"s canceled
+				if ( this._trigger( "random", event, colors ) !== false ) {
+					this.option( colors );
 				}
 			},
 
 			// events bound via _bind are removed automatically
 			// 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;
 			}
 		});
 
 		// 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 -->