library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Widget demo: Some improvements based on Scott's comments.

Browse Source
This commit is contained in:
Jörn Zaefferer 2011-06-02 14:25:25 +02:00
parent 8deb745a4a
commit 0e9f87f15b
1 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
demos/widget/default.html
View File

@ -18,14 +18,17 @@
</style> </style>
<script> <script>
$(function() { $(function() {
// the widget definition, where 'custom' is the namespace, // the widget definition, where "custom" is the namespace,
// 'colorize' the widget name // "colorize" the widget name
$.widget( 'custom.colorize', { $.widget( "custom.colorize", {
// default options // default options
options: { options: {
red: 255, red: 255,
green: 0, green: 0,
blue: 0 blue: 0,
// callbacks
random: null
}, },
// the constructor // the constructor
@ -35,9 +38,10 @@
.addClass("colorize") .addClass("colorize")
// prevent double click to select text // prevent double click to select text
.disableSelection(); .disableSelection();
// bind click events to random method // bind click events to random method
this._bind({ this._bind({
// _bind won't call random when widget is disabled // _bind won"t call random when widget is disabled
click: "random" click: "random"
}); });
this._refresh(); this._refresh();
@ -45,18 +49,18 @@
// called when created, and later when changing options // called when created, and later when changing options
_refresh: function() { _refresh: function() {
this.element.css( 'background-color', 'rgb(' + this.element.css( "background-color", "rgb(" +
this.options.red +',' + this.options.red +"," +
this.options.green + ',' + this.options.green + "," +
this.options.blue + ')' this.options.blue + ")"
); );
// trigger a callback/event // trigger a callback/event
this._trigger( 'change' ); this._trigger( "change" );
}, },
// a public method to change the color to a random value // a public method to change the color to a random value
// can be called directly via .colorize( 'random' ) // can be called directly via .colorize( "random" )
random: function( event ) { random: function( event ) {
var colors = { var colors = {
red: Math.floor( Math.random() * 256 ), red: Math.floor( Math.random() * 256 ),
@ -64,10 +68,9 @@
blue: Math.floor( Math.random() * 256 ) blue: Math.floor( Math.random() * 256 )
}; };
// trigger an event, check if it's canceled // trigger an event, check if it"s canceled
if ( this._trigger( 'random', event, colors ) !== false ) { if ( this._trigger( "random", event, colors ) !== false ) {
$.extend( this.options, colors ); this.option( colors );
this._refresh();
} }
}, },
@ -75,31 +78,39 @@
// revert other modifications here // revert other modifications here
_destroy: function() { _destroy: function() {
this.element this.element
.removeClass( 'colorize' ) .removeClass( "colorize" )
.enableSelection() .enableSelection()
.css( 'background-color', 'transparent' ); .css( "background-color", "transparent" );
}, },
// always refresh when changing an option
_setOption: function( key, value ) { _setOption: function( key, value ) {
// prevent invalid color values
if ( /red|green|blue/.test(key) && value < 0 || value > 255 ) {
return;
}
this._super( "_setOptions", options );
},
// always refresh when changing options
_setOptions: function() {
// _super handles keeping the right this-context // _super handles keeping the right this-context
this._super( "_setOption", key, value ); this._superApply( "_setOptions", arguments );
this._refresh(); this._refresh();
} }
}); });
// initialize with default options // initialize with default options
$( '#my-widget1' ).colorize(); $( "#my-widget1" ).colorize();
// initialize with two customized options // initialize with two customized options
$( '#my-widget2' ).colorize({ $( "#my-widget2" ).colorize({
red: 60, red: 60,
blue: 60 blue: 60
}); });
// initialize with custom green value // initialize with custom green value
// and a random callback to allow only colors with enough green // and a random callback to allow only colors with enough green
$( '#my-widget3' ).colorize( { $( "#my-widget3" ).colorize( {
green: 128, green: 128,
random: function( event, ui ) { random: function( event, ui ) {
return ui.green > 128; return ui.green > 128;
@ -107,15 +118,16 @@
}); });
// click to toggle enabled/disabled // click to toggle enabled/disabled
$( '#disable' ).toggle(function() { $( "#disable" ).toggle(function() {
$( ':custom-colorize' ).colorize( 'disable' ); // use the custom selector created for each widget to find all instances
$( ":custom-colorize" ).colorize( "disable" );
}, function() { }, function() {
$( ':custom-colorize' ).colorize( 'enable' ); $( ":custom-colorize" ).colorize( "enable" );
}); });
// click to set options after initalization // click to set options after initalization
$( '#black' ).click( function() { $( "#black" ).click( function() {
$( ':custom-colorize' ).colorize( 'option', { $( ":custom-colorize" ).colorize( "option", {
red: 0, red: 0,
green: 0, green: 0,
blue: 0 blue: 0
@ -142,7 +154,7 @@
<div class="demo-description"> <div class="demo-description">
<p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p> <p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works.</p> <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>
<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> <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 --> </div><!-- End demo-description -->