← Back to branch summary

~lutostag/ubuntu/utopic/maas/1.5.2

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/node/events.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-03-15 18:14:08 UTC
  • mfrom: (1.1.3)
  • Revision ID: package-import@ubuntu.com-20120315181408-zgl94hzo0x4n99an
Tags: 0.1+bzr295+dfsg-0ubuntu2
* debian/patches:
  - 01-fix-database-settings.patch: Update to set PSERV_URL.
  - 02-pserv-config.patch: Set port to 8001.
* debian/maas.postinst: Run maas-import-isos on install.
* debian/control: Depends on rabbitmq-server.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/node/events.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
5
    <title>Example: Handling DOM Events</title>
 
6
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
 
7
    <link rel="stylesheet" href="../assets/css/main.css">
 
8
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
 
9
    <script src="../../build/yui/yui-min.js"></script>
 
10
</head>
 
11
<body>
 
12
 
 
13
<div id="doc">
 
14
    <h1>Example: Handling DOM Events</h1>
 
15
 
 
16
    
 
17
 
 
18
    <div class="yui3-g">
 
19
        <div id="main" class="yui3-u">
 
20
            <div class="content"><div class="intro">
 
21
    <p>This example demonstrates how to respond to DOM events from a Node instance.</p>
 
22
    <p>Clicking the box will report some event details.</p>
 
23
</div>
 
24
 
 
25
<div class="example">
 
26
<link href="../assets/node/node.css" rel="stylesheet" type="text/css">
 
27
<div id="demo">
 
28
    <p><em>lorem</em> <code>ipsum</code> <strong>dolor</strong> <span>sit</span></p>
 
29
    <div id="event-result">Click anywhere in the box to see some event data.</div>
 
30
</div>
 
31
 
 
32
<script type="text/javascript">
 
33
YUI().use('node', function(Y) {
 
34
    var onClick = function(e) {
 
35
        var type = e.type,
 
36
            currentTarget = e.currentTarget, // #demo
 
37
            target = e.target; // #demo or a descendant
 
38
            
 
39
        Y.one('#event-result').setContent('<dl>' +
 
40
            '<dt>type</dt><dd>' + e.type + '</dd>' +
 
41
            '<dt>target</dt><dd>' + target.get('tagName') + '</dd>' +
 
42
            '<dt>currentTarget</dt><dd>' + currentTarget.get('tagName') +
 
43
                '#' + currentTarget.get('id') + '</dd></dl>');
 
44
    };
 
45
 
 
46
    Y.one('#demo').on('click', onClick);
 
47
});
 
48
</script>
 
49
 
 
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;div id=&quot;demo&quot;&gt;
 
56
    &lt;p&gt;&lt;em&gt;lorem&lt;&#x2F;em&gt; &lt;code&gt;ipsum&lt;&#x2F;code&gt; &lt;strong&gt;dolor&lt;&#x2F;strong&gt; &lt;span&gt;sit&lt;&#x2F;span&gt;&lt;&#x2F;p&gt;
 
57
    &lt;div id=&quot;event-result&quot;&gt;&lt;&#x2F;div&gt;
 
58
&lt;&#x2F;div&gt;</pre>
 
59
 
 
60
<h2>Creating the Event Handler</h2>
 
61
<p>Next we will create a handler to run when the event is fired. In our handler we will update the node with some of the properties of the event.</p>
 
