|
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> |