Backport widget demo from master to get it up on jqueryui.com with the next 1.8.x release

author: Jörn Zaefferer <joern.zaefferer@gmail.com> 2011-08-04 19:47:08 +0200
committer: Jörn Zaefferer <joern.zaefferer@gmail.com> 2011-08-04 19:58:05 +0200
commit: 66d6766dad15eb3fc429f92925d0a61f1900850c (patch)
tree: 0608878a41a646eb2a0e462180a10bce241bd32e /demos
parent: 07d5271f7eac17a1a732b562b836b12a889e3b60 (diff)
download: jquery-ui-66d6766dad15eb3fc429f92925d0a61f1900850c.tar.gz
jquery-ui-66d6766dad15eb3fc429f92925d0a61f1900850c.zip
3 files changed, 209 insertions, 1 deletions
diff --git a/demos/index.html b/demos/index.html
index 678c3330b..1eb0d8c74 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -287,7 +287,8 @@
 					<dd><a href="hide/index.html">Hide</a></dd>
 					<dd><a href="show/index.html">Show</a></dd>
 				<dt>Utilities</dt>
-                    <dd><a href="position/index.html">Position</a></dd>
+					<dd><a href="position/index.html">Position</a></dd>
+					<dd><a href="widget/index.html">Widget</a></dd>
 				<dt>About jQuery UI</dt>
 					<dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd>
 					<dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd>					
diff --git a/demos/widget/default.html b/demos/widget/default.html
new file mode 100644
index 000000000..f45db8bbf
--- /dev/null
+++ b/demos/widget/default.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Widget - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.6.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<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>
+	$(function() {
+		// 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" )
+					// prevent double click to select text
+					.disableSelection();
+
+				this.changer = $( "<button>", {
+					text: "change",
+					"class": "custom-colorize-changer"
+				})
+				.appendTo( this.element )
+				.button();
+
+				// bind click events on the changer button to the random method
+				// in 1.9 would use this._bind( this.changer, { click: "random" });
+				var that = this;
+				this.changer.bind("click.colorize", function() {
+					// _bind would handle this check
+					if (that.options.disabled) {
+						return;
+					}
+					that.random.apply(that, arguments);
+				});
+				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 _bind 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() {
+				// in 1.9 would use _superApply
+				$.Widget.prototype._setOptions.apply( this, 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;
+				}
+				// in 1.9 would use _super
+				$.Widget.prototype._setOption.call( this, 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" ).toggle(function() {
+			// use the custom selector created for each widget to find all instances
+			$( ":custom-colorize" ).colorize( "disable" );
+		}, function() {
+			$( ":custom-colorize" ).colorize( "enable" );
+		});
+
+		// click to set options after initalization
+		$( "#black" ).click( function() {
+			$( ":custom-colorize" ).colorize( "option", {
+				red: 0,
+				green: 0,
+				blue: 0
+			});
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+
+<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">Toglge disabled option</button>
+	<button id="black">Go black</button>
+</div>
+
+</div><!-- End demo -->
+
+
+
+<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><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 -->
+
+</body>
+</html>
diff --git a/demos/widget/index.html b/demos/widget/index.html
new file mode 100644
index 000000000..1ecb4feea
--- /dev/null
+++ b/demos/widget/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Widget Demo</title>
+	<link rel="stylesheet" href="../demos.css">
+</head>
+<body>
+
+<div class="demos-nav">
+	<h4>Examples</h4>
+	<ul>
+		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+	</ul>
+</div>
+
+</body>
+</html>
author	Jörn Zaefferer <joern.zaefferer@gmail.com>	2011-08-04 19:47:08 +0200
committer	Jörn Zaefferer <joern.zaefferer@gmail.com>	2011-08-04 19:58:05 +0200
commit	66d6766dad15eb3fc429f92925d0a61f1900850c (patch)
tree	0608878a41a646eb2a0e462180a10bce241bd32e /demos
parent	07d5271f7eac17a1a732b562b836b12a889e3b60 (diff)
download	jquery-ui-66d6766dad15eb3fc429f92925d0a61f1900850c.tar.gz jquery-ui-66d6766dad15eb3fc429f92925d0a61f1900850c.zip