diff options
Diffstat (limited to 'apps/it/static/js/ui/demos/widget/default.html')
| -rw-r--r-- | apps/it/static/js/ui/demos/widget/default.html | 178 |
1 files changed, 0 insertions, 178 deletions
diff --git a/apps/it/static/js/ui/demos/widget/default.html b/apps/it/static/js/ui/demos/widget/default.html deleted file mode 100644 index 0ffc671..0000000 --- a/apps/it/static/js/ui/demos/widget/default.html +++ /dev/null @@ -1,178 +0,0 @@ -<!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> |