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">
20 .custom-colorize-changer {
29 // the widget definition, where "custom" is the namespace,
30 // "colorize" the widget name
31 $.widget( "custom.colorize", {
46 // add a class for theming
47 .addClass( "custom-colorize" )
48 // prevent double click to select text
51 this.changer = $( "<button>", {
53 "class": "custom-colorize-changer"
55 .appendTo( this.element )
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
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 + ")"
74 // trigger a callback/event
75 this._trigger( "change" );
78 // a public method to change the color to a random value
79 // can be called directly via .colorize( "random" )
80 random: function( event ) {
82 red: Math.floor( Math.random() * 256 ),
83 green: Math.floor( Math.random() * 256 ),
84 blue: Math.floor( Math.random() * 256 )
87 // trigger an event, check if it's canceled
88 if ( this._trigger( "random", event, colors ) !== false ) {
89 this.option( colors );
93 // events bound via _on are removed automatically
94 // revert other modifications here
95 _destroy: function() {
96 // remove generated elements
97 this.changer.remove();
100 .removeClass( "custom-colorize" )
102 .css( "background-color", "transparent" );
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 );
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) ) {
119 this._super( key, value );
123 // initialize with default options
124 $( "#my-widget1" ).colorize();
126 // initialize with two customized options
127 $( "#my-widget2" ).colorize({
132 // initialize with custom green value
133 // and a random callback to allow only colors with enough green
134 $( "#my-widget3" ).colorize( {
136 random: function( event, ui ) {
137 return ui.green > 128;
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" );
148 $( ":custom-colorize" ).colorize( "disable" );
152 // click to set options after initalization
153 $( "#black" ).click( function() {
154 $( ":custom-colorize" ).colorize( "option", {
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>
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>