2012-09-10 15:33:46 +00:00
<!doctype html>
2011-05-23 21:52:29 +00:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2015-09-30 13:11:22 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2011-05-23 21:52:29 +00:00
< title > jQuery UI Widget - Default functionality< / title >
2013-12-02 18:36:12 +00:00
< link rel = "stylesheet" href = "../../themes/base/all.css" >
2011-05-23 21:52:29 +00:00
< link rel = "stylesheet" href = "../demos.css" >
< style >
2011-06-08 01:39:02 +00:00
.custom-colorize {
2011-07-20 17:15:28 +00:00
font-size: 20px;
position: relative;
2011-06-02 11:22:33 +00:00
width: 75px;
height: 75px;
}
2011-07-20 17:15:28 +00:00
.custom-colorize-changer {
font-size: 10px;
position: absolute;
right: 0;
bottom: 0;
}
2011-05-23 21:52:29 +00:00
< / style >
2015-07-01 03:46:37 +00:00
< script src = "../../external/requirejs/require.js" > < / script >
< script src = "../bootstrap.js" data-modules = "button" >
2011-06-02 12:25:25 +00:00
// the widget definition, where "custom" is the namespace,
// "colorize" the widget name
$.widget( "custom.colorize", {
2011-05-23 21:52:29 +00:00
// default options
options: {
2011-06-02 11:22:33 +00:00
red: 255,
green: 0,
2011-06-02 12:25:25 +00:00
blue: 0,
2015-08-21 04:13:00 +00:00
// Callbacks
2011-06-08 01:39:02 +00:00
change: null,
2011-06-02 12:25:25 +00:00
random: null
2011-05-23 21:52:29 +00:00
},
2011-06-02 11:22:33 +00:00
2015-08-21 04:13:00 +00:00
// The constructor
2011-05-23 21:52:29 +00:00
_create: function() {
2011-06-02 11:22:33 +00:00
this.element
2011-06-08 01:39:02 +00:00
// add a class for theming
2015-09-21 11:14:20 +00:00
.addClass( "custom-colorize" );
2011-06-02 12:25:25 +00:00
2011-07-20 17:15:28 +00:00
this.changer = $( "< button > ", {
text: "change",
2011-08-04 17:57:36 +00:00
"class": "custom-colorize-changer"
2011-07-20 17:15:28 +00:00
})
.appendTo( this.element )
.button();
2015-08-21 04:13:00 +00:00
// Bind click events on the changer button to the random method
2012-06-13 12:00:45 +00:00
this._on( this.changer, {
// _on won't call random when widget is disabled
2011-06-02 11:22:33 +00:00
click: "random"
2011-05-23 21:52:29 +00:00
});
2011-06-02 11:22:33 +00:00
this._refresh();
2011-05-23 21:52:29 +00:00
},
2011-06-02 11:22:33 +00:00
2015-08-21 04:13:00 +00:00
// Called when created, and later when changing options
2011-06-02 11:22:33 +00:00
_refresh: function() {
2011-06-02 12:25:25 +00:00
this.element.css( "background-color", "rgb(" +
this.options.red +"," +
this.options.green + "," +
this.options.blue + ")"
2011-06-02 11:22:33 +00:00
);
2015-08-21 04:13:00 +00:00
// Trigger a callback/event
2011-06-02 12:25:25 +00:00
this._trigger( "change" );
2011-05-23 21:52:29 +00:00
},
2011-06-02 11:22:33 +00:00
2015-08-21 04:13:00 +00:00
// A public method to change the color to a random value
2011-06-02 12:25:25 +00:00
// can be called directly via .colorize( "random" )
2011-06-02 11:22:33 +00:00
random: function( event ) {
var colors = {
red: Math.floor( Math.random() * 256 ),
green: Math.floor( Math.random() * 256 ),
blue: Math.floor( Math.random() * 256 )
};
2015-08-21 04:13:00 +00:00
// Trigger an event, check if it's canceled
2011-06-02 12:25:25 +00:00
if ( this._trigger( "random", event, colors ) !== false ) {
this.option( colors );
2011-05-23 21:52:29 +00:00
}
},
2011-06-02 11:22:33 +00:00
2015-08-21 04:13:00 +00:00
// Events bound via _on are removed automatically
2011-06-02 11:22:33 +00:00
// revert other modifications here
_destroy: function() {
2011-07-20 17:15:28 +00:00
// remove generated elements
this.changer.remove();
2011-06-02 11:22:33 +00:00
this.element
2011-06-08 01:39:02 +00:00
.removeClass( "custom-colorize" )
2011-06-02 11:22:33 +00:00
.enableSelection()
2011-06-02 12:25:25 +00:00
.css( "background-color", "transparent" );
2011-06-02 11:22:33 +00:00
},
2011-06-08 01:39:02 +00:00
// _setOptions is called with a hash of all options that are changing
2011-06-02 12:25:25 +00:00
// always refresh when changing options
_setOptions: function() {
2011-06-08 01:39:02 +00:00
// _super and _superApply handle keeping the right this-context
2011-11-18 11:19:32 +00:00
this._superApply( arguments );
2011-06-02 11:22:33 +00:00
this._refresh();
2011-06-08 01:39:02 +00:00
},
// _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;
}
2011-11-18 11:19:32 +00:00
this._super( key, value );
2011-05-23 21:52:29 +00:00
}
});
2011-06-02 11:22:33 +00:00
2015-08-21 04:13:00 +00:00
// Initialize with default options
2011-06-02 12:25:25 +00:00
$( "#my-widget1" ).colorize();
2011-06-02 11:25:12 +00:00
2015-08-21 04:13:00 +00:00
// Initialize with two customized options
2011-06-02 12:25:25 +00:00
$( "#my-widget2" ).colorize({
2011-06-02 11:22:33 +00:00
red: 60,
blue: 60
});
2011-06-02 11:25:12 +00:00
2015-08-21 04:13:00 +00:00
// Initialize with custom green value
2011-06-02 11:25:12 +00:00
// and a random callback to allow only colors with enough green
2011-06-02 12:25:25 +00:00
$( "#my-widget3" ).colorize( {
2011-06-02 11:22:33 +00:00
green: 128,
random: function( event, ui ) {
return ui.green > 128;
}
2011-05-23 21:52:29 +00:00
});
2011-06-02 11:22:33 +00:00
2015-08-21 04:13:00 +00:00
// Click to toggle enabled/disabled
2015-05-14 02:02:32 +00:00
$( "#disable" ).on( "click", function() {
2011-06-02 12:25:25 +00:00
// use the custom selector created for each widget to find all instances
2012-05-21 14:11:01 +00:00
// 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" );
}
2011-05-23 21:52:29 +00:00
});
2011-06-02 11:22:33 +00:00
2015-08-21 04:13:00 +00:00
// Click to set options after initialization
2015-05-14 02:02:32 +00:00
$( "#green" ).on( "click", function() {
2011-06-02 12:25:25 +00:00
$( ":custom-colorize" ).colorize( "option", {
2014-04-24 12:04:03 +00:00
red: 64,
green: 250,
blue: 8
2011-06-08 01:39:02 +00:00
});
2011-05-23 21:52:29 +00:00
});
< / script >
< / head >
< body >
< div >
2011-06-02 11:22:33 +00:00
< div id = "my-widget1" > color me< / div >
< div id = "my-widget2" > color me< / div >
< div id = "my-widget3" > color me< / div >
2011-08-09 20:19:18 +00:00
< button id = "disable" > Toggle disabled option< / button >
2014-04-24 12:04:03 +00:00
< button id = "green" > Go green< / button >
2011-05-23 21:52:29 +00:00
< / div >
< div class = "demo-description" >
< p > This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).< / p >
2011-06-02 12:25:25 +00:00
< 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 >
2015-10-29 11:40:30 +00:00
< p > To learn more about the widget factory, < a href = "http://learn.jquery.com/jquery-ui/widget-factory/" > visit learn.jquery.com< / a > .< / p >
2012-09-10 15:33:46 +00:00
< / div >
2011-05-23 21:52:29 +00:00
< / body >
< / html >
