jquery-ui/demos/widget/default.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Widget - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<script src="../../external/jquery/jquery.js"></script>
	<script src="../../ui/core.js"></script>
	<script src="../../ui/position.js"></script>
	<script src="../../ui/widget.js"></script>
	<script src="../../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
				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>
</div>
</body>
</html>
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`<!doctype html>`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8">`
			`<title>jQuery UI Widget - Default functionality</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../themes/base/all.css">`
Build: Reorganize external directory Put each external library into its own directory. Move jquery.js to external. Ref gh-1266 2014-06-10 11:55:45 +00:00			`<script src="../../external/jquery/jquery.js"></script>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<script src="../../ui/core.js"></script>`
			`<script src="../../ui/position.js"></script>`
			`<script src="../../ui/widget.js"></script>`
			`<script src="../../ui/button.js"></script>`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`<link rel="stylesheet" href="../demos.css">`
			`<style>`
Widget demo: Coding standards, fixed some broken code, added more comments. 2011-06-08 01:39:02 +00:00			`.custom-colorize {`
Widget demo: Add a button to change the color of the widget. 2011-07-20 17:15:28 +00:00			`font-size: 20px;`
			`position: relative;`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`width: 75px;`
			`height: 75px;`
			`}`
Widget demo: Add a button to change the color of the widget. 2011-07-20 17:15:28 +00:00			`.custom-colorize-changer {`
			`font-size: 10px;`
			`position: absolute;`
			`right: 0;`
			`bottom: 0;`
			`}`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`</style>`
			`<script>`
			`$(function() {`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`// the widget definition, where "custom" is the namespace,`
			`// "colorize" the widget name`
			`$.widget( "custom.colorize", {`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`// default options`
			`options: {`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`red: 255,`
			`green: 0,`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`blue: 0,`

			`// callbacks`
Widget demo: Coding standards, fixed some broken code, added more comments. 2011-06-08 01:39:02 +00:00			`change: null,`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`random: null`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`},`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00
			`// the constructor`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`_create: function() {`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`this.element`
Widget demo: Coding standards, fixed some broken code, added more comments. 2011-06-08 01:39:02 +00:00			`// add a class for theming`
			`.addClass( "custom-colorize" )`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`// prevent double click to select text`
			`.disableSelection();`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00
Widget demo: Add a button to change the color of the widget. 2011-07-20 17:15:28 +00:00			`this.changer = $( "<button>", {`
			`text: "change",`
Widget: Update demo to work with 1.6 2011-08-04 17:57:36 +00:00			`"class": "custom-colorize-changer"`
Widget demo: Add a button to change the color of the widget. 2011-07-20 17:15:28 +00:00			`})`
			`.appendTo( this.element )`
			`.button();`

			`// bind click events on the changer button to the random method`
Widget: Rename _bind() to _on(). Partial fix for #7795 - Widget: _on and _off. 2012-06-13 12:00:45 +00:00			`this._on( this.changer, {`
			`// _on won't call random when widget is disabled`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`click: "random"`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`});`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`this._refresh();`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`},`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00
			`// called when created, and later when changing options`
			`_refresh: function() {`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`this.element.css( "background-color", "rgb(" +`
			`this.options.red +"," +`
			`this.options.green + "," +`
			`this.options.blue + ")"`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`);`

			`// trigger a callback/event`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`this._trigger( "change" );`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`},`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00
			`// a public method to change the color to a random value`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`// can be called directly via .colorize( "random" )`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`random: function( event ) {`
			`var colors = {`
			`red: Math.floor( Math.random() * 256 ),`
			`green: Math.floor( Math.random() * 256 ),`
			`blue: Math.floor( Math.random() * 256 )`
			`};`

Widget demo: Coding standards, fixed some broken code, added more comments. 2011-06-08 01:39:02 +00:00			`// trigger an event, check if it's canceled`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`if ( this._trigger( "random", event, colors ) !== false ) {`
			`this.option( colors );`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`}`
			`},`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00
Widget: Rename _bind() to _on(). Partial fix for #7795 - Widget: _on and _off. 2012-06-13 12:00:45 +00:00			`// events bound via _on are removed automatically`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`// revert other modifications here`
			`_destroy: function() {`
