You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
4.6 KiB
173 lines
4.6 KiB
5 years ago
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>jQuery UI Widget - Default functionality</title>
|
||
|
|
<link rel="stylesheet" href="../../themes/base/all.css">
|
||
|
|
<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 src="../../external/requirejs/require.js"></script>
|
||
|
|
<script src="../bootstrap.js" data-modules="button">
|
||
|
|
// 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" );
|
||
|
|
|
||
|
|
this.changer = $( "<button>", {
|
||
|
|
text: "change",
|
||
|
|
"class": "custom-colorize-changer"
|
||
|
|
})
|
||
|
|
.appendTo( this.element )
|
||
|
|
.button();
|
||
|
|
|
||
|
|
// Bind click events on the changer button to the random method
|
||
|
|
this._on( this.changer, {
|
||
|
|
// _on won't call random when widget is disabled
|
||
|
|
click: "random"
|
||
|
|
});
|
||
|
|
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 _on 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() {
|
||
|
|
// _super and _superApply handle keeping the right this-context
|
||
|
|
this._superApply( 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;
|
||
|
|
}
|
||
|
|
this._super( 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" ).on( "click", function() {
|
||
|
|
// use the custom selector created for each widget to find all instances
|
||
|
|
// 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" );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Click to set options after initialization
|
||
|
|
$( "#green" ).on( "click", function() {
|
||
|
|
$( ":custom-colorize" ).colorize( "option", {
|
||
|
|
red: 64,
|
||
|
|
green: 250,
|
||
|
|
blue: 8
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<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">Toggle disabled option</button>
|
||
|
|
<button id="green">Go green</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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>To learn more about the widget factory, <a href="http://learn.jquery.com/jquery-ui/widget-factory/">visit learn.jquery.com</a>.</p>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|