← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« 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-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

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>