← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/docs/node/nodelist.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/node/nodelist.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Using NodeList - Simple</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Using NodeList - Simple</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><link href="../assets/node/node.css" rel="stylesheet" type="text/css">
23
 
<div class="intro">
24
 
    <p>This example demonstrates how to use a NodeList instance to make it easy to manipulate multiple nodes at once.</p>
25
 
</div>
26
 
 
27
 
<div class="example">
28
 
<style>
29
 
.example .box-row li{
30
 
    display: inline-block;
31
 
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
32
 
    width: 100px;
33
 
    line-height: 3em;
34
 
    text-align: center;
35
 
    margin: 0.5em 1em 0.5em 0;
36
 
    border: solid 1px #ccc;
37
 
    background-color: #F4E6B8;
38
 
    cursor: pointer;
39
 
}
40
 
</style>
41
 
 
42
 
Click us.
43
 
<ul class="box-row">
44
 
    <li>box</li>
45
 
    <li>box</li>
46
 
    <li>box</li>
47
 
    <li>box</li>
48
 
    <li>box</li>
49
 
</ul>
50
 
 
51
 
<script>
52
 
YUI().use('node', function(Y){
53
 
    var boxes = Y.all('.box-row li');
54
 
 
55
 
    var handleBoxClick = function(e) {
56
 
        // boxes is a NodeList
57
 
        boxes.setContent('neener');
58
 
        boxes.setStyle('backgroundColor', '#F4E6B8');
59
 
    
60
 
        // e.currentTarget === .box-row li, just the one that was clicked
61
 
        e.currentTarget.setContent('ouch!');        
62
 
        e.currentTarget.setStyle('backgroundColor', '#C4DAED');
63
 
    };    
64
 
    Y.one('.box-row').delegate('click', handleBoxClick, 'li');
65
 
});
66
 
</script>
67
 
 
68
 
</div>
69
 
 
70
 
<h2>Setting up the Node</h2>
71
 
<p>First we need some HTML to work with.</p>
72
 
<pre class="code prettyprint">Click us.
73
 
&lt;ul class=&quot;box-row&quot;&gt;
74
 
    &lt;li&gt;box&lt;&#x2F;li&gt;
75
 
    &lt;li&gt;box&lt;&#x2F;li&gt;
76
 
    &lt;li&gt;box&lt;&#x2F;li&gt;
77
 
    &lt;li&gt;box&lt;&#x2F;li&gt;
78
 
    &lt;li&gt;box&lt;&#x2F;li&gt;
79
 
&lt;&#x2F;ul&gt;</pre>
80
 
 
81
 
<h2>CSS</h2>
82
 
<p>CSS to make boxes in horizontal row</p>
83
 
<pre class="code prettyprint">&lt;style&gt;
84
 
.example .box-row li{
85
 
    display: inline-block;
86
 
    zoom: 1; *display: inline; &#x2F;* IE &lt; 8: fake inline-block *&#x2F;
87
 
    width: 100px;
88
 
    line-height: 3em;
89
 
    text-align: center;
90
 
    margin: 0.5em 1em 0.5em 0;
91
 
    border: solid 1px #ccc;
92
 
    background-color: #F4E6B8;
93
 
    cursor: pointer;
94
 
}
95
 
&lt;&#x2F;style&gt;</pre>
96
 
 
97
 
 
98
 
<h2>Geting a NodeList Instance</h2>
99
 
<p>We will use the <code>all</code> method of our YUI instance to get a NodeList instance to work with.</p>
100
 
