|
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: Attribute: Attribute Based Speed Dating</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 |
#speeddate h1 { |
|
|
21 |
font-size: 108%; |
|
|
22 |
color:#000; |
|
|
23 |
margin-bottom:2em; |
|
|
24 |
} |
|
|
25 |
|
|
|
26 |
#john { |
|
|
27 |
margin-bottom:10px; |
|
|
28 |
} |
|
|
29 |
|
|
|
30 |
.sd-nametag { |
|
|
31 |
border:1px solid #000; |
|
|
32 |
text-align:center; |
|
|
33 |
width:25em; |
|
|
34 |
margin:20px; |
|
|
35 |
|
|
|
36 |
background-color:#00f; |
|
|
37 |
|
|
|
38 |
border-radius: 10px; |
|
|
39 |
-webkit-border-radius: 10px; |
|
|
40 |
-moz-border-radius: 10px; |
|
|
41 |
|
|
|
42 |
box-shadow: 3px 3px 3px #888; |
|
|
43 |
-moz-box-shadow: 3px 3px 3px #888; |
|
|
44 |
-webkit-box-shadow: 3px 3px 3px #888; |
|
|
45 |
} |
|
|
46 |
|
|
|
47 |
.sd-nametag .sd-hd, .sd-nametag .sd-ft { |
|
|
48 |
padding:5px; |
|
|
49 |
text-align:center; |
|
|
50 |
font-size:108%; |
|
|
51 |
font-weight:900; |
|
|
52 |
color:#fff; |
|
|
53 |
} |
|
|
54 |
|
|
|
55 |
.sd-nametag .sd-hd { |
|
|
56 |
border-top-right-radius: 10px; |
|
|
57 |
border-top-left-radius: 10px; |
|
|
58 |
-moz-border-radius-topright: 10px; |
|
|
59 |
-moz-border-radius-topleft: 10px; |
|
|
60 |
-webkit-border-top-right-radius: 10px; |
|
|
61 |
-webkit-border-top-left-radius: 10px; |
|
|
62 |
} |
|
|
63 |
|
|
|
64 |
.sd-nametag .sd-ft { |
|
|
65 |
border-bottom-right-radius: 10px; |
|
|
66 |
border-bottom-left-radius: 10px; |
|
|
67 |
-moz-border-radius-bottomright: 10px; |
|
|
68 |
-moz-border-radius-bottomleft: 10px; |
|
|
69 |
-webkit-border-bottom-right-radius: 10px; |
|
|
70 |
-webkit-border-bottom-left-radius: 10px; |
|
|
71 |
} |
|
|
72 |
|
|
|
73 |
.sd-nametag .sd-bd { |
|
|
74 |
background-color:#fff; |
|
|
75 |
padding:1em; |
|
|
76 |
} |
|
|
77 |
|
|
|
78 |
.sd-nametag .sd-bd .sd-name, |
|
|
79 |
.sd-nametag .sd-bd .sd-personality { |
|
|
80 |
font-size:108%; |
|
|
81 |
font-weight:900; |
|
|
82 |
font-family:monospace; |
|
|
83 |
text-decoration:underline; |
|
|
84 |
color:#00a; |
|
|
85 |
} |
|
|
86 |
|
|
|
87 |
.sd-nametag .sd-bd .sd-personality.sd-max { |
|
|
88 |
color:#f00; |
|
|
89 |
} |
|
|
90 |
|
|
|
91 |
</style> |
|
|
92 |
|
|
|
93 |
</head> |
|
|
94 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
95 |
<div id="custom-doc" class="yui-t2"> |
|
|
96 |
<div id="hd"> |
|
|
97 |
<div id="ygunav"> |
|
|
98 |
<p> |
|
|
99 |
<em> |
|
|
100 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
101 |
</em> |
|
|
102 |
</p> |
|
|
103 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
104 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
105 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
106 |
<div id="sitesearch"> |
|
|
107 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
108 |
<input type="text" id="searchinput" name="p"> |
|
|
109 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
110 |
</div> |
|
|
111 |
</form> |
|
|
112 |
</div> |
|
|
113 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
114 |
<div id="pagetitle"><h1>YUI Library Examples: Attribute: Attribute Based Speed Dating</h1></div> |
|
|
115 |
</div> |
|
|
116 |
<div id="bd"> |
|
|
117 |
|
|
|
118 |
|
|
|
119 |
<div id="yui-main"> |
|
|
120 |
<div class="yui-b"> |
|
|
121 |
<div class="yui-ge"> |
|
|
122 |
<div class="yui-u first example" id="main"> |
|
|
123 |
|
|
|
124 |
<h2>Attribute: Attribute Based Speed Dating</h2> |
|
|
125 |
|
|
|
126 |
<div id="example" class="promo"> |
|
|
127 |
<div class="example-intro"> |
|
|
128 |
<p> |
|
|
129 |
This example builds on the <a href="attribute-basic.html">"Basic Configuration" example</a>, |
|
|
130 |
showing how you can use attribute to model objects in your application. |
|
|
131 |
</p> |
|
|
132 |
|
|
|
133 |
<p> |
|
|
134 |
As with the basic example, it is geared towards users who want to create their own classes from |
|
|
135 |
scratch and add attribute support. In most cases you should consider extending the |
|
|
136 |
<a href="http://developer.yahoo.com/yui/3/base/index.html"><code>Base</code></a> class when you need attribute support, instead |
|
|
137 |
of augmenting Attribute directly. <a href="http://developer.yahoo.com/yui/3/base/index.html"><code>Base</code></a> does the work described |
|
|
138 |
in this example for you, in addition to making it easier for users to extend you class. |
|
|
139 |
</p> </div> |
|
|
140 |
|
|
|
141 |
<div class="module example-container "> |
|
|
142 |
<div class="hd exampleHd"> |
|
|
143 |
<p class="newWindowButton yui-skin-sam"> |
|
|
144 |
<a href="attribute-basic-speeddate_clean.html" target="_blank">View example in new window.</a> |
|
|
145 |
</p> |
|
|
146 |
</div> <div id="example-canvas" class="bd"> |
|
|
147 |
|
|
|
148 |
|
|
|
149 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
150 |
|
|
|
151 |
<div id="speeddate"> |
|
|
152 |
|
|
|
153 |
<h1>Speed Dating With Attributes</h1> |
|
|
154 |
|
|
|
155 |
<div id="john"> |
|
|
156 |
<button type="button" class="hi">Hi I'm John</button> |
|
|
157 |
<button type="button" class="taken" disabled="disabled">I like Jane</button> |
|
|
158 |
<div class="shirt"></div> |
|
|
159 |
</div> |
|
|
160 |
|
|
|
161 |
<div id="jane"> |
|
|
162 |
<button type="button" disabled="disabled" class="hi">Hey, I'm Jane</button> |
|
|
163 |
<button type="button" class="upgrade" disabled="disabled">No way!, I save whales too!</button> |
|
|
164 |
<button type="button" class="taken" disabled="disabled">I like John</button> |
|
|
165 |
<div class="shirt"></div> |
|
|
166 |
</div> |
|
|
167 |
</div> |
|
|
168 |
|
|
|
169 |
<script type="text/javascript"> |
|
|
170 |
|
|
|
171 |
// Get a new instance of YUI and |
|
|
172 |
// load it with the required set of modules |
|
|
173 |
|
|
|
174 |
YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", "substitute", function(Y) { |
|
|
175 |
|
|
|
176 |
// Setup custom class which we want to |
|
|
177 |
// add managed attribute support to |
|
|
178 |
|
|
|
179 |
function SpeedDater(cfg) { |
|
|
180 |
|
|
|
181 |
// When constructed, setup the initial attributes for the |
|
|
182 |
// instance, by calling the addAttrs method. |
|
|
183 |
|
|
|
184 |
var attrs = { |
|
|
185 |
// Add 3 attributes: name, personality, available |
|
|
186 |
name : { |
|
|
187 |
writeOnce:true |
|
|
188 |
}, |
|
|
189 |
|
|
|
190 |
personality : { |
|
|
191 |
value:50 |
|
|
192 |
}, |
|
|
193 |
|
|
|
194 |
available : { |
|
|
195 |
value:true |
|
|
196 |
} |
|
|
197 |
}; |
|
|
198 |
|
|
|
199 |
this.addAttrs(attrs, cfg); |
|
|
200 |
} |
|
|
201 |
|
|
|
202 |
// Setup static property to hold attribute config |
|
|
203 |
|
|
|
204 |
SpeedDater.NAMETAG = '<div class="sd-nametag"><div class="sd-hd">Hello!</div><div class="sd-bd">I\'m <span class="sd-name">{name}</span> and my PersonalityQuotientIndex is <span class="sd-personality">{personality}</span></div><div class="sd-ft sd-availability">{available}</div></div>'; |
|
|
205 |
|
|
|
206 |
SpeedDater.prototype.applyNameTag = function(where) { |
|
|
207 |
|
|
|
208 |
var tokens = { |
|
|
209 |
name: this.get("name"), |
|
|
210 |
available: (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken", |
|
|
211 |
personality: this.get("personality") |
|
|
212 |
}; |
|
|
213 |
|
|
|
214 |
this.nameTag = Y.Node.create(Y.substitute(SpeedDater.NAMETAG, tokens)); |
|
|
215 |
|
|
|
216 |
Y.one(where).appendChild(this.nameTag); |
|
|
217 |
}; |
|
|
218 |
|
|
|
219 |
SpeedDater.prototype.updateNameTag = function() { |
|
|
220 |
|
|
|
221 |
var taken = (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken"; |
|
|
222 |
var name = this.get("name"); |
|
|
223 |
var personality = this.get("personality"); |
|
|
224 |
|
|
|
225 |
this.nameTag.query(".sd-name").set("innerHTML", name); |
|
|
226 |
this.nameTag.query(".sd-availability").set("innerHTML", taken); |
|
|
227 |
|
|
|
228 |
var personalityEl = this.nameTag.query(".sd-personality"); |
|
|
229 |
personalityEl.set("innerHTML", personality); |
|
|
230 |
|
|
|
231 |
if (personality > 90) { |
|
|
232 |
personalityEl.addClass("sd-max"); |
|
|
233 |
} |
|
|
234 |
} |
|
|
235 |
|
|
|
236 |
// Augment custom class with Attribute |
|
|
237 |
Y.augment(SpeedDater, Y.Attribute); |
|
|
238 |
|
|
|
239 |
var john, jane; |
|
|
240 |
|
|
|
241 |
Y.on("click", function() { |
|
|
242 |
|
|
|
243 |
if (!john) { |
|
|
244 |
|
|
|
245 |
// Set both name and personality during construction |
|
|
246 |
john = new SpeedDater({ |
|
|
247 |
name: "John", |
|
|
248 |
personality: 76.43 |
|
|
249 |
}); |
|
|
250 |
john.applyNameTag("#john .shirt"); |
|
|
251 |
|
|
|
252 |
Y.one("#jane .hi").set("disabled", false); |
|
|
253 |
} |
|
|
254 |
|
|
|
255 |
}, "#john .hi"); |
|
|
256 |
|
|
|
257 |
Y.on("click", function() { |
|
|
258 |
|
|
|
259 |
if (!jane) { |
|
|
260 |
|
|
|
261 |
// Set name during construction |
|
|
262 |
jane = new SpeedDater({ |
|
|
263 |
name: "Jane" |
|
|
264 |
}); |
|
|
265 |
|
|
|
266 |
// Set personality after construction |
|
|
267 |
jane.set("personality", 82); |
|
|
268 |
|
|
|
269 |
jane.applyNameTag("#jane .shirt"); |
|
|
270 |
|
|
|
271 |
Y.all("#jane button").set("disabled", false); |
|
|
272 |
Y.all("#john button").set("disabled", false); |
|
|
273 |
} |
|
|
274 |
|
|
|
275 |
}, "#jane .hi"); |
|
|
276 |
|
|
|
277 |
Y.on("click", function() { |
|
|
278 |
|
|
|
279 |
john.set("available", false); |
|
|
280 |
john.updateNameTag(); |
|
|
281 |
|
|
|
282 |
}, "#john .taken"); |
|
|
283 |
|
|
|
284 |
Y.on("click", function() { |
|
|
285 |
|
|
|
286 |
jane.set("available", false); |
|
|
287 |
jane.updateNameTag(); |
|
|
288 |
|
|
|
289 |
}, "#jane .taken"); |
|
|
290 |
|
|
|
291 |
Y.on("click", function() { |
|
|
292 |
|
|
|
293 |
jane.set("personality", 98); |
|
|
294 |
jane.updateNameTag(); |
|
|
295 |
|
|
|
296 |
}, "#jane .upgrade"); |
|
|
297 |
|
|
|
298 |
}); |
|
|
299 |
</script> |
|
|
300 |
|
|
|
301 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
302 |
|
|
|
303 |
|
|
|
304 |
</div> |
|
|
305 |
</div> |
|
|
306 |
</div> |
|
|
307 |
|
|
|
308 |
<h3>Setting Up a SpeedDater Class</h3> |
|
|
309 |
|
|
|
310 |
<p>In this example, we'll create a custom <code>SpeedDater</code> class, and show how you can use attributes to manage the state for a Speed Dater. |
|
|
311 |
In the <a href="attribute-event-speeddate.html">"Attribute Event Based Speed Dating" example</a> we'll modify this example to leverage attribute change events.</p> |
|
|
312 |
|
|
|
313 |
<h4>Creating A YUI Instance</h4> |
|
|
314 |
|
|
|
315 |
<p>As with the other attribute <a href="attribute-basic.html">examples</a>, we'll setup our own instance of the YUI object and request the modules we require using the code pattern shown below:</p> |
|
|
316 |
|
|
|
317 |
<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="sy0"><</span>script type<span class="sy0">=</span><span class="st0">"text/javascript"</span><span class="sy0">></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Create our local YUI instance, to avoid</span></div></li><li class="li1"><div class="de1"> <span class="co1">// modifying the global YUI object</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"attribute"</span><span class="sy0">,</span> <span class="st0">"node"</span><span class="sy0">,</span> ... <span class="kw2">function</span><span class="br0">(</span>Y<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="co1">// Example code is written inside this function,</span></div></li><li class="li1"><div class="de1"> <span class="co1">// which gets passed our own YUI instance, Y, populated</span></div></li><li class="li2"><div class="de2"> <span class="co1">// with the modules we asked for (e.g. Y.Attribute, Y.Node etc.)</span></div></li><li class="li1"><div class="de1"> </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"><span class="sy0"></</span>script<span class="sy0">></span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0"><</span>script type<span class="sy0">=</span><span class="st0">"text/javascript"</span><span class="sy0">></span> |
|
|
318 |
|
|
|
319 |
<span class="co1">// Create our local YUI instance, to avoid</span> |
|
|
320 |
<span class="co1">// modifying the global YUI object</span> |
|
|
321 |
|
|
|
322 |
YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"attribute"</span><span class="sy0">,</span> <span class="st0">"node"</span><span class="sy0">,</span> ... <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
|
323 |
|
|
|
324 |
<span class="co1">// Example code is written inside this function,</span> |
|
|
325 |
<span class="co1">// which gets passed our own YUI instance, Y, populated</span> |
|
|
326 |
<span class="co1">// with the modules we asked for (e.g. Y.Attribute, Y.Node etc.)</span> |
|
|
327 |
|
|
|
328 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
329 |
<span class="sy0"></</span>script<span class="sy0">></span></pre></div><textarea id="syntax1-plain"><script type="text/javascript"> |
|
|
330 |
|
|
|
331 |
// Create our local YUI instance, to avoid |
|
|
332 |
// modifying the global YUI object |
|
|
333 |
|
|
|
334 |
YUI({...}).use("attribute", "node", ... function(Y) { |
|
|
335 |
|
|
|
336 |
// Example code is written inside this function, |
|
|
337 |
// which gets passed our own YUI instance, Y, populated |
|
|
338 |
// with the modules we asked for (e.g. Y.Attribute, Y.Node etc.) |
|
|
339 |
|
|
|
340 |
}); |
|
|
341 |
</script></textarea></div> |
|
|
342 |
<h4>Defining The SpeedDater Class</h4> |
|
|
343 |
|
|
|
344 |
<p>The first step in the example is to create the constructor function for our new class, to which we want to add attribute support. In our example, this class is called <code>SpeedDater</code>. |
|
|
345 |
We then augment <code>SpeedDater</code> with <code>Y.Attribute</code>, so that it receives all of <code>Attribute's</code> methods, in addition to any it may defined itself:</p> |
|
|
346 |
|
|
|
347 |
<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="co1">// Setup custom class which we want to add attribute support to</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> SpeedDater<span class="br0">(</span>cfg<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="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="co1">// Augment custom class with Attribute</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">augment</span><span class="br0">(</span>SpeedDater<span class="sy0">,</span> Y.<span class="me1">Attribute</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">// Setup custom class which we want to add attribute support to</span> |
|
|
348 |
<span class="kw2">function</span> SpeedDater<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span> |
|
|
349 |
... |
|
|
350 |
<span class="br0">}</span> |
|
|
351 |
|
|
|
352 |
<span class="co1">// Augment custom class with Attribute</span> |
|
|
353 |
Y.<span class="me1">augment</span><span class="br0">(</span>SpeedDater<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">// Setup custom class which we want to add attribute support to |
|
|
354 |
function SpeedDater(cfg) { |
|
|
355 |
... |
|
|
356 |
} |
|
|
357 |
|
|
|
358 |
// Augment custom class with Attribute |
|
|
359 |
Y.augment(SpeedDater, Y.Attribute);</textarea></div> |
|
|
360 |
<h4>Adding Attributes</h4> |
|
|
361 |
|
|
|
362 |
<p> |
|
|
363 |
We can now set up any attributes we need for <code>SpeedDater</code> using Attribute's <code>addAttrs()</code> method. |
|
|
364 |
|
|
|
365 |
For this example we add 3 attributes - <code>name</code>, <code>personality</code>, and <code>available</code>. |
|
|
366 |
|
|
|
367 |
We provide an default initial <code>value</code> for <code>personality</code> and <code>available</code>, but don't have anything for <code>name</code>. |
|
|
368 |
|
|
|
369 |
As mentioned in the basic example, the same object literal we use to provide the initial value for the attribute can also be used to configure attribute properties such as <code>readOnly</code> or |
|
|
370 |
<code>writeOnce</code>, and to define <code>getter</code>, <code>setter</code> and <code>validator</code> methods for the attribute. For <code>name</code>, we configure it to be <code>writeOnce</code>, |
|
|
371 |
meaning that it's value can be set once by the user, but not modified after that single set. |
|
|
372 |
</p> |
|
|
373 |
|
|
|
374 |
<p> |
|
|
375 |
The default set of attributes which <code>SpeedDater</code> will support is passed to <code>addAttrs</code> to set up the attributes for each instance during construction. |
|
|
376 |
</p> |
|
|
377 |
|
|
|
378 |
<p> |
|
|
379 |
As mentioned previously, if you expect your class to be extended, <a href="http://developer.yahoo.com/yui/3/base/index.html">Base</a> provides a more convenient way for you to define the same attribute configuration statically for your class, so that it can be modified by extended classes. |
|
|
380 |
Base will take care of isolating the static configuration, so that it isn't modified across instances. |
|
|
381 |
</p> |
|
|
382 |
|
|
|
383 |
The complete definition for <code>SpeedDater</code> is shown below:</p> |
|
|
384 |
|
|
|
385 |
<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">// Setup custom class which we want to </span></div></li><li class="li1"><div class="de1"><span class="co1">// add managed attribute support to</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">function</span> SpeedDater<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// When constructed, setup the initial attributes for the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// instance, by calling the addAttrs method.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> attrs <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="co1">// Add 3 attributes: name, personality, available</span></div></li><li class="li1"><div class="de1"> <span class="kw3">name</span> <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> writeOnce<span class="sy0">:</span><span class="kw2">true</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> personality <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="nu0">50</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> available <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> value<span class="sy0">:</span><span class="kw2">true</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></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">addAttrs</span><span class="br0">(</span>attrs<span class="sy0">,</span> cfg<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>where<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Method used to render the visual representation of a </span></div></li><li class="li1"><div class="de1"> <span class="co1">// SpeedDater object's state (in this case as a name tag)</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Method used to update the rendered state of SpeedDater in the DOM.</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="co1">// Template to use form the markup </span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">"<div class="</span>sd<span class="sy0">-</span>nametag<span class="st0">"><div class="</span>sd<span class="sy0">-</span>hd<span class="st0">">Hello!</div>... </div>"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Augment custom class with Attribute</span></div></li><li class="li2"><div class="de2">Y.<span class="me1">augment</span><span class="br0">(</span>SpeedDater<span class="sy0">,</span> Y.<span class="me1">Attribute</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">// Setup custom class which we want to </span> |
|
|
386 |
<span class="co1">// add managed attribute support to</span> |
|
|
387 |
|
|
|
388 |
<span class="kw2">function</span> SpeedDater<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span> |
|
|
389 |
|
|
|
390 |
<span class="co1">// When constructed, setup the initial attributes for the</span> |
|
|
391 |
<span class="co1">// instance, by calling the addAttrs method.</span> |
|
|
392 |
|
|
|
393 |
<span class="kw2">var</span> attrs <span class="sy0">=</span> <span class="br0">{</span> |
|
|
394 |
<span class="co1">// Add 3 attributes: name, personality, available</span> |
|
|
395 |
<span class="kw3">name</span> <span class="sy0">:</span> <span class="br0">{</span> |
|
|
396 |
writeOnce<span class="sy0">:</span><span class="kw2">true</span> |
|
|
397 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
398 |
|
|
|
399 |
personality <span class="sy0">:</span> <span class="br0">{</span> |
|
|
400 |
value<span class="sy0">:</span><span class="nu0">50</span> |
|
|
401 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
402 |
|
|
|
403 |
available <span class="sy0">:</span> <span class="br0">{</span> |
|
|
404 |
value<span class="sy0">:</span><span class="kw2">true</span> |
|
|
405 |
<span class="br0">}</span> |
|
|
406 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
407 |
|
|
|
408 |
<span class="kw1">this</span>.<span class="me1">addAttrs</span><span class="br0">(</span>attrs<span class="sy0">,</span> cfg<span class="br0">)</span><span class="sy0">;</span> |
|
|
409 |
<span class="br0">}</span> |
|
|
410 |
|
|
|
411 |
SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>where<span class="br0">)</span> <span class="br0">{</span> |
|
|
412 |
<span class="co1">// Method used to render the visual representation of a </span> |
|
|
413 |
<span class="co1">// SpeedDater object's state (in this case as a name tag)</span> |
|
|
414 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
415 |
|
|
|
416 |
SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
417 |
<span class="co1">// Method used to update the rendered state of SpeedDater in the DOM.</span> |
|
|
418 |
<span class="br0">}</span> |
|
|
419 |
|
|
|
420 |
<span class="co1">// Template to use form the markup </span> |
|
|
421 |
SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">"<div class="</span>sd<span class="sy0">-</span>nametag<span class="st0">"><div class="</span>sd<span class="sy0">-</span>hd<span class="st0">">Hello!</div>... </div>"</span><span class="sy0">;</span> |
|
|
422 |
|
|
|
423 |
<span class="co1">// Augment custom class with Attribute</span> |
|
|
424 |
Y.<span class="me1">augment</span><span class="br0">(</span>SpeedDater<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">// Setup custom class which we want to |
|
|
425 |
// add managed attribute support to |
|
|
426 |
|
|
|
427 |
function SpeedDater(cfg) { |
|
|
428 |
|
|
|
429 |
// When constructed, setup the initial attributes for the |
|
|
430 |
// instance, by calling the addAttrs method. |
|
|
431 |
|
|
|
432 |
var attrs = { |
|
|
433 |
// Add 3 attributes: name, personality, available |
|
|
434 |
name : { |
|
|
435 |
writeOnce:true |
|
|
436 |
}, |
|
|
437 |
|
|
|
438 |
personality : { |
|
|
439 |
value:50 |
|
|
440 |
}, |
|
|
441 |
|
|
|
442 |
available : { |
|
|
443 |
value:true |
|
|
444 |
} |
|
|
445 |
}; |
|
|
446 |
|
|
|
447 |
this.addAttrs(attrs, cfg); |
|
|
448 |
} |
|
|
449 |
|
|
|
450 |
SpeedDater.prototype.applyNameTag = function(where) { |
|
|
451 |
// Method used to render the visual representation of a |
|
|
452 |
// SpeedDater object's state (in this case as a name tag) |
|
|
453 |
}; |
|
|
454 |
|
|
|
455 |
SpeedDater.prototype.updateNameTag = function() { |
|
|
456 |
// Method used to update the rendered state of SpeedDater in the DOM. |
|
|
457 |
} |
|
|
458 |
|
|
|
459 |
// Template to use form the markup |
|
|
460 |
SpeedDater.NAMETAG = "<div class="sd-nametag"><div class="sd-hd">Hello!</div>... </div>"; |
|
|
461 |
|
|
|
462 |
// Augment custom class with Attribute |
|
|
463 |
Y.augment(SpeedDater, Y.Attribute);</textarea></div> |
|
|
464 |
<p> |
|
|
465 |
The <code>addAttrs()</code> method, in addition to the default attribute configuration, also accepts an object literal (associative array) of name/value pairs which can be |
|
|
466 |
used to over-ride the default initial values of the attributes. This is useful for classes which wish to allow the user the set the value of attributes as part of object |
|
|
467 |
construction, as shown by the use of the <code>cfg</code> argument above. |
|
|
468 |
</p> |
|
|
469 |
|
|
|
470 |
<h4>Using Attributes</h4> |
|
|
471 |
|
|
|
472 |
<p>Now that we have <code>SpeedDater</code> defined with the set of attributes it supports, we can create multiple instances of <code>SpeedDater</code> defining the initial |
|
|
473 |
attribute state for each instance through the constructor. We can also update the instance's attribute state after construction, using the <code>get</code> and |
|
|
474 |
<code>set</code> methods defined by Attribute.</p> |
|
|
475 |
|
|
|
476 |
<p>We create a first instance, <code>john</code>, setting up the intial state using Attribute's constructor configuration object support:</p> |
|
|
477 |
|
|
|
478 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Set both name and personality during construction </span></div></li><li class="li1"><div class="de1">john <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">"John"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> personality<span class="sy0">:</span> <span class="nu0">76.43</span></div></li><li class="li2"><div class="de2"><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">// Set both name and personality during construction </span> |
|
|
479 |
john <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">(</span><span class="br0">{</span> |
|
|
480 |
<span class="kw3">name</span><span class="sy0">:</span> <span class="st0">"John"</span><span class="sy0">,</span> |
|
|
481 |
personality<span class="sy0">:</span> <span class="nu0">76.43</span> |
|
|
482 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">// Set both name and personality during construction |
|
|
483 |
john = new SpeedDater({ |
|
|
484 |
name: "John", |
|
|
485 |
personality: 76.43 |
|
|
486 |
});</textarea></div> |
|
|
487 |
<p>For the second instance that we create, <code>jane</code>, we set the value of the personality attribute, after construction:</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="co1">// Set name during construction</span></div></li><li class="li1"><div class="de1">jane <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">"Jane"</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="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="co1">// Set personality after construction. The initial value for personality </span></div></li><li class="li1"><div class="de1"><span class="co1">// in this case, will be the value defined when the attribute was added </span></div></li><li class="li1"><div class="de1"><span class="co1">// using addAttrs (above)</span></div></li><li class="li1"><div class="de1">jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"personality"</span><span class="sy0">,</span> <span class="nu0">82</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">// Set name during construction</span> |
|
|
490 |
jane <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">(</span><span class="br0">{</span> |
|
|
491 |
<span class="kw3">name</span><span class="sy0">:</span> <span class="st0">"Jane"</span> |
|
|
492 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
493 |
|
|
|
494 |
<span class="co1">// Set personality after construction. The initial value for personality </span> |
|
|
495 |
<span class="co1">// in this case, will be the value defined when the attribute was added </span> |
|
|
496 |
<span class="co1">// using addAttrs (above)</span> |
|
|
497 |
jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"personality"</span><span class="sy0">,</span> <span class="nu0">82</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax5-plain">// Set name during construction |
|
|
498 |
jane = new SpeedDater({ |
|
|
499 |
name: "Jane" |
|
|
500 |
}); |
|
|
501 |
|
|
|
502 |
// Set personality after construction. The initial value for personality |
|
|
503 |
// in this case, will be the value defined when the attribute was added |
|
|
504 |
// using addAttrs (above) |
|
|
505 |
jane.set("personality", 82);</textarea></div> |
|
|
506 |
<p>We render the current attribute state of each instance to the DOM, using the <code>applyNameTag()</code> method defined on SpeedDater's prototype:</p> |
|
|
507 |
|
|
|
508 |
<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">// Render the sticker with john's state information to the DOM</span></div></li><li class="li1"><div class="de1">john.<span class="me1">applyNameTag</span><span class="br0">(</span><span class="st0">"#john .shirt"</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 the sticker with jane's state information to the DOM</span></div></li><li class="li2"><div class="de2">jane.<span class="me1">applySicker</span><span class="br0">(</span><span class="st0">"#jane .shirt"</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">// Render the sticker with john's state information to the DOM</span> |
|
|
509 |
john.<span class="me1">applyNameTag</span><span class="br0">(</span><span class="st0">"#john .shirt"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
510 |
|
|
|
511 |
<span class="co1">// Render the sticker with jane's state information to the DOM</span> |
|
|
512 |
jane.<span class="me1">applySicker</span><span class="br0">(</span><span class="st0">"#jane .shirt"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax6-plain">// Render the sticker with john's state information to the DOM |
|
|
513 |
john.applyNameTag("#john .shirt"); |
|
|
514 |
|
|
|
515 |
// Render the sticker with jane's state information to the DOM |
|
|
516 |
jane.applySicker("#jane .shirt");</textarea></div> |
|
|
517 |
<p>Although not directly related to working with Attributes, it's worth taking a look at the <code>applyNameTag()</code> and <code>updateNameTag()</code> implementations, since they establish |
|
|
518 |
a commonly used pattern.</p> |
|
|
519 |
|
|
|
520 |
<p>The <code>applyNameTag()</code> method handles rendering the initial visual representation for a speed dater object's state (in this case a name tag). It uses tokens in an HTML "template" string, which it replaces with the values |
|
|
521 |
of attributes using the <code>substitute()</code> utility method:</p> |
|
|
522 |
|
|
|
523 |
<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">// A template for the markup representing the SpeedDater object..</span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">'<div class="sd-nametag"> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> <div class="sd-hd">Hello!</div> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> <div class="sd-bd">I<span class="es0">\'</span>m <span class="sd-name">{name}</span> <span class="es0">\ </span></span></div></li><li class="li2"><div class="de2"><span class="st0"> and my PersonalityQuotientIndex is <span class="es0">\ </span></span></div></li><li class="li1"><div class="de1"><span class="st0"> <span class="sd-personality">{personality}</span> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> </div> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> <div class="sd-ft sd-availability">{available}</div> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> </div>'</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// A template for the markup representing the SpeedDater object..</span> |
|
|
524 |
SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">'<div class="sd-nametag"> <span class="es0">\</span> |
|
|
525 |
<div class="sd-hd">Hello!</div> <span class="es0">\</span> |
|
|
526 |
<div class="sd-bd">I<span class="es0">\'</span>m <span class="sd-name">{name}</span> <span class="es0">\ </span> |
|
|
527 |
and my PersonalityQuotientIndex is <span class="es0">\ </span> |
|
|
528 |
<span class="sd-personality">{personality}</span> <span class="es0">\</span> |
|
|
529 |
</div> <span class="es0">\</span> |
|
|
530 |
<div class="sd-ft sd-availability">{available}</div> <span class="es0">\</span> |
|
|
531 |
</div>'</span><span class="sy0">;</span></pre></div><textarea id="syntax7-plain">// A template for the markup representing the SpeedDater object.. |
|
|
532 |
SpeedDater.NAMETAG = '<div class="sd-nametag"> \ |
|
|
533 |
<div class="sd-hd">Hello!</div> \ |
|
|
534 |
<div class="sd-bd">I\'m <span class="sd-name">{name}</span> \ |
|
|
535 |
and my PersonalityQuotientIndex is \ |
|
|
536 |
<span class="sd-personality">{personality}</span> \ |
|
|
537 |
</div> \ |
|
|
538 |
<div class="sd-ft sd-availability">{available}</div> \ |
|
|
539 |
</div>';</textarea></div> |
|
|
540 |
<div id="syntax8" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// A rendering method, used to create the initial markup for the SpeedDater.</span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>where<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="co1">// This example uses an HTML template string containing placeholder </span></div></li><li class="li2"><div class="de2"> <span class="co1">// tokens (SpeedDater.NAMETAG above), and Y.substitute to replace the </span></div></li><li class="li1"><div class="de1"> <span class="co1">// tokens with the current attribute values. </span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> tokens <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Get attribute values and map them to the tokens in the HTML template string</span></div></li><li class="li2"><div class="de2"> <span class="kw3">name</span><span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"name"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> available<span class="sy0">:</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"available"</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"I'm still looking "</span> <span class="sy0">:</span> <span class="st0">"Sorry, I'm taken"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> personality<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"personality"</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="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Create a new Node element, from the token substituted string... </span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">nameTag</span> <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span>Y.<span class="me1">substitute</span><span class="br0">(</span>SpeedDater.<span class="me1">NAMETAG</span><span class="sy0">,</span> tokens<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">// ... and append it to the DOM</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">one</span><span class="br0">(</span>where<span class="br0">)</span>.<span class="me1">appendChild</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">nameTag</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><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">// A rendering method, used to create the initial markup for the SpeedDater.</span> |
|
|
541 |
SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>where<span class="br0">)</span> <span class="br0">{</span> |
|
|
542 |
|
|
|
543 |
<span class="co1">// This example uses an HTML template string containing placeholder </span> |
|
|
544 |
<span class="co1">// tokens (SpeedDater.NAMETAG above), and Y.substitute to replace the </span> |
|
|
545 |
<span class="co1">// tokens with the current attribute values. </span> |
|
|
546 |
|
|
|
547 |
<span class="kw2">var</span> tokens <span class="sy0">=</span> <span class="br0">{</span> |
|
|
548 |
<span class="co1">// Get attribute values and map them to the tokens in the HTML template string</span> |
|
|
549 |
<span class="kw3">name</span><span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"name"</span><span class="br0">)</span><span class="sy0">,</span> |
|
|
550 |
available<span class="sy0">:</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"available"</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"I'm still looking "</span> <span class="sy0">:</span> <span class="st0">"Sorry, I'm taken"</span><span class="sy0">,</span> |
|
|
551 |
personality<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"personality"</span><span class="br0">)</span> |
|
|
552 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
553 |
|
|
|
554 |
<span class="co1">// Create a new Node element, from the token substituted string... </span> |
|
|
555 |
<span class="kw1">this</span>.<span class="me1">nameTag</span> <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span>Y.<span class="me1">substitute</span><span class="br0">(</span>SpeedDater.<span class="me1">NAMETAG</span><span class="sy0">,</span> tokens<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
556 |
|
|
|
557 |
<span class="co1">// ... and append it to the DOM</span> |
|
|
558 |
Y.<span class="me1">one</span><span class="br0">(</span>where<span class="br0">)</span>.<span class="me1">appendChild</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">nameTag</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
559 |
<span class="br0">}</span><span class="sy0">;</span></pre></div><textarea id="syntax8-plain">// A rendering method, used to create the initial markup for the SpeedDater. |
|
|
560 |
SpeedDater.prototype.applyNameTag = function(where) { |
|
|
561 |
|
|
|
562 |
// This example uses an HTML template string containing placeholder |
|
|
563 |
// tokens (SpeedDater.NAMETAG above), and Y.substitute to replace the |
|
|
564 |
// tokens with the current attribute values. |
|
|
565 |
|
|
|
566 |
var tokens = { |
|
|
567 |
// Get attribute values and map them to the tokens in the HTML template string |
|
|
568 |
name: this.get("name"), |
|
|
569 |
available: (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken", |
|
|
570 |
personality: this.get("personality") |
|
|
571 |
}; |
|
|
572 |
|
|
|
573 |
// Create a new Node element, from the token substituted string... |
|
|
574 |
this.nameTag = Y.Node.create(Y.substitute(SpeedDater.NAMETAG, tokens)); |
|
|
575 |
|
|
|
576 |
// ... and append it to the DOM |
|
|
577 |
Y.one(where).appendChild(this.nameTag); |
|
|
578 |
};</textarea></div> |
|
|
579 |
<p>The <code>updateNameTag()</code> method handles updating this visual representation with the current state, when requested by the user</p> |
|
|
580 |
|
|
|
581 |
<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="co1">// An update method, used to refresh the rendered content, after </span></div></li><li class="li1"><div class="de1"><span class="co1">// an attribute value is changed.</span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Get current attribute values...</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> taken <span class="sy0">=</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"available"</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"I'm still looking "</span> <span class="sy0">:</span> <span class="st0">"Sorry, I'm taken"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> <span class="kw3">name</span> <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"name"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> personality <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"personality"</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">// Find the corresponding element, and replace the innerHTML with the new value</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-name"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="kw3">name</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-availability"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> taken<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> personalityEl <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-personality"</span><span class="br0">)</span><span class="sy0">;</span> </div></li><li class="li2"><div class="de2"> personalityEl.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> personality<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="kw1">if</span> <span class="br0">(</span>personality <span class="sy0">></span> <span class="nu0">90</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> personalityEl.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"sd-max"</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="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// An update method, used to refresh the rendered content, after </span> |
|
|
582 |
<span class="co1">// an attribute value is changed.</span> |
|
|
583 |
SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
584 |
|
|
|
585 |
<span class="co1">// Get current attribute values...</span> |
|
|
586 |
<span class="kw2">var</span> taken <span class="sy0">=</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"available"</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"I'm still looking "</span> <span class="sy0">:</span> <span class="st0">"Sorry, I'm taken"</span><span class="sy0">;</span> |
|
|
587 |
<span class="kw2">var</span> <span class="kw3">name</span> <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"name"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
588 |
<span class="kw2">var</span> personality <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"personality"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
589 |
|
|
|
590 |
<span class="co1">// Find the corresponding element, and replace the innerHTML with the new value</span> |
|
|
591 |
<span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-name"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="kw3">name</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
592 |
<span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-availability"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> taken<span class="br0">)</span><span class="sy0">;</span> |
|
|
593 |
|
|
|
594 |
<span class="kw2">var</span> personalityEl <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-personality"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
595 |
personalityEl.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> personality<span class="br0">)</span><span class="sy0">;</span> |
|
|
596 |
|
|
|
597 |
<span class="kw1">if</span> <span class="br0">(</span>personality <span class="sy0">></span> <span class="nu0">90</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
598 |
personalityEl.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"sd-max"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
599 |
<span class="br0">}</span> |
|
|
600 |
<span class="br0">}</span></pre></div><textarea id="syntax9-plain">// An update method, used to refresh the rendered content, after |
|
|
601 |
// an attribute value is changed. |
|
|
602 |
SpeedDater.prototype.updateNameTag = function() { |
|
|
603 |
|
|
|
604 |
// Get current attribute values... |
|
|
605 |
var taken = (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken"; |
|
|
606 |
var name = this.get("name"); |
|
|
607 |
var personality = this.get("personality"); |
|
|
608 |
|
|
|
609 |
// Find the corresponding element, and replace the innerHTML with the new value |
|
|
610 |
this.nameTag.query(".sd-name").set("innerHTML", name); |
|
|
611 |
this.nameTag.query(".sd-availability").set("innerHTML", taken); |
|
|
612 |
|
|
|
613 |
var personalityEl = this.nameTag.query(".sd-personality"); |
|
|
614 |
personalityEl.set("innerHTML", personality); |
|
|
615 |
|
|
|
616 |
if (personality > 90) { |
|
|
617 |
personalityEl.addClass("sd-max"); |
|
|
618 |
} |
|
|
619 |
}</textarea></div> |
|
|
620 |
<p>Each instance's state can be now be updated using Attribute's <code>set</code> method, and the subsequent call to SpeedDater's <code>updateNameTag()</code> method will update the visual representation (the rendered DOM) of the object:</p> |
|
|
621 |
|
|
|
622 |
<div id="syntax10" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><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><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> john.<span class="me1">set</span><span class="br0">(</span><span class="st0">"available"</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> john.<span class="me1">updateNameTag</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="br0">}</span><span class="sy0">,</span> <span class="st0">"#john .taken"</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">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><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"available"</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> jane.<span class="me1">updateNameTag</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="br0">}</span><span class="sy0">,</span> <span class="st0">"#jane .taken"</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">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><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"personality"</span><span class="sy0">,</span> <span class="nu0">98</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> jane.<span class="me1">updateNameTag</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="br0">}</span><span class="sy0">,</span> <span class="st0">"#jane .upgrade"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">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><span class="br0">)</span> <span class="br0">{</span> |
|
|
623 |
|
|
|
624 |
john.<span class="me1">set</span><span class="br0">(</span><span class="st0">"available"</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
625 |
john.<span class="me1">updateNameTag</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
626 |
|
|
|
627 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#john .taken"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
628 |
|
|
|
629 |
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><span class="br0">)</span> <span class="br0">{</span> |
|
|
630 |
|
|
|
631 |
jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"available"</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
632 |
jane.<span class="me1">updateNameTag</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
633 |
|
|
|
634 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#jane .taken"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
635 |
|
|
|
636 |
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><span class="br0">)</span> <span class="br0">{</span> |
|
|
637 |
|
|
|
638 |
jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"personality"</span><span class="sy0">,</span> <span class="nu0">98</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
639 |
jane.<span class="me1">updateNameTag</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
640 |
|
|
|
641 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#jane .upgrade"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax10-plain">Y.on("click", function() { |
|
|
642 |
|
|
|
643 |
john.set("available", false); |
|
|
644 |
john.updateNameTag(); |
|
|
645 |
|
|
|
646 |
}, "#john .taken"); |
|
|
647 |
|
|
|
648 |
Y.on("click", function() { |
|
|
649 |
|
|
|
650 |
jane.set("available", false); |
|
|
651 |
jane.updateNameTag(); |
|
|
652 |
|
|
|
653 |
}, "#jane .taken"); |
|
|
654 |
|
|
|
655 |
Y.on("click", function() { |
|
|
656 |
|
|
|
657 |
jane.set("personality", 98); |
|
|
658 |
jane.updateNameTag(); |
|
|
659 |
|
|
|
660 |
}, "#jane .upgrade");</textarea></div> |
|
|
661 |
<p>In the <a href="attribute-event-speeddate.html">"Attribute Event Based Speed Dating" example</a>, we'll see how we can use Attribute change events to eliminate the need for users to call <code>updateNameTag()</code> each time they set an attribute, and have the two instances communicate with one another.</p> </div> |
|
|
662 |
<div class="yui-u sidebar"> |
|
|
663 |
|
|
|
664 |
|
|
|
665 |
<div id="examples" class="mod box4"> |
|
|
666 |
<div class="hd"> |
|
|
667 |
<h4> |
|
|
668 |
Attribute Examples:</h4> |
|
|
669 |
</div> |
|
|
670 |
<div class="bd"> |
|
|
671 |
<ul> |
|
|
672 |
<li><a href='../attribute/attribute-basic.html'>Basic Attribute Configuration</a></li><li><a href='../attribute/attribute-rw.html'>Read-Only and Write-Once Attributes</a></li><li><a href='../attribute/attribute-event.html'>Attribute Change Events</a></li><li class='selected'><a href='../attribute/attribute-basic-speeddate.html'>Attribute Based Speed Dating</a></li><li><a href='../attribute/attribute-event-speeddate.html'>Attribute Event Based Speed Dating</a></li><li><a href='../attribute/attribute-getset.html'>Attribute Getters, Setters and Validators</a></li> </ul> |
|
|
673 |
</div> |
|
|
674 |
</div> |
|
|
675 |
|
|
|
676 |
<div class="mod box4"> |
|
|
677 |
<div class="hd"> |
|
|
678 |
<h4>More Attribute Resources:</h4> |
|
|
679 |
</div> |
|
|
680 |
<div class="bd"> |
|
|
681 |
<ul> |
|
|
682 |
<!-- <li><a href="http://developer.yahoo.com/yui/attribute/">User's Guide</a> (external)</li> --> |
|
|
683 |
<li><a href="../../api/module_attribute.html">API Documentation</a></li></ul> |
|
|
684 |
</div> |
|
|
685 |
</div> |
|
|
686 |
</div> |
|
|
687 |
</div> |
|
|
688 |
|
|
|
689 |
</div> |
|
|
690 |
</div> |
|
|
691 |
|
|
|
692 |
|
|
|
693 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
694 |
<!-- TABLE OF CONTENTS --> |
|
|
695 |
<div id="toc"> |
|
|
696 |
|
|
|
697 |
<ul> |
|
|
698 |
<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="selected "><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="item"><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> |
|
|
699 |
</div> |
|
|
700 |
</div> |
|
|
701 |
</div><!--closes bd--> |
|
|
702 |
|
|
|
703 |
<div id="ft"> |
|
|
704 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
705 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
706 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
707 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
708 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
709 |
</div> |
|
|
710 |
</div> |
|
|
711 |
<script language="javascript"> |
|
|
712 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
713 |
</script> |
|
|
714 |
<script src="../../assets/syntax.js"></script> |
|
|
715 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
716 |
<script language="javascript"> |
|
|
717 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
718 |
</script> |
|
|
719 |
</body> |
|
|
720 |
</html> |