+++ /dev/null
-<!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.9.1.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
- 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" ).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 initalization
- $( "#black" ).click( function() {
- $( ":custom-colorize" ).colorize( "option", {
- red: 0,
- green: 0,
- blue: 0
- });
- });
- });
- </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="black">Go black</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>
-</div>
-</body>
-</html>
git://git.onelab.eu / unfold.git / blobdiff