third-party/jquery-ui-1.10.2/demos/widget/default.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Widget - Default functionality</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.position.js"></script>
  10         <script src="../../ui/jquery.ui.widget.js"></script>
  11         <script src="../../ui/jquery.ui.button.js"></script>
  12         <link rel="stylesheet" href="../demos.css">
  13         <style>
  14         .custom-colorize {
  15                 font-size: 20px;
  16                 position: relative;
  17                 width: 75px;
  18                 height: 75px;
  19         }
  20         .custom-colorize-changer {
  21                 font-size: 10px;
  22                 position: absolute;
  23                 right: 0;
  24                 bottom: 0;
  25         }
  26         </style>
  27         <script>
  28         $(function() {
  29                 // the widget definition, where "custom" is the namespace,
  30                 // "colorize" the widget name
  31                 $.widget( "custom.colorize", {
  32                         // default options
  33                         options: {
  34                                 red: 255,
  35                                 green: 0,
  36                                 blue: 0,
  37
  38                                 // callbacks
  39                                 change: null,
  40                                 random: null
  41                         },
  42
  43                         // the constructor
  44                         _create: function() {
  45                                 this.element
  46                                         // add a class for theming
  47                                         .addClass( "custom-colorize" )
  48                                         // prevent double click to select text
  49                                         .disableSelection();
  50
  51                                 this.changer = $( "<button>", {
  52                                         text: "change",
  53                                         "class": "custom-colorize-changer"
  54                                 })
  55                                 .appendTo( this.element )
  56                                 .button();
  57
  58                                 // bind click events on the changer button to the random method
  59                                 this._on( this.changer, {
  60                                         // _on won't call random when widget is disabled
  61                                         click: "random"
  62                                 });
  63                                 this._refresh();
  64                         },
  65
  66                         // called when created, and later when changing options
  67                         _refresh: function() {
  68                                 this.element.css( "background-color", "rgb(" +
  69                                         this.options.red +"," +
  70                                         this.options.green + "," +
  71                                         this.options.blue + ")"
  72                                 );
  73
  74                                 // trigger a callback/event
  75                                 this._trigger( "change" );
  76                         },
  77
  78                         // a public method to change the color to a random value
  79                         // can be called directly via .colorize( "random" )
  80                         random: function( event ) {
  81                                 var colors = {
  82                                         red: Math.floor( Math.random() * 256 ),
  83                                         green: Math.floor( Math.random() * 256 ),
  84                                         blue: Math.floor( Math.random() * 256 )
  85                                 };
  86
  87                                 // trigger an event, check if it's canceled
  88                                 if ( this._trigger( "random", event, colors ) !== false ) {
  89                                         this.option( colors );
  90                                 }
  91                         },
  92
  93                         // events bound via _on are removed automatically
  94                         // revert other modifications here
  95                         _destroy: function() {
  96                                 // remove generated elements
  97                                 this.changer.remove();
  98
  99                                 this.element
 100                                         .removeClass( "custom-colorize" )
 101                                         .enableSelection()
 102                                         .css( "background-color", "transparent" );
 103                         },
 104
 105                         // _setOptions is called with a hash of all options that are changing
 106                         // always refresh when changing options
 107                         _setOptions: function() {
 108                                 // _super and _superApply handle keeping the right this-context
 109                                 this._superApply( arguments );
 110                                 this._refresh();
 111                         },
 112
 113                         // _setOption is called for each individual option that is changing
 114                         _setOption: function( key, value ) {
 115                                 // prevent invalid color values
 116                                 if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
 117                                         return;
 118                                 }
 119                                 this._super( key, value );
 120                         }
 121                 });
 122
 123                 // initialize with default options
 124                 $( "#my-widget1" ).colorize();
 125
 126                 // initialize with two customized options
 127                 $( "#my-widget2" ).colorize({
 128                         red: 60,
 129                         blue: 60
 130                 });
 131
 132                 // initialize with custom green value
 133                 // and a random callback to allow only colors with enough green
 134                 $( "#my-widget3" ).colorize( {
 135                         green: 128,
 136                         random: function( event, ui ) {
 137                                 return ui.green > 128;
 138                         }
 139                 });
 140
 141                 // click to toggle enabled/disabled
 142                 $( "#disable" ).click(function() {
 143                         // use the custom selector created for each widget to find all instances
 144                         // all instances are toggled together, so we can check the state from the first
 145                         if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
 146                                 $( ":custom-colorize" ).colorize( "enable" );
 147                         } else {
 148                                 $( ":custom-colorize" ).colorize( "disable" );
 149                         }
 150                 });
 151
 152                 // click to set options after initalization
 153                 $( "#black" ).click( function() {
 154                         $( ":custom-colorize" ).colorize( "option", {
 155                                 red: 0,
 156                                 green: 0,
 157                                 blue: 0
 158                         });
 159                 });
 160         });
 161         </script>
 162 </head>
 163 <body>
 164
 165 <div>
 166         <div id="my-widget1">color me</div>
 167         <div id="my-widget2">color me</div>
 168         <div id="my-widget3">color me</div>
 169         <button id="disable">Toggle disabled option</button>
 170         <button id="black">Go black</button>
 171 </div>
 172
 173 <div class="demo-description">
 174 <p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
 175 <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>
 176 </div>
 177 </body>
 178 </html>