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