Merge commit 'd32092c1f0' as 'jquery-ui'

2025-06-07 00:47:00 +03:00 · 2016-08-05 12:47:57 +02:00 · 2016-08-05 12:47:57 +02:00 · b23131fdc2
commit b23131fdc2
parent 41bad3c240 d32092c1f0
717 changed files with 518330 additions and 0 deletions
--- a/jquery-ui/demos/widget/default.html
+++ b/jquery-ui/demos/widget/default.html
@ -0,0 +1,172 @@
+<!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>