<pre class="code prettyprint">var boxes = Y.all(&#x27;.box-row li&#x27;);</pre>
101
 
 
102
 
 
103
 
<h2>Accessing NodeList Properties</h2>
104
 
<p>As with Node, simple type of properties (strings, numbers, booleans) 
105
 
pass directly to/from the underlying HTMLElement, however properties 
106
 
representing HTMLElements return Node instances.</p>
107
 
<p>In this example, we will listen for a <code>click</code> event to trigger the property change.</p>
108
 
<p>Note that the context of the handler is set to the NodeList, so <code>this</code> 
109
 
refers to our NodeList instance.  The <code>currentTarget</code> property of 
110
 
the event object is set to the current Node instance.</p>
111
 
<pre class="code prettyprint">var handleBoxClick = function(e) {
112
 
    &#x2F;&#x2F; this === boxes, which is a NodeList
113
 
    this.setContent(&#x27;neener&#x27;);
114
 
    this.setStyle(&#x27;backgroundColor&#x27;, &#x27;#F4E6B8&#x27;);
115
 
 
116
 
    &#x2F;&#x2F; e.currentTarget === .box-row li, just the one that was clicked
117
 
    e.currentTarget.setContent(&#x27;ouch!&#x27;);        
118
 
    e.currentTarget.setStyle(&#x27;backgroundColor&#x27;, &#x27;#fff&#x27;);
119
 
};    
120
 
boxes.on(&#x27;click&#x27;, handleBoxClick);</pre>
121
 
 
122
 
 
123
 
<h2>Prefer <code>node.delegate()</code> over <code>nodelist.on()</code></h2>
124
 
 
125
 
<p>Sometimes you need to create individual subscriptions for each Node in a 
126
 
NodeList (as is done in this example), but usually it's preferable to use 
127
 
<a href="node-evt-delegation.html">event delegation</a>.</p>
128
 
 
129
 
<h2>Complete Simple Box Example Source</h2>
130
 
<pre class="code prettyprint">&lt;style&gt;
131
 
.example .box-row li{
132
 
    display: inline-block;
133
 
    zoom: 1; *display: inline; &#x2F;* IE &lt; 8: fake inline-block *&#x2F;
134
 
    width: 100px;
135
 
    line-height: 3em;
136
 
    text-align: center;
137
 
    margin: 0.5em 1em 0.5em 0;
138
 
    border: solid 1px #ccc;
139
 
    background-color: #F4E6B8;
140
 
    cursor: pointer;
141
 
}
142
 
&lt;&#x2F;style&gt;
143
 
 
144
 
Click us.
145
 
&lt;ul class=&quot;box-row&quot;&gt;
146
 
    &lt;li&gt;box&lt;&#x2F;li&gt;
147
 
    &lt;li&gt;box&lt;&#x2F;li&gt;
148
 
    &lt;li&gt;box&lt;&#x2F;li&gt;
149
 
    &lt;li&gt;box&lt;&#x2F;li&gt;
150
 
    &lt;li&gt;box&lt;&#x2F;li&gt;
151
 
&lt;&#x2F;ul&gt;
152
 
 
153
 
&lt;script&gt;
154
 
YUI().use(&#x27;node&#x27;, function(Y){
155
 
    var boxes = Y.all(&#x27;.box-row li&#x27;);
156
 
 
157
 
    var handleBoxClick = function(e) {
158
 
        &#x2F;&#x2F; boxes is a NodeList
159
 
        boxes.setContent(&#x27;neener&#x27;);
160
 
        boxes.setStyle(&#x27;backgroundColor&#x27;, &#x27;#F4E6B8&#x27;);
161
 
    
162
 
        &#x2F;&#x2F; e.currentTarget === .box-row li, just the one that was clicked
163
 
        e.currentTarget.setContent(&#x27;ouch!&#x27;);        
164
 
        e.currentTarget.setStyle(&#x27;backgroundColor&#x27;, &#x27;#C4DAED&#x27;);
165
 
    };    
166
 
    Y.one(&#x27;.box-row&#x27;).delegate(&#x27;click&#x27;, handleBoxClick, &#x27;li&#x27;);
167
 
});
168
 
&lt;&#x2F;script&gt;</pre>
169
 
 
170
 
</div>
171
 
            </div>
172
 
        </div>
173
 
 
174
 
        <div class="yui3-u-1-4">
175
 
            <div class="sidebar">
176
 
                
177
 
 
178
 
                
179
 
                    <div class="sidebox">
180
 
                        <div class="hd">
181
 
                            <h2 class="no-toc">Examples</h2>
182
 
                        </div>
183
 
 
184
 
                        <div class="bd">
185
 
                            <ul class="examples">
186
 
                                
187
 
                                    
188
 
                                        <li data-description="Using selectors and property accessors with Node.">
189
 
                                            <a href="properties.html">Set and Get Properties</a>
190
 
                                        </li>
191
 
                                    
192
 
                                
193
 
                                    
194
 
                                        <li data-description="Using DOM methods with Node.">
195
 
                                            <a href="dom-node.html">DOM Methods</a>
196
 
                                        </li>
197
 
                                    
198
 
                                
199
 
                                    
200
 
                                        <li data-description="Listening for DOM events with Node instances.">
201
 
                                            <a href="events.html">Handling DOM Events</a>
202
 
                                        </li>
203
 
                                    
204
 
                                
205
 
                                    
206
 
                                        <li data-description="NodeList provides Node functionality for manipulating multiple nodes at once.">
207
 
                                            <a href="nodelist.html">Using NodeList - Simple</a>
208
 
                                        </li>
209
 
                                    
210
 
                                
211
 
                                    
212
 
                                        <li data-description="How to use multiple NodeList features to build a simple game.">
213
 
                                            <a href="ducks.html">Using NodeList - Ducks Game</a>
214
 
                                        </li>
215
 
                                    
216
 
                                
217
 
                                    
218
 
                                        <li data-description="Using a single event listener to handle events on multiple nodes.">
219
 
                                            <a href="node-evt-delegation.html">Delegating Node Events</a>
220
 
                                        </li>
221
 
                                    
222
 
                                
223
 
                                    
224
 
                                        <li data-description="This example demonstrates how to position an element in page coordinates.">
225
 
                                            <a href="node-xy.html">Node Positioning</a>
226
 
                                        </li>
227
 
                                    
228
 
                                
229
 
                                    
230
 
                                        <li data-description="This example demonstrates how to set styles and get style information.">
231
 
                                            <a href="node-style.html">Node Styling</a>
232
 
                                        </li>
233
 
                                    
234
 
                                
235
 
                                    
236
 
                                        <li data-description="This example demonstrates how to insert content into a Node.">
237
 
                                            <a href="node-insert.html">Adding Node Content</a>
238
 
                                        </li>
239
 
                                    
240
 
                                
241
 
                                    
242
 
                                        <li data-description="This example demonstrates how to show and hide a Node.">
243
 
                                            <a href="node-view.html">Showing and Hiding</a>
244
 
                                        </li>
245
 
                                    
246
 
                                
247
 
                                    
248
 
                                
249
 
                                    
250
 
                                
251
 
                                    
252
 
                                
253
 
                                    
254
 
                                
255
 
                                    
256
 
                                
257
 
                                    
258
 
                                
259
 
                                    
260
 
                                
261
 
                            </ul>
262
 
                        </div>
263
 
                    </div>
264
 
                
265
 
 
266
 
                
267
 
                    <div class="sidebox">
268
 
                        <div class="hd">
269
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
270
 
                        </div>
271
 
 
272
 
                        <div class="bd">
273
 
                            <ul class="examples">
274
 
                                
275
 
                                    
276
 
                                
277
 
                                    
278
 
                                
279
 
                                    
280
 
                                
281
 
                                    
282
 
                                
283
 
                                    
284
 
                                
285
 
                                    
286
 
                                
287
 
                                    
288
 
                                
289
 
                                    
290
 
                                
291
 
                                    
292
 
                                
293
 
                                    
294
 
                                
295
 
                                    
296
 
                                        <li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node&#x27;s support for the WAI-ARIA Roles and States.">
297
 
                                            <a href="../node-focusmanager/node-focusmanager-1.html">Accessible Toolbar</a>
298
 
                                        </li>
299
 
                                    
300
 
                                
301
 
                                    
302
 
                                        <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event&#x27;s delegation support and mouseenter event, along with the Overlay widget and Node&#x27;s support for the WAI-ARIA Roles and States.">
303
 
                                            <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
304
 
                                        </li>
305
 
                                    
306
 
                                
307
 
                                    
308
 
                                        <li data-description="Use the Event Utility to attach simple DOM event handlers.">
309
 
                                            <a href="../event/basic-example.html">Simple DOM Events</a>
310
 
                                        </li>
311
 
                                    
312
 
                                
313
 
                                    
314
 
                                        <li data-description="Use IO to request XML data from a remote web service.">
315
 
                                            <a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
316
 
                                        </li>
317
 
                                    
318
 
                                
319
 
                                    
320
 
                                        <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
321
 
                                            <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
322
 
                                        </li>
323
 
                                    
324
 
                                
325
 
                                    
326
 
                                        <li data-description="Example Photo Browser application.">
327
 
                                            <a href="../dd/photo-browser.html">Photo Browser</a>
328
 
                                        </li>
329
 
                                    
330
 
                                
331
 
                                    
332
 
                                        <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
333
 
                                            <a href="../dd/portal-drag.html">Portal Style Example</a>
334
 
                                        </li>
335
 
                                    
336
 
                                
337
 
                            </ul>
338
 
                        </div>
339
 
                    </div>
340
 
                
341
 
            </div>
342
 
        </div>
343
 
    </div>
344
 
</div>
345
 
 
346
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
347
 
<script>prettyPrint();</script>
348
 
 
349
 
</body>
350
 
</html>