← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/node/node-evt-delegation.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/node-evt-delegation.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Delegating Node Events</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: Delegating Node Events</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 using a single event listener on a list to delegate clicks on the list items.</p>
25
 
</div>
26
 
 
27
 
<div class="example">
28
 
<ul id="demo">
29
 
    <li><em>click me if you don't mind...</em></li>
30
 
    <li><em>click me if you don't mind...</em></li>
31
 
    <li><em>click me if you don't mind...</em></li>
32
 
    <li><em>click me if you don't mind...</em></li>
33
 
</ul>
34
 
 
35
 
<script type="text/javascript">
36
 
YUI().use('node', function(Y) {
37
 
    var nodes = Y.all('#demo li');
38
 
 
39
 
    var onClick = function(e) {
40
 
        e.currentTarget.addClass('highlight'); // e.currentTarget === #demo li 
41
 
        e.target.setContent('thanks for the click!'); // e.target === #demo li or #demo li em
42
 
        e.container.setStyle('border', '5px solid blue'); // e.container === #demo
43
 
 
44
 
        nodes.filter(':not(.highlight)').setContent('Click me too please!');
45
 
    };
46
 
 
47
 
    Y.one('#demo').delegate('click', onClick, 'li');
48
 
});
49
 
</script>
50
 
 
51
 
</div>
52
 
 
53
 
<h2>Setting up the HTML</h2>
54
 
<p>First we need some HTML to work with.</p>
55
 
<pre class="code prettyprint">&lt;ul id=&quot;demo&quot;&gt;
56
 
    &lt;li&gt;click me if you don&#x27;t mind...&lt;&#x2F;li&gt;
57
 
    &lt;li&gt;click me if you don&#x27;t mind...&lt;&#x2F;li&gt;
58
 
    &lt;li&gt;click me if you don&#x27;t mind...&lt;&#x2F;li&gt;
59
 
    &lt;li&gt;click me if you don&#x27;t mind...&lt;&#x2F;li&gt;
60
 
&lt;&#x2F;ul&gt;</pre>
61
 
 
62
 
 
63
 
<h2>Geting a NodeList Instance</h2>
64
 
<p>We will use the <code>all</code> method of our YUI instance to get a <code>NodeList</code> instance to work with.</p>
65
 
