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">
|
|
|
|
|
<script src="../../jquery-1.5.1.js"></script>
|
|
|
|
|
<script src="../../ui/jquery.ui.core.js"></script>
|
|
|
|
|
<script src="../../ui/jquery.ui.widget.js"></script>
|
|
|
|
|
<script src="../../ui/jquery.ui.position.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="../demos.css">
|
|
|
|
|
<style>
|
2011-06-02 11:22:33 +00:00
|
|
|
.colorize {
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
width: 75px;
|
|
|
|
|
height: 75px;
|
|
|
|
|
}
|
2011-05-23 21:52:29 +00:00
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
$(function() {
|
2011-06-02 11:22:33 +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,
|
|
|
|
|
blue: 0
|
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
|
|
|
|
|
// add a class for themeing
|
|
|
|
|
.addClass("colorize")
|
|
|
|
|
// prevent double click to select text
|
|
|
|
|
.disableSelection();
|
|
|
|
|
// bind click events to random method
|
2011-05-23 21:52:29 +00:00
|
|
|
this._bind({
|
2011-06-02 11:22:33 +00:00
|
|
|
// _bind won't call random when widget is disabled
|
|
|
|
|
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() {
|
|
|
|
|
this.element.css( 'background-color', 'rgb(' +
|
|
|
|
|
this.options.red +',' +
|
|
|
|
|
this.options.green + ',' +
|
|
|
|
|
this.options.blue + ')'
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// trigger a callback/event
|
|
|
|
|
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
|
|
|
|
|
// can be called directly via .colorize( 'random' )
|
|
|
|
|
random: function( event ) {
|
|
|
|
|
var colors = {
|
|
|
|
|
red: Math.floor( Math.random() * 256 ),
|
|
|
|
|
green: Math.floor( Math.random() * 256 ),
|
|
|
|
|
blue: Math.floor( Math.random() * 256 )
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// trigger an event, check if it's canceled
|
|
|
|
|
if ( this._trigger( 'random', event, colors ) !== false ) {
|
|
|
|
|
$.extend( this.options, colors );
|
|
|
|
|
this._refresh();
|
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() {
|
|
|
|
|
this.element
|
|
|
|
|
.removeClass( 'colorize' )
|
|
|
|
|
.enableSelection()
|
|
|
|
|
.css( 'background-color', 'transparent' );
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// always refresh when changing an option
|
|
|
|
|
_setOption: function( key, value ) {
|
|
|
|
|
// _super handles keeping the right this-context
|
|
|
|
|
this._super( "_setOption", key, value );
|
|
|
|
|
this._refresh();
|
2011-05-23 21:52:29 +00:00
|
|
|
}
|
|
|
|
|
});
|
2011-06-02 11:22:33 +00:00
|
|
|
|
|
|
|
|
$( '#my-widget1' ).colorize();
|
|
|
|
|
$( '#my-widget2' ).colorize({
|
|
|
|
|
red: 60,
|
|
|
|
|
blue: 60
|
|
|
|
|
});
|
|
|
|
|
$( '#my-widget3' ).colorize( {
|
|
|
|
|
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
|
|
|
|
|
|
|
|
$( '#disable' ).toggle(function() {
|
|
|
|
|
$( ':custom-colorize' ).colorize( 'disable' );
|
|
|
|
|
}, function() {
|
|
|
|
|
$( ':custom-colorize' ).colorize( 'enable' );
|
2011-05-23 21:52:29 +00:00
|
|
|
});
|
2011-06-02 11:22:33 +00:00
|
|
|
|
|
|
|
|
$( '#black' ).click( function() {
|
|
|
|
|
$( ':custom-colorize' ).colorize( 'option', {
|
|
|
|
|
red: 0,
|
|
|
|
|
green: 0,
|
|
|
|
|
blue: 0
|
|
|
|
|
} );
|
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>
|
|
|
|
|
<button id="disable">Toglge disabled option</button>
|
|
|
|
|
<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 11:22:33 +00:00
|
|
|
<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works.</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>
|
