mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Backport widget demo from master to get it up on jqueryui.com with the next 1.8.x release
This commit is contained in:
Jörn Zaefferer
parent
07d5271f7e
commit
66d6766dad
@ -288,6 +288,7 @@
|
||||
<dd><a href="show/index.html">Show</a></dd>
|
||||
<dt>Utilities</dt>
|
||||
<dd><a href="position/index.html">Position</a></dd>
|
||||
<dd><a href="widget/index.html">Widget</a></dd>
|
||||
<dt>About jQuery UI</dt>
|
||||
<dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd>
|
||||
|
||||
189
demos/widget/default.html
Normal file
189
demos/widget/default.html
Normal file
@ -0,0 +1,189 @@
|
||||
<!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.6.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.custom-colorize {
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
.custom-colorize-changer {
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
// the widget definition, where "custom" is the namespace,
|
||||
// "colorize" the widget name
|
||||
$.widget( "custom.colorize", {
|
||||
// default options
|
||||
options: {
|
||||
red: 255,
|
||||
green: 0,
|
||||
blue: 0,
|
||||
|
||||
// callbacks
|
||||
change: null,
|
||||
random: null
|
||||
},
|
||||
|
||||
// the constructor
|
||||
_create: function() {
|
||||
this.element
|
||||
// add a class for theming
|
||||
.addClass( "custom-colorize" )
|
||||
// prevent double click to select text
|
||||
.disableSelection();
|
||||
|
||||
this.changer = $( "<button>", {
|
||||
text: "change",
|
||||
"class": "custom-colorize-changer"
|
||||
})
|
||||
.appendTo( this.element )
|
||||
.button();
|
||||
|
||||
// bind click events on the changer button to the random method
|
||||
// in 1.9 would use this._bind( this.changer, { click: "random" });
|
||||
var that = this;
|
||||
this.changer.bind("click.colorize", function() {
|
||||
// _bind would handle this check
|
||||
if (that.options.disabled) {
|
||||
return;
|
||||
}
|
||||
that.random.apply(that, arguments);
|
||||
});
|
||||
this._refresh();
|
||||
},
|
||||
|
||||
// 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" );
|
||||
},
|
||||
|
||||
// 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 ) {
|
||||
this.option( colors );
|
||||
}
|
||||
},
|
||||
|
||||
// events bound via _bind are removed automatically
|
||||
// revert other modifications here
|
||||
_destroy: function() {
|
||||
// remove generated elements
|
||||
this.changer.remove();
|
||||
|
||||
this.element
|
||||
.removeClass( "custom-colorize" )
|
||||
.enableSelection()
|
||||
.css( "background-color", "transparent" );
|
||||
},
|
||||
|
||||
// _setOptions is called with a hash of all options that are changing
|
||||
// always refresh when changing options
|
||||
_setOptions: function() {
|
||||
// in 1.9 would use _superApply
|
||||
$.Widget.prototype._setOptions.apply( this, arguments );
|
||||
this._refresh();
|
||||
},
|
||||
|
||||
// _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;
|
||||
}
|
||||
// in 1.9 would use _super
|
||||
$.Widget.prototype._setOption.call( this, key, value );
|
||||
}
|
||||
});
|
||||
|
||||
// initialize with default options
|
||||
$( "#my-widget1" ).colorize();
|
||||
|
||||
// initialize with two customized options
|
||||
$( "#my-widget2" ).colorize({
|
||||
red: 60,
|
||||
blue: 60
|
||||
});
|
||||
|
||||
// initialize with custom green value
|
||||
// and a random callback to allow only colors with enough green
|
||||
$( "#my-widget3" ).colorize( {
|
||||
green: 128,
|
||||
random: function( event, ui ) {
|
||||
return ui.green > 128;
|
||||
}
|
||||
});
|
||||
|
||||
// click to toggle enabled/disabled
|
||||
$( "#disable" ).toggle(function() {
|
||||
// use the custom selector created for each widget to find all instances
|
||||
$( ":custom-colorize" ).colorize( "disable" );
|
||||
}, function() {
|
||||
$( ":custom-colorize" ).colorize( "enable" );
|
||||
});
|
||||
|
||||
// click to set options after initalization
|
||||
$( "#black" ).click( function() {
|
||||
$( ":custom-colorize" ).colorize( "option", {
|
||||
red: 0,
|
||||
green: 0,
|
||||
blue: 0
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
18
demos/widget/index.html
Normal file
18
demos/widget/index.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Widget Demo</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user