2011-05-23 21:52:29 +00:00
<!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" >
2011-11-22 13:43:09 +00:00
< script src = "../../jquery-1.7.1.js" > < / script >
2011-05-23 21:52:29 +00:00
< script src = "../../ui/jquery.ui.core.js" > < / script >
< script src = "../../ui/jquery.ui.position.js" > < / script >
2011-07-20 17:15:28 +00:00
< script src = "../../ui/jquery.ui.widget.js" > < / script >
< script src = "../../ui/jquery.ui.button.js" > < / script >
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 >
< script >
$(function() {
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,
// 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
// 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
.addClass( "custom-colorize" )
2011-06-02 11:22:33 +00:00
// prevent double click to select text
.disableSelection();
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();
// bind click events on the changer button to the random method
this._bind( this.changer, {
2011-06-08 01:39:02 +00:00
// _bind 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
// called when created, and later when changing options
_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
);
// 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
// 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 )
};
2011-06-08 01:39:02 +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
// events bound via _bind are removed automatically
// 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
2011-06-02 11:25:12 +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
// 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
// initialize with custom green value
// 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
2011-06-02 11:25:12 +00:00
// click to toggle enabled/disabled
2011-06-02 12:25:25 +00:00
$( "#disable" ).toggle(function() {
// use the custom selector created for each widget to find all instances
$( ":custom-colorize" ).colorize( "disable" );
2011-06-02 11:22:33 +00:00
}, function() {
2011-06-02 12:25:25 +00:00
$( ":custom-colorize" ).colorize( "enable" );
2011-05-23 21:52:29 +00:00
});
2011-06-02 11:22:33 +00:00
2011-06-02 11:25:12 +00:00
// click to set options after initalization
2011-06-02 12:25:25 +00:00
$( "#black" ).click( function() {
$( ":custom-colorize" ).colorize( "option", {
2011-06-02 11:22:33 +00:00
red: 0,
green: 0,
blue: 0
2011-06-08 01:39:02 +00:00
});
2011-05-23 21:52:29 +00:00
});
});
< / script >
< / head >
< body >
< div class = "demo" >
< 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 >
2011-06-02 11:22:33 +00:00
< button id = "black" > Go black< / button >
2011-05-23 21:52:29 +00:00
< / div >
< / div > <!-- End demo -->
< 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 >
2011-05-23 21:52:29 +00:00
< p > < a href = "http://wiki.jqueryui.com/w/page/12138135/Widget-factory" > For more details on the widget factory, visit the jQuery UI planning wiki.< / a > < / p >
< / div > <!-- End demo - description -->
< / body >
< / html >
