diff options
| -rw-r--r-- | demos/index.html | 1 | ||||
| -rw-r--r-- | demos/widget/default.html | 150 | ||||
| -rw-r--r-- | demos/widget/index.html | 18 |
3 files changed, 169 insertions, 0 deletions
diff --git a/demos/index.html b/demos/index.html index b1cfcdd44..53a2557a2 100644 --- a/demos/index.html +++ b/demos/index.html @@ -300,6 +300,7 @@ <dd><a href="show/index.html">Show</a></dd> <dt>Utilities</dt> <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..ec272e994 --- /dev/null +++ b/demos/widget/default.html @@ -0,0 +1,150 @@ +<!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.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .colorize { + font-size: 25px; + width: 75px; + height: 75px; + } + </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 + }, + + // the constructor + _create: function() { + this.element + // add a class for themeing + .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 + 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 ) { + $.extend( this.options, colors ); + this._refresh(); + } + }, + + // events bound via _bind are removed automatically + // revert other modifications here + _destroy: function() { + this.element + .removeClass( 'colorize' ) + .enableSelection() + .css( 'background-color', 'transparent' ); + }, + + // always refresh when changing an option + _setOption: function( key, value ) { + // _super handles keeping the right this-context + this._super( "_setOption", key, value ); + this._refresh(); + } + }); + + // 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() { + $( ':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.</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> |