Widget demo: Add a button to change the color of the widget. 2011-07-20 17:15:28 +00:00			`// remove generated elements`
			`this.changer.remove();`

Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`this.element`
Widget demo: Coding standards, fixed some broken code, added more comments. 2011-06-08 01:39:02 +00:00			`.removeClass( "custom-colorize" )`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`.enableSelection()`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`.css( "background-color", "transparent" );`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`},`

Widget demo: Coding standards, fixed some broken code, added more comments. 2011-06-08 01:39:02 +00:00			`// _setOptions is called with a hash of all options that are changing`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`// always refresh when changing options`
			`_setOptions: function() {`
Widget demo: Coding standards, fixed some broken code, added more comments. 2011-06-08 01:39:02 +00:00			`// _super and _superApply handle keeping the right this-context`
Widget: Remove method argument from _super and _superApply. Was a left-over from first implementation, not necessary anymore. 2011-11-18 11:19:32 +00:00			`this._superApply( arguments );`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`this._refresh();`
Widget demo: Coding standards, fixed some broken code, added more comments. 2011-06-08 01:39:02 +00:00			`},`

			`// _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;`
			`}`
Widget: Remove method argument from _super and _superApply. Was a left-over from first implementation, not necessary anymore. 2011-11-18 11:19:32 +00:00			`this._super( key, value );`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`}`
			`});`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00
Widget demo: Some more inline comments 2011-06-02 11:25:12 +00:00			`// initialize with default options`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`$( "#my-widget1" ).colorize();`
Widget demo: Some more inline comments 2011-06-02 11:25:12 +00:00
			`// initialize with two customized options`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`$( "#my-widget2" ).colorize({`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`red: 60,`
			`blue: 60`
			`});`
Widget demo: Some more inline comments 2011-06-02 11:25:12 +00:00
			`// initialize with custom green value`
			`// and a random callback to allow only colors with enough green`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`$( "#my-widget3" ).colorize( {`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`green: 128,`
			`random: function( event, ui ) {`
			`return ui.green > 128;`
			`}`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`});`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00
Widget demo: Some more inline comments 2011-06-02 11:25:12 +00:00			`// click to toggle enabled/disabled`
Widget: Remove core event/alias and deprecated module dependencies 2015-05-14 02:02:32 +00:00			`$( "#disable" ).on( "click", function() {`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`// use the custom selector created for each widget to find all instances`
Widget demo: Don't use .toggle(fn). 2012-05-21 14:11:01 +00:00			`// 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" );`
			`}`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`});`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00
Demos: Fix small typos 2013-11-18 22:45:12 +00:00			`// click to set options after initialization`
Widget: Remove core event/alias and deprecated module dependencies 2015-05-14 02:02:32 +00:00			`$( "#green" ).on( "click", function() {`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`$( ":custom-colorize" ).colorize( "option", {`
Widget demo: Replace 'go black' with 'go screen' to keep text readable 2014-04-24 12:04:03 +00:00			`red: 64,`
			`green: 250,`
			`blue: 8`
Widget demo: Coding standards, fixed some broken code, added more comments. 2011-06-08 01:39:02 +00:00			`});`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`});`
			`});`
			`</script>`
			`</head>`
			`<body>`

			`<div>`
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget. 2011-06-02 11:22:33 +00:00			`<div id="my-widget1">color me</div>`
			`<div id="my-widget2">color me</div>`
			`<div id="my-widget3">color me</div>`
Widget demo: Fixed typo. 2011-08-09 20:19:18 +00:00			`<button id="disable">Toggle disabled option</button>`
Widget demo: Replace 'go black' with 'go screen' to keep text readable 2014-04-24 12:04:03 +00:00			`<button id="green">Go green</button>`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`</div>`

			`<div class="demo-description">`
			`<p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>`
Widget demo: Some improvements based on Scott's comments. 2011-06-02 12:25:25 +00:00			`<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>`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`</div>`
Widget: Demo. 2011-05-23 21:52:29 +00:00			`</body>`
			`</html>`