|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
6 |
<title>Creating custom widget classes</title> |
|
|
7 |
|
|
|
8 |
<style type="text/css"> |
|
|
9 |
/*margin and padding on body element |
|
|
10 |
can introduce errors in determining |
|
|
11 |
element position and are not recommended; |
|
|
12 |
we turn them off as a foundation for YUI |
|
|
13 |
CSS treatments. */ |
|
|
14 |
body { |
|
|
15 |
margin:0; |
|
|
16 |
padding:0; |
|
|
17 |
} |
|
|
18 |
</style> |
|
|
19 |
|
|
|
20 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
21 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
|
22 |
|
|
|
23 |
|
|
|
24 |
<!--begin custom header content for this example--> |
|
|
25 |
<style type="text/css"> |
|
|
26 |
|
|
|
27 |
/* Standard Module Widget CSS */ |
|
|
28 |
.yui-standardmodule-hidden { |
|
|
29 |
display:none; |
|
|
30 |
} |
|
|
31 |
|
|
|
32 |
.yui-standardmodule { |
|
|
33 |
margin:10px; |
|
|
34 |
} |
|
|
35 |
|
|
|
36 |
.yui-standardmodule-content { |
|
|
37 |
padding:3px; |
|
|
38 |
border:1px solid #666; |
|
|
39 |
} |
|
|
40 |
|
|
|
41 |
.yui-standardmodule-content .yui-widget-hd { |
|
|
42 |
padding:5px; |
|
|
43 |
border:2px solid #aa0000; |
|
|
44 |
background-color:#fff; |
|
|
45 |
overflow:auto; |
|
|
46 |
} |
|
|
47 |
|
|
|
48 |
.yui-standardmodule-content .yui-widget-bd { |
|
|
49 |
padding:5px; |
|
|
50 |
border:2px solid #0000aa; |
|
|
51 |
background-color:#fff; |
|
|
52 |
overflow:auto; |
|
|
53 |
} |
|
|
54 |
|
|
|
55 |
.yui-standardmodule-content .yui-widget-ft { |
|
|
56 |
padding:5px; |
|
|
57 |
border:2px solid #00aa00; |
|
|
58 |
background-color:#fff; |
|
|
59 |
overflow:auto; |
|
|
60 |
} |
|
|
61 |
|
|
|
62 |
/* Positionable Widget CSS */ |
|
|
63 |
.yui-positionable { |
|
|
64 |
position:absolute; |
|
|
65 |
} |
|
|
66 |
|
|
|
67 |
.yui-positionable-content { |
|
|
68 |
text-align:center; |
|
|
69 |
border:1px solid #000; |
|
|
70 |
background-color:#999966; |
|
|
71 |
color:#fff; |
|
|
72 |
padding:10px; |
|
|
73 |
} |
|
|
74 |
|
|
|
75 |
.yui-positionable-hidden { |
|
|
76 |
visibility:hidden; |
|
|
77 |
} |
|
|
78 |
|
|
|
79 |
/* Alignable Widget CSS */ |
|
|
80 |
.yui-alignable { |
|
|
81 |
position:absolute; |
|
|
82 |
} |
|
|
83 |
|
|
|
84 |
.yui-alignable-content { |
|
|
85 |
text-align:center; |
|
|
86 |
border:1px solid #000000; |
|
|
87 |
background-color:#004C6D; |
|
|
88 |
color:#fff; |
|
|
89 |
padding:2px; |
|
|
90 |
} |
|
|
91 |
|
|
|
92 |
.yui-alignable-hidden { |
|
|
93 |
visibility:hidden; |
|
|
94 |
} |
|
|
95 |
|
|
|
96 |
|
|
|
97 |
/* Example Layout CSS */ |
|
|
98 |
.widget-build-example { |
|
|
99 |
border:1px solid #000; |
|
|
100 |
background-color:#eee; |
|
|
101 |
padding:5px; |
|
|
102 |
margin:10px 0; |
|
|
103 |
} |
|
|
104 |
|
|
|
105 |
.widget-build-example button, .widget-build-example label, .widget-build-example select, .widget-build-example input { |
|
|
106 |
margin-right:5px; |
|
|
107 |
} |
|
|
108 |
|
|
|
109 |
.widget-build-example button.fail { |
|
|
110 |
color:#cc0000; |
|
|
111 |
margin-left:10px; |
|
|
112 |
} |
|
|
113 |
|
|
|
114 |
.widget-build-example .filler { |
|
|
115 |
color:#999; |
|
|
116 |
} |
|
|
117 |
|
|
|
118 |
#x, #y { |
|
|
119 |
width:3em; |
|
|
120 |
} |
|
|
121 |
|
|
|
122 |
#widget2-example, #widget3-example { |
|
|
123 |
height:15em; |
|
|
124 |
} |
|
|
125 |
|
|
|
126 |
#widget2-example select, #widget3-example select { |
|
|
127 |
width:100%; |
|
|
128 |
} |
|
|
129 |
|
|
|
130 |
#alignment p { |
|
|
131 |
color:#dddd00; |
|
|
132 |
} |
|
|
133 |
</style> |
|
|
134 |
<!--end custom header content for this example--> |
|
|
135 |
|
|
|
136 |
</head> |
|
|
137 |
|
|
|
138 |
<body class=" yui-skin-sam"> |
|
|
139 |
|
|
|
140 |
<h1>Creating custom widget classes</h1> |
|
|
141 |
|
|
|
142 |
<div class="exampleIntro"> |
|
|
143 |
This example shows how you can mix and match the <code>WidgetPostion</code>, <code>WidgetPositionExt</code>, <code>WidgetStack</code> and <code>WidgetStdMod</code> extensions to build custom versions of the <code>Widget</code> class, using <code>Base.build</code>. |
|
|
144 |
|
|
|
145 |
</div> |
|
|
146 |
|
|
|
147 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
148 |
|
|
|
149 |
|
|
|
150 |
<ol> |
|
|
151 |
<li><code>Widget</code> with <code>WidgetStdMod</code> |
|
|
152 |
|
|
|
153 |
<div class="widget-build-example" id="widget1-example"> |
|
|
154 |
<input type="text" id="content" value=""> |
|
|
155 |
<select id="section"> |
|
|
156 |
<option value="header">Header</option> |
|
|
157 |
<option value="body">Body</option> |
|
|
158 |
<option value="footer">Footer</option> |
|
|
159 |
</select> |
|
|
160 |
<button type="button" id="setContent">Set Content</button> |
|
|
161 |
<button type="button" class="fail" id="tryMove">move() (should fail)</button> |
|
|
162 |
|
|
|
163 |
<div id="widget1"> |
|
|
164 |
<div class="yui-widget-hd">Module Header</div> |
|
|
165 |
<div class="yui-widget-bd">Module Body</div> |
|
|
166 |
<div class="yui-widget-ft">Module Footer</div> |
|
|
167 |
</div> |
|
|
168 |
|
|
|
169 |
<p class="filler">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, luctus ut, interdum ac, quam.</p> |
|
|
170 |
</div> |
|
|
171 |
</li> |
|
|
172 |
|
|
|
173 |
<li><code>Widget</code> with <code>WidgetPosition, WidgetStack</code> |
|
|
174 |
|
|
|
175 |
<div class="widget-build-example" id="widget2-example"> |
|
|
176 |
<label>X: <input type="text" id="x" value="0" ></label> |
|
|
177 |
<label>Y: <input type="text" id="y" value="0" ></label> |
|
|
178 |
<button type="button" id="move">Move</button> |
|
|
179 |
<button type="button" class="fail" id="tryContent">setStdModContent() (should fail)</button> |
|
|
180 |
|
|
|
181 |
<div id="widget2"><strong>Positionable Widget</strong></div> |
|
|
182 |
|
|
|
183 |
<p class="filler"> |
|
|
184 |
<select> |
|
|
185 |
<option>Prevent IE6 Bleedthrough</option> |
|
|
186 |
</select> |
|
|
187 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, luctus ut, interdum ac, quam. Pellentesque euismod. Nam tincidunt, purus in ultrices congue, urna neque posuere arcu, aliquam tristique purus sapien id nulla. Etiam rhoncus nulla at leo. Cras scelerisque nisl in nibh. Sed eget odio. Morbi elit elit, porta a, convallis sit amet, rhoncus non, felis. Mauris nulla pede, pretium eleifend, porttitor at, rutrum id, orci. Quisque non urna. Nulla aliquam rhoncus est. |
|
|
188 |
</p> |
|
|
189 |
</div> |
|
|
190 |
</li> |
|
|
191 |
|
|
|
192 |
<li><code>Widget</code> with <code>WidgetPosition, WidgetStack, WidgetPositionExt</code></strong> |
|
|
193 |
|
|
|
194 |
<div class="widget-build-example" id="widget3-example"> |
|
|
195 |
<button type="button" id="run">Run Through Alignment</button> |
|
|
196 |
<p class="filler"> |
|
|
197 |
<select> |
|
|
198 |
<option>Prevent IE6 Bleedthrough</option> |
|
|
199 |
</select> |
|
|
200 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, luctus ut, interdum ac, quam. Pellentesque euismod. Nam tincidunt, purus in ultrices congue, urna neque posuere arcu, aliquam tristique purus sapien id nulla. Etiam rhoncus nulla at leo. Cras scelerisque nisl in nibh. Sed eget odio. Morbi elit elit, porta a, convallis sit amet, rhoncus non, felis. Mauris nulla pede, pretium eleifend, porttitor at, rutrum id, orci. Quisque non urna. Nulla aliquam rhoncus est. |
|
|
201 |
</p> |
|
|
202 |
</div> |
|
|
203 |
</li> |
|
|
204 |
</ol> |
|
|
205 |
|
|
|
206 |
|
|
|
207 |
<script type="text/javascript"> |
|
|
208 |
YUI({base:"../../build/", timeout: 10000}).use("widget", "widget-position", "widget-stack", "widget-position-ext", "widget-stdmod", "async-queue", function(Y) { |
|
|
209 |
|
|
|
210 |
|
|
|
211 |
|
|
|
212 |
// WIDGET 1 : Build Widget with StdMod, but no positioning/stacking support. |
|
|
213 |
|
|
|
214 |
var StandardModule = Y.Base.build("standardModule", Y.Widget, [Y.WidgetStdMod]); |
|
|
215 |
|
|
|
216 |
var stdmod = new StandardModule({ |
|
|
217 |
contentBox: "#widget1", |
|
|
218 |
width:"12em", |
|
|
219 |
height:"12em" |
|
|
220 |
}); |
|
|
221 |
stdmod.render(); |
|
|
222 |
|
|
|
223 |
var contentInput = Y.one("#content"); |
|
|
224 |
var sectionInput = Y.one("#section"); |
|
|
225 |
|
|
|
226 |
Y.on("click", function(e) { |
|
|
227 |
var content = contentInput.get("value"); |
|
|
228 |
var section = sectionInput.get("value"); |
|
|
229 |
|
|
|
230 |
stdmod.setStdModContent(section, content); |
|
|
231 |
|
|
|
232 |
}, "#setContent"); |
|
|
233 |
|
|
|
234 |
Y.on("click", function(e) { |
|
|
235 |
try { |
|
|
236 |
stdmod.move([0,0]); |
|
|
237 |
} catch (e) { |
|
|
238 |
alert("move() is " + typeof stdmod.move + ", stdmod.hasImpl(Y.WidgetPosition) : " + stdmod.hasImpl(Y.WidgetPosition)); |
|
|
239 |
} |
|
|
240 |
}, "#tryMove"); |
|
|
241 |
|
|
|
242 |
|
|
|
243 |
|
|
|
244 |
// WIDGET 2: Build Widget with Position support and Stack support, but no StdMod support or Position Extras support. |
|
|
245 |
|
|
|
246 |
var Positionable = Y.Base.build("positionable", Y.Widget, [Y.WidgetPosition, Y.WidgetStack]); |
|
|
247 |
|
|
|
248 |
var positionable = new Positionable({ |
|
|
249 |
contentBox: "#widget2", |
|
|
250 |
width:"10em", |
|
|
251 |
zIndex:1 |
|
|
252 |
}); |
|
|
253 |
positionable.render("#widget2-example"); |
|
|
254 |
|
|
|
255 |
var xy = Y.one("#widget2-example > p").getXY(); |
|
|
256 |
|
|
|
257 |
positionable.move(xy[0], xy[1]); |
|
|
258 |
|
|
|
259 |
var xInput = Y.one("#x"); |
|
|
260 |
var yInput = Y.one("#y"); |
|
|
261 |
|
|
|
262 |
xInput.set("value", Math.round(xy[0])); |
|
|
263 |
yInput.set("value", Math.round(xy[1])); |
|
|
264 |
|
|
|
265 |
Y.on("click", function(e) { |
|
|
266 |
var x = parseInt(xInput.get("value")); |
|
|
267 |
var y = parseInt(yInput.get("value")); |
|
|
268 |
|
|
|
269 |
positionable.move(x,y); |
|
|
270 |
|
|
|
271 |
}, "#move"); |
|
|
272 |
|
|
|
273 |
Y.on("click", function(e) { |
|
|
274 |
try { |
|
|
275 |
positionable.setStdModContent("header", "new content"); |
|
|
276 |
} catch (e) { |
|
|
277 |
alert("setStdModContent() is " + typeof positionable.setStdModContent + ", positionable.hasImpl(Y.WidgetStdMod) : " + positionable.hasImpl(Y.WidgetStdMod)); |
|
|
278 |
} |
|
|
279 |
}, "#tryContent"); |
|
|
280 |
|
|
|
281 |
|
|
|
282 |
|
|
|
283 |
// WIDGET 3: Build Widget with Position, PositionExt and Stack support, but no StdMod support. |
|
|
284 |
|
|
|
285 |
var Alignable = Y.Base.build("alignable", Y.Widget, [Y.WidgetPosition, Y.WidgetPositionExt, Y.WidgetStack]); |
|
|
286 |
|
|
|
287 |
var alignable = new Alignable({ |
|
|
288 |
width:"13em", |
|
|
289 |
align : { |
|
|
290 |
node: "#widget3-example", |
|
|
291 |
points: ["cc", "cc"] |
|
|
292 |
}, |
|
|
293 |
zIndex:1 |
|
|
294 |
}); |
|
|
295 |
alignable.get("contentBox").set("innerHTML", '<strong>Alignable Widget</strong><div id="alignment"><p>#widget3-example</p><p>[center, center]</p></div>'); |
|
|
296 |
alignable.render("#widget3-example"); |
|
|
297 |
|
|
|
298 |
Y.on('click', function() { |
|
|
299 |
var stepDelay = 2500; |
|
|
300 |
var currAlignment = Y.one("#alignment"); |
|
|
301 |
var steps = [ |
|
|
302 |
function() { |
|
|
303 |
alignable.set("align", {node:"#widget3-example", points:["lc", "rc"]}); |
|
|
304 |
currAlignment.set("innerHTML", "<p>#widget3-example</p><p>[left-center, right-center]</p>"); |
|
|
305 |
}, |
|
|
306 |
function() { |
|
|
307 |
alignable.set("align", {node:"#widget3-example", points:["tr", "br"]}); |
|
|
308 |
currAlignment.set("innerHTML", "<p>#widget3-example</p><p>[top-right, bottom-right]</p>"); |
|
|
309 |
}, |
|
|
310 |
function() { |
|
|
311 |
alignable.set("centered", "#widget3-example"); |
|
|
312 |
currAlignment.set("innerHTML", "<p>#widget3-example</p><p>centered</p>"); |
|
|
313 |
}, |
|
|
314 |
function() { |
|
|
315 |
alignable.set("align", {points:["rc", "rc"]}); |
|
|
316 |
currAlignment.set("innerHTML", "<p>viewport</p><p>[right-center, right-center]</p>"); |
|
|
317 |
}, |
|
|
318 |
function() { |
|
|
319 |
alignable.set("centered", true); |
|
|
320 |
currAlignment.set("innerHTML", "<p>viewport</p><p>centered</p>"); |
|
|
321 |
}, |
|
|
322 |
function() { |
|
|
323 |
alignable.set("align", {node:"#widget3-example", points:["cc", "cc"]}); |
|
|
324 |
currAlignment.set("innerHTML", "<p>#widget3-example</p><p>[center, center]</p>"); |
|
|
325 |
} |
|
|
326 |
]; |
|
|
327 |
|
|
|
328 |
var q = new Y.AsyncQueue(); |
|
|
329 |
for (var i = 0; i < steps.length; i++){ |
|
|
330 |
q.add({ |
|
|
331 |
timeout: (i === 0) ? 0 : stepDelay, |
|
|
332 |
fn:steps[i] |
|
|
333 |
}); |
|
|
334 |
} |
|
|
335 |
q.run(); |
|
|
336 |
|
|
|
337 |
}, "#run"); |
|
|
338 |
|
|
|
339 |
}); |
|
|
340 |
</script> |
|
|
341 |
|
|
|
342 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
343 |
|
|
|
344 |
</body> |
|
|
345 |
</html> |