|
7
|
1 <!doctype html>
|
|
|
2 <html lang="en">
|
|
|
3 <head>
|
|
|
4 <meta charset="utf-8">
|
|
|
5 <title>jQuery UI Widget - Default functionality</title>
|
|
|
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
|
|
7 <script src="../../jquery-1.10.2.js"></script>
|
|
|
8 <script src="../../ui/jquery.ui.core.js"></script>
|
|
|
9 <script src="../../ui/jquery.ui.position.js"></script>
|
|
|
10 <script src="../../ui/jquery.ui.widget.js"></script>
|
|
|
11 <script src="../../ui/jquery.ui.button.js"></script>
|
|
|
12 <link rel="stylesheet" href="../demos.css">
|
|
|
13 <style>
|
|
|
14 .custom-colorize {
|
|
|
15 font-size: 20px;
|
|
|
16 position: relative;
|
|
|
17 width: 75px;
|
|
|
18 height: 75px;
|
|
|
19 }
|
|
|
20 .custom-colorize-changer {
|
|
|
21 font-size: 10px;
|
|
|
22 position: absolute;
|
|
|
23 right: 0;
|
|
|
24 bottom: 0;
|
|
|
25 }
|
|
|
26 </style>
|
|
|
27 <script>
|
|
|
28 $(function() {
|
|
|
29 // the widget definition, where "custom" is the namespace,
|
|
|
30 // "colorize" the widget name
|
|
|
31 $.widget( "custom.colorize", {
|
|
|
32 // default options
|
|
|
33 options: {
|
|
|
34 red: 255,
|
|
|
35 green: 0,
|
|
|
36 blue: 0,
|
|
|
37
|
|
|
38 // callbacks
|
|
|
39 change: null,
|
|
|
40 random: null
|
|
|
41 },
|
|
|
42
|
|
|
43 // the constructor
|
|
|
44 _create: function() {
|
|
|
45 this.element
|
|
|
46 // add a class for theming
|
|
|
47 .addClass( "custom-colorize" )
|
|
|
48 // prevent double click to select text
|
|
|
49 .disableSelection();
|
|
|
50
|
|
|
51 this.changer = $( "<button>", {
|
|
|
52 text: "change",
|
|
|
53 "class": "custom-colorize-changer"
|
|
|
54 })
|
|
|
55 .appendTo( this.element )
|
|
|
56 .button();
|
|
|
57
|
|
|
58 // bind click events on the changer button to the random method
|
|
|
59 this._on( this.changer, {
|
|
|
60 // _on won't call random when widget is disabled
|
|
|
61 click: "random"
|
|
|
62 });
|
|
|
63 this._refresh();
|
|
|
64 },
|
|
|
65
|
|
|
66 // called when created, and later when changing options
|
|
|
67 _refresh: function() {
|
|
|
68 this.element.css( "background-color", "rgb(" +
|
|
|
69 this.options.red +"," +
|
|
|
70 this.options.green + "," +
|
|
|
71 this.options.blue + ")"
|
|
|
72 );
|
|
|
73
|
|
|
74 // trigger a callback/event
|
|
|
75 this._trigger( "change" );
|
|
|
76 },
|
|
|
77
|
|
|
78 // a public method to change the color to a random value
|
|
|
79 // can be called directly via .colorize( "random" )
|
|
|
80 random: function( event ) {
|
|
|
81 var colors = {
|
|
|
82 red: Math.floor( Math.random() * 256 ),
|
|
|
83 green: Math.floor( Math.random() * 256 ),
|
|
|
84 blue: Math.floor( Math.random() * 256 )
|
|
|
85 };
|
|
|
86
|
|
|
87 // trigger an event, check if it's canceled
|
|
|
88 if ( this._trigger( "random", event, colors ) !== false ) {
|
|
|
89 this.option( colors );
|
|
|
90 }
|
|
|
91 },
|
|
|
92
|
|
|
93 // events bound via _on are removed automatically
|
|
|
94 // revert other modifications here
|
|
|
95 _destroy: function() {
|
|
|
96 // remove generated elements
|
|
|
97 this.changer.remove();
|
|
|
98
|
|
|
99 this.element
|
|
|
100 .removeClass( "custom-colorize" )
|
|
|
101 .enableSelection()
|
|
|
102 .css( "background-color", "transparent" );
|
|
|
103 },
|
|
|
104
|
|
|
105 // _setOptions is called with a hash of all options that are changing
|
|
|
106 // always refresh when changing options
|
|
|
107 _setOptions: function() {
|
|
|
108 // _super and _superApply handle keeping the right this-context
|
|
|
109 this._superApply( arguments );
|
|
|
110 this._refresh();
|
|
|
111 },
|
|
|
112
|
|
|
113 // _setOption is called for each individual option that is changing
|
|
|
114 _setOption: function( key, value ) {
|
|
|
115 // prevent invalid color values
|
|
|
116 if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
|
|
|
117 return;
|
|
|
118 }
|
|
|
119 this._super( key, value );
|
|
|
120 }
|
|
|
121 });
|
|
|
122
|
|
|
123 // initialize with default options
|
|
|
124 $( "#my-widget1" ).colorize();
|
|
|
125
|
|
|
126 // initialize with two customized options
|
|
|
127 $( "#my-widget2" ).colorize({
|
|
|
128 red: 60,
|
|
|
129 blue: 60
|
|
|
130 });
|
|
|
131
|
|
|
132 // initialize with custom green value
|
|
|
133 // and a random callback to allow only colors with enough green
|
|
|
134 $( "#my-widget3" ).colorize( {
|
|
|
135 green: 128,
|
|
|
136 random: function( event, ui ) {
|
|
|
137 return ui.green > 128;
|
|
|
138 }
|
|
|
139 });
|
|
|
140
|
|
|
141 // click to toggle enabled/disabled
|
|
|
142 $( "#disable" ).click(function() {
|
|
|
143 // use the custom selector created for each widget to find all instances
|
|
|
144 // all instances are toggled together, so we can check the state from the first
|
|
|
145 if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
|
|
|
146 $( ":custom-colorize" ).colorize( "enable" );
|
|
|
147 } else {
|
|
|
148 $( ":custom-colorize" ).colorize( "disable" );
|
|
|
149 }
|
|
|
150 });
|
|
|
151
|
|
|
152 // click to set options after initialization
|
|
|
153 $( "#black" ).click( function() {
|
|
|
154 $( ":custom-colorize" ).colorize( "option", {
|
|
|
155 red: 0,
|
|
|
156 green: 0,
|
|
|
157 blue: 0
|
|
|
158 });
|
|
|
159 });
|
|
|
160 });
|
|
|
161 </script>
|
|
|
162 </head>
|
|
|
163 <body>
|
|
|
164
|
|
|
165 <div>
|
|
|
166 <div id="my-widget1">color me</div>
|
|
|
167 <div id="my-widget2">color me</div>
|
|
|
168 <div id="my-widget3">color me</div>
|
|
|
169 <button id="disable">Toggle disabled option</button>
|
|
|
170 <button id="black">Go black</button>
|
|
|
171 </div>
|
|
|
172
|
|
|
173 <div class="demo-description">
|
|
|
174 <p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
|
|
|
175 <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>
|
|
|
176 </div>
|
|
|
177 </body>
|
|
|
178 </html>
|