<pre class="code prettyprint">var nodes = Y.all(&#x27;#demo li&#x27;);</pre>
66
 
 
67
 
 
68
 
<h2>Delegating Node Events</h2>
69
 
<p>In this example, we will listen for a <code>click</code> event on the list and handle it at the item level and use information from the <code>event</code> object to update the nodes.</p>
70
 
<pre class="code prettyprint">var onClick = function(e) {
71
 
    e.currentTarget.addClass(&#x27;yui-pass&#x27;); &#x2F;&#x2F; e.currentTarget === #demo li
72
 
    e.target.setContent(&#x27;thanks for the click!&#x27;); &#x2F;&#x2F; e.target === #demo li or #demo li em
73
 
    e.container.setStyle(&#x27;border&#x27;, &#x27;5px solid blue&#x27;); &#x2F;&#x2F; e.container === #demo
74
 
 
75
 
    nodes.filter(&#x27;:not(.yui3-pass)&#x27;).setContent(&#x27;Click me too please!&#x27;);
76
 
};</pre>
77
 
 
78
 
 
79
 
<p>Now we just assign the handler to the <code>UL</code> using the <code>delegate</code> method to handle clicks on each <code>LI</code>.</p>
80
 
<pre class="code prettyprint">Y.one(&#x27;#demo&#x27;).delegate(&#x27;click&#x27;, onClick, &#x27;li&#x27;);</pre>
81
 
 
82
 
 
83
 
<h2>Complete Example Source</h2>
84
 
<pre class="code prettyprint">&lt;ul id=&quot;demo&quot;&gt;
85
 
    &lt;li&gt;&lt;em&gt;click me if you don&#x27;t mind...&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
86
 
    &lt;li&gt;&lt;em&gt;click me if you don&#x27;t mind...&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
87
 
    &lt;li&gt;&lt;em&gt;click me if you don&#x27;t mind...&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
88
 
    &lt;li&gt;&lt;em&gt;click me if you don&#x27;t mind...&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
89
 
&lt;&#x2F;ul&gt;
90
 
 
91
 
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
92
 
YUI().use(&#x27;node&#x27;, function(Y) {
93
 
    var nodes = Y.all(&#x27;#demo li&#x27;);
94
 
 
95
 
    var onClick = function(e) {
96
 
        e.currentTarget.addClass(&#x27;highlight&#x27;); &#x2F;&#x2F; e.currentTarget === #demo li 
97
 
        e.target.setContent(&#x27;thanks for the click!&#x27;); &#x2F;&#x2F; e.target === #demo li or #demo li em
98
 
        e.container.setStyle(&#x27;border&#x27;, &#x27;5px solid blue&#x27;); &#x2F;&#x2F; e.container === #demo
99
 
 
100
 
        nodes.filter(&#x27;:not(.highlight)&#x27;).setContent(&#x27;Click me too please!&#x27;);
101
 
    };
102
 
 
103
 
    Y.one(&#x27;#demo&#x27;).delegate(&#x27;click&#x27;, onClick, &#x27;li&#x27;);
104
 
});
105
 
&lt;&#x2F;script&gt;</pre>
106
 
 
107
 
</div>
108
 
            </div>
109
 
        </div>
110
 
 
111
 
        <div class="yui3-u-1-4">
112
 
            <div class="sidebar">
113
 
                
114
 
 
115
 
                
116
 
                    <div class="sidebox">
117
 
                        <div class="hd">
118
 
                            <h2 class="no-toc">Examples</h2>
119
 
                        </div>
120
 
 
121
 
                        <div class="bd">
122
 
                            <ul class="examples">
123
 
                                
124
 
                                    
125
 
                                        <li data-description="Using selectors and property accessors with Node.">
126
 
                                            <a href="properties.html">Set and Get Properties</a>
127
 
                                        </li>
128
 
                                    
129
 
                                
130
 
                                    
131
 
                                        <li data-description="Using DOM methods with Node.">
132
 
                                            <a href="dom-node.html">DOM Methods</a>
133
 
                                        </li>
134
 
                                    
135
 
                                
136
 
                                    
137
 
                                        <li data-description="Listening for DOM events with Node instances.">
138
 
                                            <a href="events.html">Handling DOM Events</a>
139
 
                                        </li>
140
 
                                    
141
 
                                
142
 
                                    
143
 
                                        <li data-description="NodeList provides Node functionality for manipulating multiple nodes at once.">
144
 
                                            <a href="nodelist.html">Using NodeList - Simple</a>
145
 
                                        </li>
146
 
                                    
147
 
                                
148
 
                                    
149
 
                                        <li data-description="How to use multiple NodeList features to build a simple game.">
150
 
                                            <a href="ducks.html">Using NodeList - Ducks Game</a>
151
 
                                        </li>
152
 
                                    
153
 
                                
154
 
                                    
155
 
                                        <li data-description="Using a single event listener to handle events on multiple nodes.">
156
 
                                            <a href="node-evt-delegation.html">Delegating Node Events</a>
157
 
                                        </li>
158
 
                                    
159
 
                                
160
 
                                    
161
 
                                        <li data-description="This example demonstrates how to position an element in page coordinates.">
162
 
                                            <a href="node-xy.html">Node Positioning</a>
163
 
                                        </li>
164
 
                                    
165
 
                                
166
 
                                    
167
 
                                        <li data-description="This example demonstrates how to set styles and get style information.">
168
 
                                            <a href="node-style.html">Node Styling</a>
169
 
                                        </li>
170
 
                                    
171
 
                                
172
 
                                    
173
 
                                        <li data-description="This example demonstrates how to insert content into a Node.">
174
 
                                            <a href="node-insert.html">Adding Node Content</a>
175
 
                                        </li>
176
 
                                    
177
 
                                
178
 
                                    
179
 
                                        <li data-description="This example demonstrates how to show and hide a Node.">
180
 
                                            <a href="node-view.html">Showing and Hiding</a>
181
 
                                        </li>
182
 
                                    
183
 
                                
184
 
                                    
185
 
                                
186
 
                                    
187
 
                                
188
 
                                    
189
 
                                
190
 
                                    
191
 
                                
192
 
                                    
193
 
                                
194
 
                                    
195
 
                                
196
 
                                    
197
 
                                
198
 
                            </ul>
199
 
                        </div>
200
 
                    </div>
201
 
                
202
 
 
203
 
                
204
 
                    <div class="sidebox">
205
 
                        <div class="hd">
206
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
207
 
                        </div>
208
 
 
209
 
                        <div class="bd">
210
 
                            <ul class="examples">
211
 
                                
212
 
                                    
213
 
                                
214
 
                                    
215
 
                                
216
 
                                    
217
 
                                
218
 
                                    
219
 
                                
220
 
                                    
221
 
                                
222
 
                                    
223
 
                                
224
 
                                    
225
 
                                
226
 
                                    
227
 
                                
228
 
                                    
229
 
                                
230
 
                                    
231
 
                                
232
 
                                    
233
 
                                        <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.">
234
 
                                            <a href="../node-focusmanager/node-focusmanager-1.html">Accessible Toolbar</a>
235
 
                                        </li>
236
 
                                    
237
 
                                
238
 
                                    
239
 
                                        <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.">
240
 
                                            <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
241
 
                                        </li>
242
 
                                    
243
 
                                
244
 
                                    
245
 
                                        <li data-description="Use the Event Utility to attach simple DOM event handlers.">
246
 
                                            <a href="../event/basic-example.html">Simple DOM Events</a>
247
 
                                        </li>
248
 
                                    
249
 
                                
250
 
                                    
251
 
                                        <li data-description="Use IO to request XML data from a remote web service.">
252
 
                                            <a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
253
 
                                        </li>
254
 
                                    
255
 
                                
256
 
                                    
257
 
                                        <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
258
 
                                            <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
259
 
                                        </li>
260
 
                                    
261
 
                                
262
 
                                    
263
 
                                        <li data-description="Example Photo Browser application.">
264
 
                                            <a href="../dd/photo-browser.html">Photo Browser</a>
265
 
                                        </li>
266
 
                                    
267
 
                                
268
 
                                    
269
 
                                        <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
270
 
                                            <a href="../dd/portal-drag.html">Portal Style Example</a>
271
 
                                        </li>
272
 
                                    
273
 
                                
274
 
                            </ul>
275
 
                        </div>
276
 
                    </div>
277
 
                
278
 
            </div>
279
 
        </div>
280
 
    </div>
281
 
</div>
282
 
 
283
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
284
 
<script>prettyPrint();</script>
285
 
 
286
 
</body>
287
 
</html>