62
<pre class="code prettyprint">var onClick = function(e) {
 
63
    var type = e.type,
 
64
        currentTarget = e.currentTarget, &#x2F;&#x2F; #demo
 
65
        target = e.target; &#x2F;&#x2F; #demo or a descendant
 
66
 
 
67
    Y.one(&#x27;#event-result&#x27;).setContent(&#x27;&lt;dl&gt;&#x27; +
 
68
        &#x27;&lt;dt&gt;type&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + e.type + &#x27;&lt;&#x2F;dd&gt;&#x27; +
 
69
        &#x27;&lt;dt&gt;target&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + target.get(&#x27;tagName&#x27;) + &#x27;&lt;&#x2F;dd&gt;&#x27; +
 
70
        &#x27;&lt;dt&gt;currentTarget&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + currentTarget.get(&#x27;tagName&#x27;) +
 
71
            &#x27;#&#x27; + currentTarget.get(&#x27;id&#x27;) + &#x27;&lt;&#x2F;dd&gt;&lt;&#x2F;dl&gt;&#x27;);
 
72
};</pre>
 
73
 
 
74
 
 
75
<h2>Listening for Events</h2>
 
76
<p>We can assign our handler to all of the items by using the <code>all</code> method to get a NodeList instance and using the <code>on</code> method to subscribe to the event.</p>
 
77
<pre class="code prettyprint">Y.one(&#x27;#demo&#x27;).on(&#x27;click&#x27;, onClick);</pre>
 
78
 
 
79
 
 
80
<h2>Complete Example Source</h2>
 
81
<pre class="code prettyprint">&lt;link href=&quot;..&#x2F;assets&#x2F;node&#x2F;node.css&quot; rel=&quot;stylesheet&quot; type=&quot;text&#x2F;css&quot;&gt;
 
82
&lt;div id=&quot;demo&quot;&gt;
 
83
    &lt;p&gt;&lt;em&gt;lorem&lt;&#x2F;em&gt; &lt;code&gt;ipsum&lt;&#x2F;code&gt; &lt;strong&gt;dolor&lt;&#x2F;strong&gt; &lt;span&gt;sit&lt;&#x2F;span&gt;&lt;&#x2F;p&gt;
 
84
    &lt;div id=&quot;event-result&quot;&gt;Click anywhere in the box to see some event data.&lt;&#x2F;div&gt;
 
85
&lt;&#x2F;div&gt;
 
86
 
 
87
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
 
88
YUI().use(&#x27;node&#x27;, function(Y) {
 
89
    var onClick = function(e) {
 
90
        var type = e.type,
 
91
            currentTarget = e.currentTarget, &#x2F;&#x2F; #demo
 
92
            target = e.target; &#x2F;&#x2F; #demo or a descendant
 
93
            
 
94
        Y.one(&#x27;#event-result&#x27;).setContent(&#x27;&lt;dl&gt;&#x27; +
 
95
            &#x27;&lt;dt&gt;type&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + e.type + &#x27;&lt;&#x2F;dd&gt;&#x27; +
 
96
            &#x27;&lt;dt&gt;target&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + target.get(&#x27;tagName&#x27;) + &#x27;&lt;&#x2F;dd&gt;&#x27; +
 
97
            &#x27;&lt;dt&gt;currentTarget&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + currentTarget.get(&#x27;tagName&#x27;) +
 
98
                &#x27;#&#x27; + currentTarget.get(&#x27;id&#x27;) + &#x27;&lt;&#x2F;dd&gt;&lt;&#x2F;dl&gt;&#x27;);
 
99
    };
 
100
 
 
101
    Y.one(&#x27;#demo&#x27;).on(&#x27;click&#x27;, onClick);
 
102
});
 
103
&lt;&#x2F;script&gt;</pre>
 
104
 
 
105
</div>
 
106
        </div>
 
107
 
 
108
        <div id="sidebar" class="yui3-u">
 
109
            
 
110
 
 
111
            
 
112
                <div class="sidebox">
 
113
                    <div class="hd">
 
114
                        <h2 class="no-toc">Examples</h2>
 
115
                    </div>
 
116
 
 
117
                    <div class="bd">
 
118
                        <ul class="examples">
 
119
                            
 
120
                                
 
121
                                    <li data-description="Using selectors and property accessors with Node.">
 
122
                                        <a href="properties.html">Set and Get Properties</a>
 
123
                                    </li>
 
124
                                
 
125
                            
 
126
                                
 
127
                                    <li data-description="Using DOM methods with Node.">
 
128
                                        <a href="dom-node.html">DOM Methods</a>
 
129
                                    </li>
 
130
                                
 
131
                            
 
132
                                
 
133
                                    <li data-description="Listening for DOM events with Node instances.">
 
134
                                        <a href="events.html">Handling DOM Events</a>
 
135
                                    </li>
 
136
                                
 
137
                            
 
138
                                
 
139
                                    <li data-description="NodeList provides Node functionality for multiple nodes.">
 
140
                                        <a href="nodelist.html">NodeList</a>
 
141
                                    </li>
 
142
                                
 
143
                            
 
144
                                
 
145
                                    <li data-description="Using a single event listener to handle events on multiple nodes.">
 
146
                                        <a href="node-evt-delegation.html">Delegating Node Events</a>
 
147
                                    </li>
 
148
                                
 
149
                            
 
150
                                
 
151
                                    <li data-description="This example demonstrates how to position an element in page coordinates.">
 
152
                                        <a href="node-xy.html">Node Positioning</a>
 
153
                                    </li>
 
154
                                
 
155
                            
 
156
                                
 
157
                                    <li data-description="This example demonstrates how to set styles and get style information.">
 
158
                                        <a href="node-style.html">Node Styling</a>
 
159
                                    </li>
 
160
                                
 
161
                            
 
162
                                
 
163
                                    <li data-description="This example demonstrates how to insert content into a Node.">
 
164
                                        <a href="node-insert.html">Adding Node Content</a>
 
165
                                    </li>
 
166
                                
 
167
                            
 
168
                                
 
169
                                    <li data-description="This example demonstrates how to show and hide a Node.">
 
170
                                        <a href="node-view.html">Showing and Hiding</a>
 
171
                                    </li>
 
172
                                
 
173
                            
 
174
                                
 
175
                            
 
176
                                
 
177
                            
 
178
                                
 
179
                            
 
180
                                
 
181
                            
 
182
                                
 
183
                            
 
184
                                
 
185
                            
 
186
                                
 
187
                            
 
188
                        </ul>
 
189
                    </div>
 
190
                </div>
 
191
            
 
192
 
 
193
            
 
194
                <div class="sidebox">
 
195
                    <div class="hd">
 
196
                        <h2 class="no-toc">Examples That Use This Component</h2>
 
197
                    </div>
 
198
 
 
199
                    <div class="bd">
 
200
                        <ul class="examples">
 
201
                            
 
202
                                
 
203
                            
 
204
                                
 
205
                            
 
206
                                
 
207
                            
 
208
                                
 
209
                            
 
210
                                
 
211
                            
 
212
                                
 
213
                            
 
214
                                
 
215
                            
 
216
                                
 
217
                            
 
218
                                
 
219
                            
 
220
                                
 
221
                                    <li data-description="Use the Event Utility to attach simple DOM event handlers.">
 
222
                                        <a href="../event/basic-example.html">Simple DOM Events</a>
 
223
                                    </li>
 
224
                                
 
225
                            
 
226
                                
 
227
                                    <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.">
 
228
                                        <a href="../node-focusmanager/node-focusmanager-1.html">Accessible Toolbar</a>
 
229
                                    </li>
 
230
                                
 
231
                            
 
232
                                
 
233
                                    <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.">
 
234
                                        <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
 
235
                                    </li>
 
236
                                
 
237
                            
 
238
                                
 
239
                                    <li data-description="Use IO to request XML data from a remote web service.">
 
240
                                        <a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
 
241
                                    </li>
 
242
                                
 
243
                            
 
244
                                
 
245
                                    <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
 
246
                                        <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
 
247
                                    </li>
 
248
                                
 
249
                            
 
250
                                
 
251
                                    <li data-description="Example Photo Browser application.">
 
252
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
 
253
                                    </li>
 
254
                                
 
255
                            
 
256
                                
 
257
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
 
258
                                        <a href="../dd/portal-drag.html">Portal Style Example</a>
 
259
                                    </li>
 
260
                                
 
261
                            
 
262
                        </ul>
 
263
                    </div>
 
264
                </div>
 
265
            
 
266
        </div>
 
267
    </div>
 
268
</div>
 
269
 
 
270
<script src="../assets/vendor/prettify/prettify-min.js"></script>
 
271
<script>prettyPrint();</script>
 
272
 
 
273
</body>
 
274
</html>