|
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 |
<title>YUI Library Examples: Widget: Creating custom widget classes</title> |
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
|
8 |
|
|
|
9 |
<style> |
|
|
10 |
/*Supplemental CSS for the YUI distribution*/ |
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; } |
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
|
14 |
</style> |
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
|
17 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
18 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
|
19 |
<style type="text/css"> |
|
|
20 |
|
|
|
21 |
/* Standard Module Widget CSS */ |
|
|
22 |
.yui-standardmodule-hidden { |
|
|
23 |
display:none; |
|
|
24 |
} |
|
|
25 |
|
|
|
26 |
.yui-standardmodule { |
|
|
27 |
margin:10px; |
|
|
28 |
} |
|
|
29 |
|
|
|
30 |
.yui-standardmodule-content { |
|
|
31 |
padding:3px; |
|
|
32 |
border:1px solid #666; |
|
|
33 |
} |
|
|
34 |
|
|
|
35 |
.yui-standardmodule-content .yui-widget-hd { |
|
|
36 |
padding:5px; |
|
|
37 |
border:2px solid #aa0000; |
|
|
38 |
background-color:#fff; |
|
|
39 |
overflow:auto; |
|
|
40 |
} |
|
|
41 |
|
|
|
42 |
.yui-standardmodule-content .yui-widget-bd { |
|
|
43 |
padding:5px; |
|
|
44 |
border:2px solid #0000aa; |
|
|
45 |
background-color:#fff; |
|
|
46 |
overflow:auto; |
|
|
47 |
} |
|
|
48 |
|
|
|
49 |
.yui-standardmodule-content .yui-widget-ft { |
|
|
50 |
padding:5px; |
|
|
51 |
border:2px solid #00aa00; |
|
|
52 |
background-color:#fff; |
|
|
53 |
overflow:auto; |
|
|
54 |
} |
|
|
55 |
|
|
|
56 |
/* Positionable Widget CSS */ |
|
|
57 |
.yui-positionable { |
|
|
58 |
position:absolute; |
|
|
59 |
} |
|
|
60 |
|
|
|
61 |
.yui-positionable-content { |
|
|
62 |
text-align:center; |
|
|
63 |
border:1px solid #000; |
|
|
64 |
background-color:#999966; |
|
|
65 |
color:#fff; |
|
|
66 |
padding:10px; |
|
|
67 |
} |
|
|
68 |
|
|
|
69 |
.yui-positionable-hidden { |
|
|
70 |
visibility:hidden; |
|
|
71 |
} |
|
|
72 |
|
|
|
73 |
/* Alignable Widget CSS */ |
|
|
74 |
.yui-alignable { |
|
|
75 |
position:absolute; |
|
|
76 |
} |
|
|
77 |
|
|
|
78 |
.yui-alignable-content { |
|
|
79 |
text-align:center; |
|
|
80 |
border:1px solid #000000; |
|
|
81 |
background-color:#004C6D; |
|
|
82 |
color:#fff; |
|
|
83 |
padding:2px; |
|
|
84 |
} |
|
|
85 |
|
|
|
86 |
.yui-alignable-hidden { |
|
|
87 |
visibility:hidden; |
|
|
88 |
} |
|
|
89 |
|
|
|
90 |
|
|
|
91 |
/* Example Layout CSS */ |
|
|
92 |
.widget-build-example { |
|
|
93 |
border:1px solid #000; |
|
|
94 |
background-color:#eee; |
|
|
95 |
padding:5px; |
|
|
96 |
margin:10px 0; |
|
|
97 |
} |
|
|
98 |
|
|
|
99 |
.widget-build-example button, .widget-build-example label, .widget-build-example select, .widget-build-example input { |
|
|
100 |
margin-right:5px; |
|
|
101 |
} |
|
|
102 |
|
|
|
103 |
.widget-build-example button.fail { |
|
|
104 |
color:#cc0000; |
|
|
105 |
margin-left:10px; |
|
|
106 |
} |
|
|
107 |
|
|
|
108 |
.widget-build-example .filler { |
|
|
109 |
color:#999; |
|
|
110 |
} |
|
|
111 |
|
|
|
112 |
#x, #y { |
|
|
113 |
width:3em; |
|
|
114 |
} |
|
|
115 |
|
|
|
116 |
#widget2-example, #widget3-example { |
|
|
117 |
height:15em; |
|
|
118 |
} |
|
|
119 |
|
|
|
120 |
#widget2-example select, #widget3-example select { |
|
|
121 |
width:100%; |
|
|
122 |
} |
|
|
123 |
|
|
|
124 |
#alignment p { |
|
|
125 |
color:#dddd00; |
|
|
126 |
} |
|
|
127 |
</style> |
|
|
128 |
</head> |
|
|
129 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
130 |
<div id="custom-doc" class="yui-t2"> |
|
|
131 |
<div id="hd"> |
|
|
132 |
<div id="ygunav"> |
|
|
133 |
<p> |
|
|
134 |
<em> |
|
|
135 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
136 |
</em> |
|
|
137 |
</p> |
|
|
138 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
139 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
140 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
141 |
<div id="sitesearch"> |
|
|
142 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
143 |
<input type="text" id="searchinput" name="p"> |
|
|
144 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
145 |
</div> |
|
|
146 |
</form> |
|
|
147 |
</div> |
|
|
148 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
149 |
<div id="pagetitle"><h1>YUI Library Examples: Widget: Creating custom widget classes</h1></div> |
|
|
150 |
</div> |
|
|
151 |
<div id="bd"> |
|
|
152 |
|
|
|
153 |
|
|
|
154 |
<div id="yui-main"> |
|
|
155 |
<div class="yui-b"> |
|
|
156 |
<div class="yui-ge"> |
|
|
157 |
<div class="yui-u first example" id="main"> |
|
|
158 |
|
|
|
159 |
<h2>Widget: Creating custom widget classes</h2> |
|
|
160 |
|
|
|
161 |
<div id="example" class="promo"> |
|
|
162 |
<div class="example-intro"> |
|
|
163 |
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>. |
|
|
164 |
</div> |
|
|
165 |
|
|
|
166 |
<div class="module example-container "> |
|
|
167 |
<div class="hd exampleHd"> |
|
|
168 |
<p class="newWindowButton yui-skin-sam"> |
|
|
169 |
<a href="widget-build_clean.html" target="_blank">View example in new window.</a> |
|
|
170 |
</p> |
|
|
171 |
</div> <div id="example-canvas" class="bd"> |
|
|
172 |
|
|
|
173 |
|
|
|
174 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
175 |
|
|
|
176 |
|
|
|
177 |
<ol> |
|
|
178 |
<li><code>Widget</code> with <code>WidgetStdMod</code> |
|
|
179 |
|
|
|
180 |
<div class="widget-build-example" id="widget1-example"> |
|
|
181 |
<input type="text" id="content" value=""> |
|
|
182 |
<select id="section"> |
|
|
183 |
<option value="header">Header</option> |
|
|
184 |
<option value="body">Body</option> |
|
|
185 |
<option value="footer">Footer</option> |
|
|
186 |
</select> |
|
|
187 |
<button type="button" id="setContent">Set Content</button> |
|
|
188 |
<button type="button" class="fail" id="tryMove">move() (should fail)</button> |
|
|
189 |
|
|
|
190 |
<div id="widget1"> |
|
|
191 |
<div class="yui-widget-hd">Module Header</div> |
|
|
192 |
<div class="yui-widget-bd">Module Body</div> |
|
|
193 |
<div class="yui-widget-ft">Module Footer</div> |
|
|
194 |
</div> |
|
|
195 |
|
|
|
196 |
<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> |
|
|
197 |
</div> |
|
|
198 |
</li> |
|
|
199 |
|
|
|
200 |
<li><code>Widget</code> with <code>WidgetPosition, WidgetStack</code> |
|
|
201 |
|
|
|
202 |
<div class="widget-build-example" id="widget2-example"> |
|
|
203 |
<label>X: <input type="text" id="x" value="0" ></label> |
|
|
204 |
<label>Y: <input type="text" id="y" value="0" ></label> |
|
|
205 |
<button type="button" id="move">Move</button> |
|
|
206 |
<button type="button" class="fail" id="tryContent">setStdModContent() (should fail)</button> |
|
|
207 |
|
|
|
208 |
<div id="widget2"><strong>Positionable Widget</strong></div> |
|
|
209 |
|
|
|
210 |
<p class="filler"> |
|
|
211 |
<select> |
|
|
212 |
<option>Prevent IE6 Bleedthrough</option> |
|
|
213 |
</select> |
|
|
214 |
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. |
|
|
215 |
</p> |
|
|
216 |
</div> |
|
|
217 |
</li> |
|
|
218 |
|
|
|
219 |
<li><code>Widget</code> with <code>WidgetPosition, WidgetStack, WidgetPositionExt</code></strong> |
|
|
220 |
|
|
|
221 |
<div class="widget-build-example" id="widget3-example"> |
|
|
222 |
<button type="button" id="run">Run Through Alignment</button> |
|
|
223 |
<p class="filler"> |
|
|
224 |
<select> |
|
|
225 |
<option>Prevent IE6 Bleedthrough</option> |
|
|
226 |
</select> |
|
|
227 |
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. |
|
|
228 |
</p> |
|
|
229 |
</div> |
|
|
230 |
</li> |
|
|
231 |
</ol> |
|
|
232 |
|
|
|
233 |
|
|
|
234 |
<script type="text/javascript"> |
|
|
235 |
YUI({base:"../../build/", timeout: 10000}).use("widget", "widget-position", "widget-stack", "widget-position-ext", "widget-stdmod", "async-queue", function(Y) { |
|
|
236 |
|
|
|
237 |
|
|
|
238 |
|
|
|
239 |
// WIDGET 1 : Build Widget with StdMod, but no positioning/stacking support. |
|
|
240 |
|
|
|
241 |
var StandardModule = Y.Base.build("standardModule", Y.Widget, [Y.WidgetStdMod]); |
|
|
242 |
|
|
|
243 |
var stdmod = new StandardModule({ |
|
|
244 |
contentBox: "#widget1", |
|
|
245 |
width:"12em", |
|
|
246 |
height:"12em" |
|
|
247 |
}); |
|
|
248 |
stdmod.render(); |
|
|
249 |
|
|
|
250 |
var contentInput = Y.one("#content"); |
|
|
251 |
var sectionInput = Y.one("#section"); |
|
|
252 |
|
|
|
253 |
Y.on("click", function(e) { |
|
|
254 |
var content = contentInput.get("value"); |
|
|
255 |
var section = sectionInput.get("value"); |
|
|
256 |
|
|
|
257 |
stdmod.setStdModContent(section, content); |
|
|
258 |
|
|
|
259 |
}, "#setContent"); |
|
|
260 |
|
|
|
261 |
Y.on("click", function(e) { |
|
|
262 |
try { |
|
|
263 |
stdmod.move([0,0]); |
|
|
264 |
} catch (e) { |
|
|
265 |
alert("move() is " + typeof stdmod.move + ", stdmod.hasImpl(Y.WidgetPosition) : " + stdmod.hasImpl(Y.WidgetPosition)); |
|
|
266 |
} |
|
|
267 |
}, "#tryMove"); |
|
|
268 |
|
|
|
269 |
|
|
|
270 |
|
|
|
271 |
// WIDGET 2: Build Widget with Position support and Stack support, but no StdMod support or Position Extras support. |
|
|
272 |
|
|
|
273 |
var Positionable = Y.Base.build("positionable", Y.Widget, [Y.WidgetPosition, Y.WidgetStack]); |
|
|
274 |
|
|
|
275 |
var positionable = new Positionable({ |
|
|
276 |
contentBox: "#widget2", |
|
|
277 |
width:"10em", |
|
|
278 |
zIndex:1 |
|
|
279 |
}); |
|
|
280 |
positionable.render("#widget2-example"); |
|
|
281 |
|
|
|
282 |
var xy = Y.one("#widget2-example > p").getXY(); |
|
|
283 |
|
|
|
284 |
positionable.move(xy[0], xy[1]); |
|
|
285 |
|
|
|
286 |
var xInput = Y.one("#x"); |
|
|
287 |
var yInput = Y.one("#y"); |
|
|
288 |
|
|
|
289 |
xInput.set("value", Math.round(xy[0])); |
|
|
290 |
yInput.set("value", Math.round(xy[1])); |
|
|
291 |
|
|
|
292 |
Y.on("click", function(e) { |
|
|
293 |
var x = parseInt(xInput.get("value")); |
|
|
294 |
var y = parseInt(yInput.get("value")); |
|
|
295 |
|
|
|
296 |
positionable.move(x,y); |
|
|
297 |
|
|
|
298 |
}, "#move"); |
|
|
299 |
|
|
|
300 |
Y.on("click", function(e) { |
|
|
301 |
try { |
|
|
302 |
positionable.setStdModContent("header", "new content"); |
|
|
303 |
} catch (e) { |
|
|
304 |
alert("setStdModContent() is " + typeof positionable.setStdModContent + ", positionable.hasImpl(Y.WidgetStdMod) : " + positionable.hasImpl(Y.WidgetStdMod)); |
|
|
305 |
} |
|
|
306 |
}, "#tryContent"); |
|
|
307 |
|
|
|
308 |
|
|
|
309 |
|
|
|
310 |
// WIDGET 3: Build Widget with Position, PositionExt and Stack support, but no StdMod support. |
|
|
311 |
|
|
|
312 |
var Alignable = Y.Base.build("alignable", Y.Widget, [Y.WidgetPosition, Y.WidgetPositionExt, Y.WidgetStack]); |
|
|
313 |
|
|
|
314 |
var alignable = new Alignable({ |
|
|
315 |
width:"13em", |
|
|
316 |
align : { |
|
|
317 |
node: "#widget3-example", |
|
|
318 |
points: ["cc", "cc"] |
|
|
319 |
}, |
|
|
320 |
zIndex:1 |
|
|
321 |
}); |
|
|
322 |
alignable.get("contentBox").set("innerHTML", '<strong>Alignable Widget</strong><div id="alignment"><p>#widget3-example</p><p>[center, center]</p></div>'); |
|
|
323 |
alignable.render("#widget3-example"); |
|
|
324 |
|
|
|
325 |
Y.on('click', function() { |
|
|
326 |
var stepDelay = 2500; |
|
|
327 |
var currAlignment = Y.one("#alignment"); |
|
|
328 |
var steps = [ |
|
|
329 |
function() { |
|
|
330 |
alignable.set("align", {node:"#widget3-example", points:["lc", "rc"]}); |
|
|
331 |
currAlignment.set("innerHTML", "<p>#widget3-example</p><p>[left-center, right-center]</p>"); |
|
|
332 |
}, |
|
|
333 |
function() { |
|
|
334 |
alignable.set("align", {node:"#widget3-example", points:["tr", "br"]}); |
|
|
335 |
currAlignment.set("innerHTML", "<p>#widget3-example</p><p>[top-right, bottom-right]</p>"); |
|
|
336 |
}, |
|
|
337 |
function() { |
|
|
338 |
alignable.set("centered", "#widget3-example"); |
|
|
339 |
currAlignment.set("innerHTML", "<p>#widget3-example</p><p>centered</p>"); |
|
|
340 |
}, |
|
|
341 |
function() { |
|
|
342 |
alignable.set("align", {points:["rc", "rc"]}); |
|
|
343 |
currAlignment.set("innerHTML", "<p>viewport</p><p>[right-center, right-center]</p>"); |
|
|
344 |
}, |
|
|
345 |
function() { |
|
|
346 |
alignable.set("centered", true); |
|
|
347 |
currAlignment.set("innerHTML", "<p>viewport</p><p>centered</p>"); |
|
|
348 |
}, |
|
|
349 |
function() { |
|
|
350 |
alignable.set("align", {node:"#widget3-example", points:["cc", "cc"]}); |
|
|
351 |
currAlignment.set("innerHTML", "<p>#widget3-example</p><p>[center, center]</p>"); |
|
|
352 |
} |
|
|
353 |
]; |
|
|
354 |
|
|
|
355 |
var q = new Y.AsyncQueue(); |
|
|
356 |
for (var i = 0; i < steps.length; i++){ |
|
|
357 |
q.add({ |
|
|
358 |
timeout: (i === 0) ? 0 : stepDelay, |
|
|
359 |
fn:steps[i] |
|
|
360 |
}); |
|
|
361 |
} |
|
|
362 |
q.run(); |
|
|
363 |
|
|
|
364 |
}, "#run"); |
|
|
365 |
|
|
|
366 |
}); |
|
|
367 |
</script> |
|
|
368 |
|
|
|
369 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
370 |
|
|
|
371 |
|
|
|
372 |
</div> |
|
|
373 |
</div> |
|
|
374 |
</div> |
|
|
375 |
|
|
|
376 |
<h3>Creating Custom Widget Classes</h3> |
|
|
377 |
|
|
|
378 |
<p>The <code>Base</code> class provides a <code>build</code> method which can be used to create custom versions of classes which derive from <code>Base</code> by adding extension classes to them.</p> |
|
|
379 |
|
|
|
380 |
<p>Widget currently ships with four such extensions: <code>WidgetPosition</code>, <code>WidgetStack</code>, <code>WidgetPositionExt</code> and <code>WidgetStdMod</code>. |
|
|
381 |
These extensions are used to build the basic <code>Overlay</code> widget, but can also be used individually, to create custom versions of the base <code>Widget</code> class.</p> |
|
|
382 |
|
|
|
383 |
<h3>Widget with WidgetStdMod support</h3> |
|
|
384 |
|
|
|
385 |
<p>Adding the <code>WidgetStdMod</code> extension to Widget, creates a statically positioned Widget, with support for standard module format sections - header, body and footer, which maybe useful in portal type use cases, where the positioning/stacking capabilities which come bundled with Overlay are not required.</p> |
|
|
386 |
|
|
|
387 |
<p>To create a custom class, we use <a href="../../api/Base.html#method_Base.build"><code>Base.build</code></a>, which is described in detail on the documention page for <a href="http://developer.yahoo.com/yui/3/base/#extensions">Base</a>.</p> |
|
|
388 |
|
|
|
389 |
<p>We pass in <code>Widget</code> as the main class we want to add extensions to, and <code>WidgetStdMod</code> as the extension we'd like added to the main class:</p> |
|
|
390 |
|
|
|
391 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> StandardModule <span class="sy0">=</span> Y.<span class="me1">Base</span>.<span class="me1">build</span><span class="br0">(</span><span class="st0">"standardModule"</span><span class="sy0">,</span> Y.<span class="me1">Widget</span><span class="sy0">,</span> <span class="br0">[</span>Y.<span class="me1">WidgetStdMod</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Render from Markup</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> stdmod <span class="sy0">=</span> <span class="kw2">new</span> StandardModule<span class="br0">(</span><span class="br0">{</span></div></li><li class="li2"><div class="de2"> contentBox<span class="sy0">:</span> <span class="st0">"#widget1"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> width<span class="sy0">:</span><span class="st0">"12em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> height<span class="sy0">:</span><span class="st0">"12em"</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">stdmod.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> StandardModule <span class="sy0">=</span> Y.<span class="me1">Base</span>.<span class="me1">build</span><span class="br0">(</span><span class="st0">"standardModule"</span><span class="sy0">,</span> Y.<span class="me1">Widget</span><span class="sy0">,</span> <span class="br0">[</span>Y.<span class="me1">WidgetStdMod</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
392 |
|
|
|
393 |
<span class="co1">// Render from Markup</span> |
|
|
394 |
<span class="kw2">var</span> stdmod <span class="sy0">=</span> <span class="kw2">new</span> StandardModule<span class="br0">(</span><span class="br0">{</span> |
|
|
395 |
contentBox<span class="sy0">:</span> <span class="st0">"#widget1"</span><span class="sy0">,</span> |
|
|
396 |
width<span class="sy0">:</span><span class="st0">"12em"</span><span class="sy0">,</span> |
|
|
397 |
height<span class="sy0">:</span><span class="st0">"12em"</span> |
|
|
398 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
399 |
stdmod.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">var StandardModule = Y.Base.build("standardModule", Y.Widget, [Y.WidgetStdMod]); |
|
|
400 |
|
|
|
401 |
// Render from Markup |
|
|
402 |
var stdmod = new StandardModule({ |
|
|
403 |
contentBox: "#widget1", |
|
|
404 |
width:"12em", |
|
|
405 |
height:"12em" |
|
|
406 |
}); |
|
|
407 |
stdmod.render();</textarea></div> |
|
|
408 |
<p><code>Base.build</code> will:</p> |
|
|
409 |
<ol> |
|
|
410 |
<li>Create a new class which extends <code>Widget</code></li> |
|
|
411 |
<li>Aggregate known <code>Base</code> and <code>Widget</code> fields, such as <code>ATTRS</code> and <code>HTML_PARSER</code> from <code>WidgetStdMod</code> on the new class</li> |
|
|
412 |
<li>Augment prototype methods from <code>WidgetStdMod</code> onto the new class prototype</li> |
|
|
413 |
</ol> |
|
|
414 |
|
|
|
415 |
<p>The first argument to build is the <code>NAME</code> of the new class we are creating, just like the <code>NAME</code> we define when extending the Widget class directly.</p> |
|
|
416 |
|
|
|
417 |
<p>Note that the <code>Widget</code> class is unchanged, allowing you to still create <code>Widget</code> instances without any standard module support, along with <code>StandardModule</code> instances which have standard module support.</p> |
|
|
418 |
|
|
|
419 |
<h4>Testing It Out</h4> |
|
|
420 |
|
|
|
421 |
<p>The example attempts to set content on an instance of the newly created <code>StandardModule</code> class, using the <code>setStdModContent</code> method which is added by the extension (which would otherwise not exist on the Widget instance).</p> |
|
|
422 |
|
|
|
423 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> contentInput <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#content"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> sectionInput <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#section"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// This should work, since the StandardModule widget has settable </span></div></li><li class="li2"><div class="de2"><span class="co1">// header/body/footer sections</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> content <span class="sy0">=</span> contentInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> section <span class="sy0">=</span> sectionInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> stdmod.<span class="me1">setStdModContent</span><span class="br0">(</span>section<span class="sy0">,</span> content<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#setContent"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> contentInput <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#content"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
424 |
<span class="kw2">var</span> sectionInput <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#section"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
425 |
|
|
|
426 |
<span class="co1">// This should work, since the StandardModule widget has settable </span> |
|
|
427 |
<span class="co1">// header/body/footer sections</span> |
|
|
428 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
429 |
|
|
|
430 |
<span class="kw2">var</span> content <span class="sy0">=</span> contentInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
431 |
<span class="kw2">var</span> section <span class="sy0">=</span> sectionInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
432 |
|
|
|
433 |
stdmod.<span class="me1">setStdModContent</span><span class="br0">(</span>section<span class="sy0">,</span> content<span class="br0">)</span><span class="sy0">;</span> |
|
|
434 |
|
|
|
435 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#setContent"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">var contentInput = Y.one("#content"); |
|
|
436 |
var sectionInput = Y.one("#section"); |
|
|
437 |
|
|
|
438 |
// This should work, since the StandardModule widget has settable |
|
|
439 |
// header/body/footer sections |
|
|
440 |
Y.on("click", function(e) { |
|
|
441 |
|
|
|
442 |
var content = contentInput.get("value"); |
|
|
443 |
var section = sectionInput.get("value"); |
|
|
444 |
|
|
|
445 |
stdmod.setStdModContent(section, content); |
|
|
446 |
|
|
|
447 |
}, "#setContent");</textarea></div> |
|
|
448 |
<p>To verify that no unrequested features are added, we also attempt to move the instance using the <code>move</code> method, which is not part of the base Widget class, and would be added by the <code>WidgetPosition</code> extension. This verifies that the other example classes we'll create, which do create new classes which use <code>WidgetPosition</code>, have not modified the base Widget class.</p> |
|
|
449 |
|
|
|
450 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// This shoud fail, since the StandardModule widget is not positionable</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">try</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> stdmod.<span class="me1">move</span><span class="br0">(</span><span class="br0">[</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span> <span class="kw1">catch</span> <span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">"move() is "</span> <span class="sy0">+</span> <span class="kw1">typeof</span> stdmod.<span class="me1">move</span> <span class="sy0">+</span> <span class="st0">", stdmod.hasImpl(Y.WidgetPosition) : "</span></div></li><li class="li1"><div class="de1"> <span class="sy0">+</span> stdmod.<span class="me1">hasImpl</span><span class="br0">(</span>Y.<span class="me1">WidgetPosition</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#tryMove"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// This shoud fail, since the StandardModule widget is not positionable</span> |
|
|
451 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
452 |
<span class="kw1">try</span> <span class="br0">{</span> |
|
|
453 |
stdmod.<span class="me1">move</span><span class="br0">(</span><span class="br0">[</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
454 |
<span class="br0">}</span> <span class="kw1">catch</span> <span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
455 |
<span class="kw3">alert</span><span class="br0">(</span><span class="st0">"move() is "</span> <span class="sy0">+</span> <span class="kw1">typeof</span> stdmod.<span class="me1">move</span> <span class="sy0">+</span> <span class="st0">", stdmod.hasImpl(Y.WidgetPosition) : "</span> |
|
|
456 |
<span class="sy0">+</span> stdmod.<span class="me1">hasImpl</span><span class="br0">(</span>Y.<span class="me1">WidgetPosition</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
457 |
<span class="br0">}</span> |
|
|
458 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#tryMove"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">// This shoud fail, since the StandardModule widget is not positionable |
|
|
459 |
Y.on("click", function(e) { |
|
|
460 |
try { |
|
|
461 |
stdmod.move([0,0]); |
|
|
462 |
} catch (e) { |
|
|
463 |
alert("move() is " + typeof stdmod.move + ", stdmod.hasImpl(Y.WidgetPosition) : " |
|
|
464 |
+ stdmod.hasImpl(Y.WidgetPosition)); |
|
|
465 |
} |
|
|
466 |
}, "#tryMove");</textarea></div> |
|
|
467 |
<p>Note that <code>Base.build</code> adds a <code>hasImpl</code> method to the built class, which allows you to query whether or not it has a particular extension applied.</p> |
|
|
468 |
|
|
|
469 |
<h4>CSS Considerations</h4> |
|
|
470 |
|
|
|
471 |
<p>We need to define the CSS which goes with this new <code>StandardModule</code> class we have created. The only rule really required out of the box is the rule which handles visibility (<code>yui-standardmodule-hidden</code>). The "standardmodule" used in the class name comes from the <code>NAME</code> property we set up for the new class, and is used to prefix all state related classes added to the widgets bounding box. |
|
|
472 |
Since the <code>StandardModule</code> class is not positionable, we use <code>display:none</code> to define the <code>hidden</code> state.</p> |
|
|
473 |
|
|
|
474 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/* Visibility - How to handle visibility for this new widget */</span></div></li><li class="li1"><div class="de1"><span class="re1">.yui-standardmodule-hidden</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">display</span><span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"> |
|
|
475 |
<span class="coMULTI">/* Visibility - How to handle visibility for this new widget */</span> |
|
|
476 |
<span class="re1">.yui-standardmodule-hidden</span> <span class="br0">{</span> |
|
|
477 |
<span class="kw1">display</span><span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span> |
|
|
478 |
<span class="br0">}</span></pre></div><textarea id="syntax4-plain"> |
|
|
479 |
/* Visibility - How to handle visibility for this new widget */ |
|
|
480 |
.yui-standardmodule-hidden { |
|
|
481 |
display:none; |
|
|
482 |
}</textarea></div> |
|
|
483 |
<p>The other "yui-standardmodule" rules are only used to create the required look/feel for this particular example, and do not impact the StandardModule widget's functionality.</p> |
|
|
484 |
|
|
|
485 |
<h3>Widget with WidgetPosition and WidgetStack support</h3> |
|
|
486 |
|
|
|
487 |
<p>As with <code>StandardModule</code>, we use <code>Base.build</code> to create the new <code>Positionable</code> widget class. This time we add <code>WidgetPosition</code> and <code>WidgetStack</code> support to the base <code>Widget</code> class to create a basic XY positionable widget, with shimming and z-index support.</p> |
|
|
488 |
|
|
|
489 |
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> Positionable <span class="sy0">=</span> Y.<span class="me1">Base</span>.<span class="me1">build</span><span class="br0">(</span><span class="st0">"positionable"</span><span class="sy0">,</span> Y.<span class="me1">Widget</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1"> <span class="br0">[</span>Y.<span class="me1">WidgetPosition</span><span class="sy0">,</span> Y.<span class="me1">WidgetStack</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Render from markup</span></div></li><li class="li2"><div class="de2"><span class="kw2">var</span> positionable <span class="sy0">=</span> <span class="kw2">new</span> Positionable<span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> contentBox<span class="sy0">:</span> <span class="st0">"#widget2"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> width<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> height<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> zIndex<span class="sy0">:</span><span class="nu0">1</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">positionable.<span class="me1">render</span><span class="br0">(</span><span class="st0">"#widget2-example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">var</span> xy <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#widget2-example > p"</span><span class="br0">)</span>.<span class="me1">getXY</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2">positionable.<span class="me1">move</span><span class="br0">(</span>xy<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="sy0">,</span> xy<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> Positionable <span class="sy0">=</span> Y.<span class="me1">Base</span>.<span class="me1">build</span><span class="br0">(</span><span class="st0">"positionable"</span><span class="sy0">,</span> Y.<span class="me1">Widget</span><span class="sy0">,</span> |
|
|
490 |
<span class="br0">[</span>Y.<span class="me1">WidgetPosition</span><span class="sy0">,</span> Y.<span class="me1">WidgetStack</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
491 |
|
|
|
492 |
<span class="co1">// Render from markup</span> |
|
|
493 |
<span class="kw2">var</span> positionable <span class="sy0">=</span> <span class="kw2">new</span> Positionable<span class="br0">(</span><span class="br0">{</span> |
|
|
494 |
contentBox<span class="sy0">:</span> <span class="st0">"#widget2"</span><span class="sy0">,</span> |
|
|
495 |
width<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span> |
|
|
496 |
height<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span> |
|
|
497 |
zIndex<span class="sy0">:</span><span class="nu0">1</span> |
|
|
498 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
499 |
positionable.<span class="me1">render</span><span class="br0">(</span><span class="st0">"#widget2-example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
500 |
|
|
|
501 |
<span class="kw2">var</span> xy <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#widget2-example > p"</span><span class="br0">)</span>.<span class="me1">getXY</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
502 |
|
|
|
503 |
positionable.<span class="me1">move</span><span class="br0">(</span>xy<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="sy0">,</span> xy<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax5-plain">var Positionable = Y.Base.build("positionable", Y.Widget, |
|
|
504 |
[Y.WidgetPosition, Y.WidgetStack]); |
|
|
505 |
|
|
|
506 |
// Render from markup |
|
|
507 |
var positionable = new Positionable({ |
|
|
508 |
contentBox: "#widget2", |
|
|
509 |
width:"10em", |
|
|
510 |
height:"10em", |
|
|
511 |
zIndex:1 |
|
|
512 |
}); |
|
|
513 |
positionable.render("#widget2-example"); |
|
|
514 |
|
|
|
515 |
var xy = Y.one("#widget2-example > p").getXY(); |
|
|
516 |
|
|
|
517 |
positionable.move(xy[0], xy[1]);</textarea></div> |
|
|
518 |
<p>We <strong>don't</strong> add <code>WidgetPositionExt</code> or <code>WidgetStdMod</code> support, so the widget doesn't have extended positioning support (align, center) or standard module support. Hence we position it manually using the <code>move</code> method which the <code>WidgetPosition</code> extension provides.</p> |
|
|
519 |
|
|
|
520 |
<h4>Testing It Out</h4> |
|
|
521 |
|
|
|
522 |
<p>We should now be able to invoke the <code>move</code> method on an instance of the newly created <code>Positionable</code> class:</p> |
|
|
523 |
|
|
|
524 |
<div id="syntax6" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// This should work, since Positionable has basic XY Positioning support</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> x <span class="sy0">=</span> parseInt<span class="br0">(</span>xInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> y <span class="sy0">=</span> parseInt<span class="br0">(</span>yInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> positionable.<span class="me1">move</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#move"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// This should work, since Positionable has basic XY Positioning support</span> |
|
|
525 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
526 |
<span class="kw2">var</span> x <span class="sy0">=</span> parseInt<span class="br0">(</span>xInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
527 |
<span class="kw2">var</span> y <span class="sy0">=</span> parseInt<span class="br0">(</span>yInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
528 |
|
|
|
529 |
positionable.<span class="me1">move</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span> |
|
|
530 |
|
|
|
531 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#move"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax6-plain">// This should work, since Positionable has basic XY Positioning support |
|
|
532 |
Y.on("click", function(e) { |
|
|
533 |
var x = parseInt(xInput.get("value")); |
|
|
534 |
var y = parseInt(yInput.get("value")); |
|
|
535 |
|
|
|
536 |
positionable.move(x,y); |
|
|
537 |
|
|
|
538 |
}, "#move");</textarea></div> |
|
|
539 |
<p>And, as with the <code>StandardModule</code> class, we should not be allowed to invoke any methods from an extension which we didn't request:</p> |
|
|
540 |
|
|
|
541 |
<div id="syntax7" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// This should fail, since Positionable does not have Standard Module sections</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">try</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> positionable.<span class="me1">setStdModContent</span><span class="br0">(</span><span class="st0">"header"</span><span class="sy0">,</span> <span class="st0">"new content"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span> <span class="kw1">catch</span> <span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">"setStdModContent() is "</span> <span class="sy0">+</span> <span class="kw1">typeof</span> positionable.<span class="me1">setStdModContent</span> <span class="sy0">+</span> </div></li><li class="li1"><div class="de1"> <span class="st0">", positionable.hasImpl(Y.WidgetStdMod) : "</span> <span class="sy0">+</span> positionable.<span class="me1">hasImpl</span><span class="br0">(</span>Y.<span class="me1">WidgetStdMod</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#tryContent"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// This should fail, since Positionable does not have Standard Module sections</span> |
|
|
542 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
543 |
<span class="kw1">try</span> <span class="br0">{</span> |
|
|
544 |
positionable.<span class="me1">setStdModContent</span><span class="br0">(</span><span class="st0">"header"</span><span class="sy0">,</span> <span class="st0">"new content"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
545 |
<span class="br0">}</span> <span class="kw1">catch</span> <span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
546 |
<span class="kw3">alert</span><span class="br0">(</span><span class="st0">"setStdModContent() is "</span> <span class="sy0">+</span> <span class="kw1">typeof</span> positionable.<span class="me1">setStdModContent</span> <span class="sy0">+</span> |
|
|
547 |
<span class="st0">", positionable.hasImpl(Y.WidgetStdMod) : "</span> <span class="sy0">+</span> positionable.<span class="me1">hasImpl</span><span class="br0">(</span>Y.<span class="me1">WidgetStdMod</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
548 |
<span class="br0">}</span> |
|
|
549 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#tryContent"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax7-plain">// This should fail, since Positionable does not have Standard Module sections |
|
|
550 |
Y.on("click", function(e) { |
|
|
551 |
try { |
|
|
552 |
positionable.setStdModContent("header", "new content"); |
|
|
553 |
} catch (e) { |
|
|
554 |
alert("setStdModContent() is " + typeof positionable.setStdModContent + |
|
|
555 |
", positionable.hasImpl(Y.WidgetStdMod) : " + positionable.hasImpl(Y.WidgetStdMod)); |
|
|
556 |
} |
|
|
557 |
}, "#tryContent");</textarea></div> |
|
|
558 |
<h4>CSS Considerations</h4> |
|
|
559 |
|
|
|
560 |
<p>Since now we have a positionable widget, with z-index support, we set the widget to be absolutely positioned by default, and control it's hidden state using <code>visibility</code> as opposed to <code>display</code></p> |
|
|
561 |
|
|
|
562 |
<div id="syntax8" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Define absolute positioning as the default for positionable widgets */</span></div></li><li class="li1"><div class="de1"><span class="re1">.yui-positionable</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">position</span><span class="sy0">:</span><span class="kw2">absolute</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> In order to be able to position the widget when hidden, we define hidden</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> to use visibility, as opposed to display</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">*/</span></div></li><li class="li2"><div class="de2"><span class="re1">.yui-positionable-hidden</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">visibility</span><span class="sy0">:</span><span class="kw2">hidden</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/* Define absolute positioning as the default for positionable widgets */</span> |
|
|
563 |
<span class="re1">.yui-positionable</span> <span class="br0">{</span> |
|
|
564 |
<span class="kw1">position</span><span class="sy0">:</span><span class="kw2">absolute</span><span class="sy0">;</span> |
|
|
565 |
<span class="br0">}</span> |
|
|
566 |
|
|
|
567 |
<span class="coMULTI">/* |
|
|
568 |
In order to be able to position the widget when hidden, we define hidden |
|
|
569 |
to use visibility, as opposed to display |
|
|
570 |
*/</span> |
|
|
571 |
<span class="re1">.yui-positionable-hidden</span> <span class="br0">{</span> |
|
|
572 |
<span class="kw1">visibility</span><span class="sy0">:</span><span class="kw2">hidden</span><span class="sy0">;</span> |
|
|
573 |
<span class="br0">}</span></pre></div><textarea id="syntax8-plain">/* Define absolute positioning as the default for positionable widgets */ |
|
|
574 |
.yui-positionable { |
|
|
575 |
position:absolute; |
|
|
576 |
} |
|
|
577 |
|
|
|
578 |
/* |
|
|
579 |
In order to be able to position the widget when hidden, we define hidden |
|
|
580 |
to use visibility, as opposed to display |
|
|
581 |
*/ |
|
|
582 |
.yui-positionable-hidden { |
|
|
583 |
visibility:hidden; |
|
|
584 |
}</textarea></div> |
|
|
585 |
<h3>Widget with WidgetPosition, WidgetStack and WidgetPositionExt support</h3> |
|
|
586 |
|
|
|
587 |
<p>Lastly, we'll attempt to create a new widget class, which, in addition to basic positioning and stacking support, also has extended positioning support, allowing us to align it with other elements on the page.</p> |
|
|
588 |
|
|
|
589 |
<p>Again, we use <code>Base.build</code> to create our new <code>Alignable</code> widget class, by combining <code>WidgetPosition</code>, <code>WidgetStack</code> and <code>WidgetPositionExt</code> with the base widget class:</p> |
|
|
590 |
|
|
|
591 |
<div id="syntax9" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> Alignable <span class="sy0">=</span> Y.<span class="me1">Base</span>.<span class="me1">build</span><span class="br0">(</span><span class="st0">"alignable"</span><span class="sy0">,</span> Y.<span class="me1">Widget</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1"> <span class="br0">[</span>Y.<span class="me1">WidgetPosition</span><span class="sy0">,</span> Y.<span class="me1">WidgetPositionExt</span><span class="sy0">,</span> Y.<span class="me1">WidgetStack</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">var</span> alignable <span class="sy0">=</span> <span class="kw2">new</span> Alignable<span class="br0">(</span><span class="br0">{</span></div></li><li class="li2"><div class="de2"> width<span class="sy0">:</span><span class="st0">"13em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> align <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> <span class="st0">"#widget3-example"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> points<span class="sy0">:</span> <span class="br0">[</span><span class="st0">"cc"</span><span class="sy0">,</span> <span class="st0">"cc"</span><span class="br0">]</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> zIndex<span class="sy0">:</span><span class="nu0">1</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">alignable.<span class="me1">get</span><span class="br0">(</span><span class="st0">"contentBox"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1"> <span class="st0">'<strong>Alignable Widget</strong><div id="alignment"><p>#widget3-example</p> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> <p>[center, center]</p></div>'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">alignable.<span class="me1">render</span><span class="br0">(</span><span class="st0">"#widget3-example"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> Alignable <span class="sy0">=</span> Y.<span class="me1">Base</span>.<span class="me1">build</span><span class="br0">(</span><span class="st0">"alignable"</span><span class="sy0">,</span> Y.<span class="me1">Widget</span><span class="sy0">,</span> |
|
|
592 |
<span class="br0">[</span>Y.<span class="me1">WidgetPosition</span><span class="sy0">,</span> Y.<span class="me1">WidgetPositionExt</span><span class="sy0">,</span> Y.<span class="me1">WidgetStack</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
593 |
|
|
|
594 |
<span class="kw2">var</span> alignable <span class="sy0">=</span> <span class="kw2">new</span> Alignable<span class="br0">(</span><span class="br0">{</span> |
|
|
595 |
width<span class="sy0">:</span><span class="st0">"13em"</span><span class="sy0">,</span> |
|
|
596 |
align <span class="sy0">:</span> <span class="br0">{</span> |
|
|
597 |
node<span class="sy0">:</span> <span class="st0">"#widget3-example"</span><span class="sy0">,</span> |
|
|
598 |
points<span class="sy0">:</span> <span class="br0">[</span><span class="st0">"cc"</span><span class="sy0">,</span> <span class="st0">"cc"</span><span class="br0">]</span> |
|
|
599 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
600 |
zIndex<span class="sy0">:</span><span class="nu0">1</span> |
|
|
601 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
602 |
alignable.<span class="me1">get</span><span class="br0">(</span><span class="st0">"contentBox"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> |
|
|
603 |
<span class="st0">'<strong>Alignable Widget</strong><div id="alignment"><p>#widget3-example</p> <span class="es0">\</span> |
|
|
604 |
<p>[center, center]</p></div>'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
605 |
alignable.<span class="me1">render</span><span class="br0">(</span><span class="st0">"#widget3-example"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax9-plain">var Alignable = Y.Base.build("alignable", Y.Widget, |
|
|
606 |
[Y.WidgetPosition, Y.WidgetPositionExt, Y.WidgetStack]); |
|
|
607 |
|
|
|
608 |
var alignable = new Alignable({ |
|
|
609 |
width:"13em", |
|
|
610 |
align : { |
|
|
611 |
node: "#widget3-example", |
|
|
612 |
points: ["cc", "cc"] |
|
|
613 |
}, |
|
|
614 |
zIndex:1 |
|
|
615 |
}); |
|
|
616 |
alignable.get("contentBox").set("innerHTML", |
|
|
617 |
'<strong>Alignable Widget</strong><div id="alignment"><p>#widget3-example</p> \ |
|
|
618 |
<p>[center, center]</p></div>'); |
|
|
619 |
alignable.render("#widget3-example");</textarea></div> |
|
|
620 |
<h4>Testing It Out</h4> |
|
|
621 |
|
|
|
622 |
<p>We'll attempt to align an instance of the <code>Alignable</code> class, using some of the additional attributes which <code>WidgetPositionExt</code> adds to the base <code>Widget</code> class: <code>align</code> and <code>centered</code>:</p> |
|
|
623 |
|
|
|
624 |
<div id="syntax10" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Align left-center egde of widget to </span></div></li><li class="li1"><div class="de1"><span class="co1">// right-center edge of the node with id "widget3-example"</span></div></li><li class="li1"><div class="de1">alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#widget3-example"</span><span class="sy0">,</span> points<span class="sy0">:</span><span class="br0">[</span><span class="st0">"lc"</span><span class="sy0">,</span> <span class="st0">"rc"</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="co1">// Align top-right corner of widget to </span></div></li><li class="li1"><div class="de1"><span class="co1">// bottom-right corner of the node with id "widget3-example"</span></div></li><li class="li1"><div class="de1">alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#widget3-example"</span><span class="sy0">,</span> points<span class="sy0">:</span><span class="br0">[</span><span class="st0">"tr"</span><span class="sy0">,</span> <span class="st0">"br"</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Center the widget in the node with id "widget3-example"</span></div></li><li class="li2"><div class="de2">alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"centered"</span><span class="sy0">,</span> <span class="st0">"widget3-example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Align the right-center edge of the widget to </span></div></li><li class="li1"><div class="de1"><span class="co1">// the right center edge of the viewport (since a node is not provided to 'align')</span></div></li><li class="li1"><div class="de1">alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>points<span class="sy0">:</span><span class="br0">[</span><span class="st0">"rc"</span><span class="sy0">,</span> <span class="st0">"rc"</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="co1">// Center the widget in the viewport (wince a node is not provided to 'centered')</span></div></li><li class="li1"><div class="de1">alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"centered"</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Return the node to it's original alignment </span></div></li><li class="li2"><div class="de2"><span class="co1">// (centered in the node with id "widget3-example")</span></div></li><li class="li1"><div class="de1"><span class="co1">// NOTE: centered is a shortcut for align : { points:["cc", "cc"] }</span></div></li><li class="li1"><div class="de1">alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#widget3-example"</span><span class="sy0">,</span> points<span class="sy0">:</span><span class="br0">[</span><span class="st0">"cc"</span><span class="sy0">,</span> <span class="st0">"cc"</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Align left-center egde of widget to </span> |
|
|
625 |
<span class="co1">// right-center edge of the node with id "widget3-example"</span> |
|
|
626 |
alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#widget3-example"</span><span class="sy0">,</span> points<span class="sy0">:</span><span class="br0">[</span><span class="st0">"lc"</span><span class="sy0">,</span> <span class="st0">"rc"</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
627 |
|
|
|
628 |
<span class="co1">// Align top-right corner of widget to </span> |
|
|
629 |
<span class="co1">// bottom-right corner of the node with id "widget3-example"</span> |
|
|
630 |
alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#widget3-example"</span><span class="sy0">,</span> points<span class="sy0">:</span><span class="br0">[</span><span class="st0">"tr"</span><span class="sy0">,</span> <span class="st0">"br"</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
631 |
|
|
|
632 |
<span class="co1">// Center the widget in the node with id "widget3-example"</span> |
|
|
633 |
alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"centered"</span><span class="sy0">,</span> <span class="st0">"widget3-example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
634 |
|
|
|
635 |
<span class="co1">// Align the right-center edge of the widget to </span> |
|
|
636 |
<span class="co1">// the right center edge of the viewport (since a node is not provided to 'align')</span> |
|
|
637 |
alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>points<span class="sy0">:</span><span class="br0">[</span><span class="st0">"rc"</span><span class="sy0">,</span> <span class="st0">"rc"</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
638 |
|
|
|
639 |
<span class="co1">// Center the widget in the viewport (wince a node is not provided to 'centered')</span> |
|
|
640 |
alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"centered"</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
641 |
|
|
|
642 |
<span class="co1">// Return the node to it's original alignment </span> |
|
|
643 |
<span class="co1">// (centered in the node with id "widget3-example")</span> |
|
|
644 |
<span class="co1">// NOTE: centered is a shortcut for align : { points:["cc", "cc"] }</span> |
|
|
645 |
alignable.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#widget3-example"</span><span class="sy0">,</span> points<span class="sy0">:</span><span class="br0">[</span><span class="st0">"cc"</span><span class="sy0">,</span> <span class="st0">"cc"</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax10-plain">// Align left-center egde of widget to |
|
|
646 |
// right-center edge of the node with id "widget3-example" |
|
|
647 |
alignable.set("align", {node:"#widget3-example", points:["lc", "rc"]}); |
|
|
648 |
|
|
|
649 |
// Align top-right corner of widget to |
|
|
650 |
// bottom-right corner of the node with id "widget3-example" |
|
|
651 |
alignable.set("align", {node:"#widget3-example", points:["tr", "br"]}); |
|
|
652 |
|
|
|
653 |
// Center the widget in the node with id "widget3-example" |
|
|
654 |
alignable.set("centered", "widget3-example"); |
|
|
655 |
|
|
|
656 |
// Align the right-center edge of the widget to |
|
|
657 |
// the right center edge of the viewport (since a node is not provided to 'align') |
|
|
658 |
alignable.set("align", {points:["rc", "rc"]}); |
|
|
659 |
|
|
|
660 |
// Center the widget in the viewport (wince a node is not provided to 'centered') |
|
|
661 |
alignable.set("centered", true); |
|
|
662 |
|
|
|
663 |
// Return the node to it's original alignment |
|
|
664 |
// (centered in the node with id "widget3-example") |
|
|
665 |
// NOTE: centered is a shortcut for align : { points:["cc", "cc"] } |
|
|
666 |
alignable.set("align", {node:"#widget3-example", points:["cc", "cc"]});</textarea></div> |
|
|
667 |
<h4>CSS Considerations</h4> |
|
|
668 |
|
|
|
669 |
<p>The <code>Alignable</code> widget class, has the same core CSS rules as the <code>Positionable</code> class, to define how it is positioned and how it is hidden:</p> |
|
|
670 |
|
|
|
671 |
<div id="syntax11" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Define absolute positioning as the default for alignable widgets */</span></div></li><li class="li1"><div class="de1"><span class="re1">.yui-alignable</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">position</span><span class="sy0">:</span><span class="kw2">absolute</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> In order to be able to position the widget when hidden, we define hidden</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> to use visibility, as opposed to display</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">*/</span></div></li><li class="li2"><div class="de2"><span class="re1">.yui-alignable-hidden</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">visibility</span><span class="sy0">:</span><span class="kw2">hidden</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/* Define absolute positioning as the default for alignable widgets */</span> |
|
|
672 |
<span class="re1">.yui-alignable</span> <span class="br0">{</span> |
|
|
673 |
<span class="kw1">position</span><span class="sy0">:</span><span class="kw2">absolute</span><span class="sy0">;</span> |
|
|
674 |
<span class="br0">}</span> |
|
|
675 |
|
|
|
676 |
<span class="coMULTI">/* |
|
|
677 |
In order to be able to position the widget when hidden, we define hidden |
|
|
678 |
to use visibility, as opposed to display |
|
|
679 |
*/</span> |
|
|
680 |
<span class="re1">.yui-alignable-hidden</span> <span class="br0">{</span> |
|
|
681 |
<span class="kw1">visibility</span><span class="sy0">:</span><span class="kw2">hidden</span><span class="sy0">;</span> |
|
|
682 |
<span class="br0">}</span></pre></div><textarea id="syntax11-plain">/* Define absolute positioning as the default for alignable widgets */ |
|
|
683 |
.yui-alignable { |
|
|
684 |
position:absolute; |
|
|
685 |
} |
|
|
686 |
|
|
|
687 |
/* |
|
|
688 |
In order to be able to position the widget when hidden, we define hidden |
|
|
689 |
to use visibility, as opposed to display |
|
|
690 |
*/ |
|
|
691 |
.yui-alignable-hidden { |
|
|
692 |
visibility:hidden; |
|
|
693 |
}</textarea></div> </div> |
|
|
694 |
<div class="yui-u sidebar"> |
|
|
695 |
|
|
|
696 |
|
|
|
697 |
<div id="examples" class="mod box4"> |
|
|
698 |
<div class="hd"> |
|
|
699 |
<h4> |
|
|
700 |
Widget Examples:</h4> |
|
|
701 |
</div> |
|
|
702 |
<div class="bd"> |
|
|
703 |
<ul> |
|
|
704 |
<li><a href='../widget/widget-extend.html'>Extending the base widget class</a></li><li class='selected'><a href='../widget/widget-build.html'>Creating custom widget classes</a></li><li><a href='../widget/widget-tooltip.html'>Creating a simple Tooltip widget</a></li> </ul> |
|
|
705 |
</div> |
|
|
706 |
</div> |
|
|
707 |
|
|
|
708 |
<div class="mod box4"> |
|
|
709 |
<div class="hd"> |
|
|
710 |
<h4>More Widget Resources:</h4> |
|
|
711 |
</div> |
|
|
712 |
<div class="bd"> |
|
|
713 |
<ul> |
|
|
714 |
<!-- <li><a href="http://developer.yahoo.com/yui/widget/">User's Guide</a> (external)</li> --> |
|
|
715 |
<li><a href="../../api/module_widget.html">API Documentation</a></li></ul> |
|
|
716 |
</div> |
|
|
717 |
</div> |
|
|
718 |
</div> |
|
|
719 |
</div> |
|
|
720 |
|
|
|
721 |
</div> |
|
|
722 |
</div> |
|
|
723 |
|
|
|
724 |
|
|
|
725 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
726 |
<!-- TABLE OF CONTENTS --> |
|
|
727 |
<div id="toc"> |
|
|
728 |
|
|
|
729 |
<ul> |
|
|
730 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul> |
|
|
731 |
</div> |
|
|
732 |
</div> |
|
|
733 |
</div><!--closes bd--> |
|
|
734 |
|
|
|
735 |
<div id="ft"> |
|
|
736 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
737 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
738 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
739 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
740 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
741 |
</div> |
|
|
742 |
</div> |
|
|
743 |
<script language="javascript"> |
|
|
744 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
745 |
</script> |
|
|
746 |
<script src="../../assets/syntax.js"></script> |
|
|
747 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
748 |
<script language="javascript"> |
|
|
749 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
750 |
</script> |
|
|
751 |
</body> |
|
|
752 |
</html> |