Nate
/
BIM-Monitor


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!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.10.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
				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" ).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
		$( "#black" ).click( function() {
			$( ":custom-colorize" ).colorize( "option", {
				red: 0,
				green: 0,
				blue: 0
			});
		});
	});
	</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="black">Go black</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>