Skip to content

Commit 66d6766

Browse files
jzaeffererjzaefferer
committed
Backport widget demo from master to get it up on jqueryui.com with the next 1.8.x release
1 parent 07d5271 commit 66d6766

File tree

3 files changed

+209
-1
lines changed

3 files changed

+209
-1
lines changed

‎demos/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,8 @@
287287
<dd><a href="hide/index.html">Hide</a></dd>
288288
<dd><a href="show/index.html">Show</a></dd>
289289
<dt>Utilities</dt>
290-
<dd><a href="position/index.html">Position</a></dd>
290+
<dd><a href="position/index.html">Position</a></dd>
291+
<dd><a href="widget/index.html">Widget</a></dd>
291292
<dt>About jQuery UI</dt>
292293
<dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd>
293294
<dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd>

‎demos/widget/default.html

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
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.6.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+
// in 1.9 would use this._bind( this.changer, { click: "random" });
60+
var that = this;
61+
this.changer.bind("click.colorize", function() {
62+
// _bind would handle this check
63+
if (that.options.disabled) {
64+
return;
65+
}
66+
that.random.apply(that, arguments);
67+
});
68+
this._refresh();
69+
},
70+
71+
// called when created, and later when changing options
72+
_refresh: function() {
73+
this.element.css( "background-color", "rgb(" +
74+
this.options.red +"," +
75+
this.options.green + "," +
76+
this.options.blue + ")"
77+
);
78+
79+
// trigger a callback/event
80+
this._trigger( "change" );
81+
},
82+
83+
// a public method to change the color to a random value
84+
// can be called directly via .colorize( "random" )
85+
random: function( event ) {
86+
var colors = {
87+
red: Math.floor( Math.random() * 256 ),
88+
green: Math.floor( Math.random() * 256 ),
89+
blue: Math.floor( Math.random() * 256 )
90+
};
91+
92+
// trigger an event, check if it's canceled
93+
if ( this._trigger( "random", event, colors ) !== false ) {
94+
this.option( colors );
95+
}
96+
},
97+
98+
// events bound via _bind are removed automatically
99+
// revert other modifications here
100+
_destroy: function() {
101+
// remove generated elements
102+
this.changer.remove();
103+
104+
this.element
105+
.removeClass( "custom-colorize" )
106+
.enableSelection()
107+
.css( "background-color", "transparent" );
108+
},
109+
110+
// _setOptions is called with a hash of all options that are changing
111+
// always refresh when changing options
112+
_setOptions: function() {
113+
// in 1.9 would use _superApply
114+
$.Widget.prototype._setOptions.apply( this, arguments );
115+
this._refresh();
116+
},
117+
118+
// _setOption is called for each individual option that is changing
119+
_setOption: function( key, value ) {
120+
// prevent invalid color values
121+
if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
122+
return;
123+
}
124+
// in 1.9 would use _super
125+
$.Widget.prototype._setOption.call( this, key, value );
126+
}
127+
});
128+
129+
// initialize with default options
130+
$( "#my-widget1" ).colorize();
131+
132+
// initialize with two customized options
133+
$( "#my-widget2" ).colorize({
134+
red: 60,
135+
blue: 60
136+
});
137+
138+
// initialize with custom green value
139+
// and a random callback to allow only colors with enough green
140+
$( "#my-widget3" ).colorize( {
141+
green: 128,
142+
random: function( event, ui ) {
143+
return ui.green > 128;
144+
}
145+
});
146+
147+
// click to toggle enabled/disabled
148+
$( "#disable" ).toggle(function() {
149+
// use the custom selector created for each widget to find all instances
150+
$( ":custom-colorize" ).colorize( "disable" );
151+
}, function() {
152+
$( ":custom-colorize" ).colorize( "enable" );
153+
});
154+
155+
// click to set options after initalization
156+
$( "#black" ).click( function() {
157+
$( ":custom-colorize" ).colorize( "option", {
158+
red: 0,
159+
green: 0,
160+
blue: 0
161+
});
162+
});
163+
});
164+
</script>
165+
</head>
166+
<body>
167+
168+
<div class="demo">
169+
170+
<div>
171+
<div id="my-widget1">color me</div>
172+
<div id="my-widget2">color me</div>
173+
<div id="my-widget3">color me</div>
174+
<button id="disable">Toglge disabled option</button>
175+
<button id="black">Go black</button>
176+
</div>
177+
178+
</div><!-- End demo -->
179+
180+
181+
182+
<div class="demo-description">
183+
<p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
184+
<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>
185+
<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>
186+
</div><!-- End demo-description -->
187+
188+
</body>
189+
</html>

‎demos/widget/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Widget Demo</title>
6+
<link rel="stylesheet" href="../demos.css">
7+
</head>
8+
<body>
9+
10+
<div class="demos-nav">
11+
<h4>Examples</h4>
12+
<ul>
13+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
14+
</ul>
15+
</div>
16+
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)