diff options
| author | Alvin Li <liweitianux@gmail.com> | 2013-08-22 15:18:58 +0800 |
|---|---|---|
| committer | Alvin Li <liweitianux@gmail.com> | 2013-08-22 15:18:58 +0800 |
| commit | 3f1d09f3b5b86157ccf9f47eef69a065be6153a4 (patch) | |
| tree | 84d424db169cea7daff7dc2ed7e045de15ec86eb /97suifangqa/apps/indicator/static/plugins/jquery-ui/demos/widget/default.html | |
| parent | 3ef1e03e4273544cce177ce7fa0e0ab75eded990 (diff) | |
| download | 97dev-3f1d09f3b5b86157ccf9f47eef69a065be6153a4.tar.bz2 | |
* added latest full package of 'jquery-ui' plugin, v1.10.3;
* improved 'thickbox' plugin to use 'jquery-1.9.x';
* upgraded 'SheetDefault.html', 'NewDeleteIndex.html' and other pages
to use 'jquery-1.9.x';
* improved 'IndexDesc.html' to deal with the problem of no related
annotation found;
* 'indicator.tools.get_record()' added param 'number', and updated
the format of return data;
* added 'get_num_record()' and 'get_num_record_std()' to
'indicator.tools';
* improved 'indicator.views.ajax_get_card_data_chart()',
now can get data by 'num' or by 'date';
* improved 'indicator.views.ajax_get_card_data_table()',
to provide the needed data requested from 'detail_card';
* improved js function 'chart_getdata_draw()' in 'SheetDefault.html';
* 'card_chart.js': renamed 'redraw_chart()' to
'detail_chart_getdata_draw()', and updated to get data by type;
* updated 'table' of 'detail_card' in 'SheetDefault.html';
* improved js function 'get_card_data_table()' for providing and
displaying record data in 'detail_card' table.
TODO:
* add/delete/edit record data
Diffstat (limited to '97suifangqa/apps/indicator/static/plugins/jquery-ui/demos/widget/default.html')
| -rw-r--r-- | 97suifangqa/apps/indicator/static/plugins/jquery-ui/demos/widget/default.html | 178 |
1 files changed, 178 insertions, 0 deletions
diff --git a/97suifangqa/apps/indicator/static/plugins/jquery-ui/demos/widget/default.html b/97suifangqa/apps/indicator/static/plugins/jquery-ui/demos/widget/default.html new file mode 100644 index 0000000..8931be4 --- /dev/null +++ b/97suifangqa/apps/indicator/static/plugins/jquery-ui/demos/widget/default.html @@ -0,0 +1,178 @@ +<!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> |