← Back to branch summary

~ubuntu-branches/ubuntu/precise/maas/precise-security

« back to all changes in this revision

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

Tags: 1.2+bzr1373+dfsg-0ubuntu1~12.04.4
https://launchpad.net/bugs/1039513
https://launchpad.net/bugs/1158425
* SECURITY UPDATE: failure to authenticate downloaded content (LP: #1039513)
  - debian/patches/CVE-2013-1058.patch: Authenticate downloaded files with
    GnuPG and MD5SUM files. Thanks to Julian Edwards.
  - CVE-2013-1058
* SECURITY UPDATE: configuration options may be loaded from current working
  directory (LP: #1158425)
  - debian/patches/CVE-2013-1057-1-2.patch: Do not load configuration
    options from the current working directory. Thanks to Julian Edwards.
  - CVE-2013-1057

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/node/dom-node.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: DOM Methods</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: DOM Methods</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><link href="../assets/node/node.css" rel="stylesheet" type="text/css">
21
 
 
22
 
<div class="intro">
23
 
    <p>Click any of the blue boxes to copy to the other stack.</p>
24
 
    <p>Click a box in the other stack to remove it completely.</p>
25
 
</div>
26
 
 
27
 
<div class="example">
28
 
<ul id="demo">
29
 
    <li>lorem</li>
30
 
    <li>ipsum</li>
31
 
    <li>dolor</li>
32
 
    <li>sit</li>
33
 
</ul>
34
 
 
35
 
<ul id="demo2">
36
 
    <li>foo</li>
37
 
    <li>bar</li>
38
 
</ul>
39
 
 
40
 
<script type="text/javascript">
41
 
YUI().use('node', function(Y) {
42
 
    var onClick = function(e) {
43
 
        var item = e.currentTarget,
44
 
            list2 = Y.one('#demo2');
45
 
 
46
 
        if (item.get('parentNode') === list2) { // remove if list2
47
 
            item.remove(); // sugar for item.get('parentNode').removeChild(item);
48
 
 
49
 
            if (list2.all('li').size() < 1) { // hide the list if its empty
50
 
                list2.hide();
51
 
            }
52
 
        } else {
53
 
            if (list2.getStyle('display') === 'none') {
54
 
                list2.show();
55
 
            }
56
 
 
57
 
            list2.append(item.cloneNode(true));
58
 
        }
59
 
        
60
 
    };
61
 
 
62
 
    Y.one('#demo').delegate('click', onClick, 'li');
63
 
    Y.one('#demo2').delegate('click', onClick, 'li');
64
 
});
65
 
</script>
66
 
 
67
 
</div>
68
 
 
69
 
<h2>Setting up the HTML</h2>
70
 
<p>First we need some HTML to work with.</p>
71
 
<pre class="code prettyprint">&lt;ul id=&quot;demo&quot;&gt;
72
 
    &lt;li&gt;lorem&lt;&#x2F;li&gt;
73
 
    &lt;li&gt;ipsum&lt;&#x2F;li&gt;
74
 
    &lt;li&gt;dolor&lt;&#x2F;li&gt;
75
 
    &lt;li&gt;sit&lt;&#x2F;li&gt;
76
 
&lt;&#x2F;ul&gt;
77
 
 
78
 
&lt;ul id=&quot;demo2&quot;&gt;
79
 
    &lt;li&gt;foo&lt;&#x2F;li&gt;
80
 
    &lt;li&gt;bar&lt;&#x2F;li&gt;
81
 
&lt;&#x2F;ul&gt;</pre>
82
 
 
83
 
<h2>Using DOM Methods</h2>
84
 
<p>Most common DOM methods are available via Node instances. These can be used to add, remove, and retrieve other nodes.</p>
85
 
<pre class="code prettyprint">clone = item.cloneNode(true);
86
 
list2.append(clone);
87
 
item.remove(); &#x2F;&#x2F; sugar for item.get(&#x27;parentNode&#x27;).removeChild(item);</pre>
88
 
 
89
 
 
90
 
<h2>Complete Example Source</h2>
91
 
<pre class="code prettyprint">&lt;ul id=&quot;demo&quot;&gt;
92
 
    &lt;li&gt;lorem&lt;&#x2F;li&gt;
93
 
    &lt;li&gt;ipsum&lt;&#x2F;li&gt;
94
 
    &lt;li&gt;dolor&lt;&#x2F;li&gt;
95
 
    &lt;li&gt;sit&lt;&#x2F;li&gt;
96
 
&lt;&#x2F;ul&gt;
97
 
 
98
 
&lt;ul id=&quot;demo2&quot;&gt;
99
 
    &lt;li&gt;foo&lt;&#x2F;li&gt;
100
 
    &lt;li&gt;bar&lt;&#x2F;li&gt;
101
 
&lt;&#x2F;ul&gt;
102
 
 
103
 
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
104
 
YUI().use(&#x27;node&#x27;, function(Y) {
105
 
    var onClick = function(e) {
106
 
        var item = e.currentTarget,
107
 
            list2 = Y.one(&#x27;#demo2&#x27;);
108
 
 
109
 
        if (item.get(&#x27;parentNode&#x27;) === list2) { &#x2F;&#x2F; remove if list2
110
 
            item.remove(); &#x2F;&#x2F; sugar for item.get(&#x27;parentNode&#x27;).removeChild(item);
111
 
 
112
 
            if (list2.all(&#x27;li&#x27;).size() &lt; 1) { &#x2F;&#x2F; hide the list if its empty
113
 
                list2.hide();
114
 
            }
115
 
        } else {
116
 
            if (list2.getStyle(&#x27;display&#x27;) === &#x27;none&#x27;) {
117
 
                list2.show();
118
 
            }
119
 
 
120
 
            list2.append(item.cloneNode(true));
121
 
        }
122
 
        
123
 
    };
124
 
 
125
 
    Y.one(&#x27;#demo&#x27;).delegate(&#x27;click&#x27;, onClick, &#x27;li&#x27;);
126
 
    Y.one(&#x27;#demo2&#x27;).delegate(&#x27;click&#x27;, onClick, &#x27;li&#x27;);
127
 
});
128
 
&lt;&#x2F;script&gt;</pre>
129
 
 
130
 
</div>
131
 
        </div>
132
 
 
133
 
        <div id="sidebar" class="yui3-u">
134
 
            
135
 
 
136
 
            
137
 
                <div class="sidebox">
138
 
                    <div class="hd">
139
 
                        <h2 class="no-toc">Examples</h2>
140
 
                    </div>
141
 
 
142
 
                    <div class="bd">
143
 
                        <ul class="examples">
144
 
                            
145
 
                                
146
 
                                    <li data-description="Using selectors and property accessors with Node.">
147
 
                                        <a href="properties.html">Set and Get Properties</a>
148
 
                                    </li>
149
 
                                
150
 
                            
151
 
                                
152
 
                                    <li data-description="Using DOM methods with Node.">
153
 
                                        <a href="dom-node.html">DOM Methods</a>
154
 
                                    </li>
155
 
                                
156
 
                            
157
 
                                
158
 
                                    <li data-description="Listening for DOM events with Node instances.">
159
 
                                        <a href="events.html">Handling DOM Events</a>
160
 
                                    </li>
161
 
                                
162
 
                            
163
 
                                
164
 
                                    <li data-description="NodeList provides Node functionality for multiple nodes.">
165
 
                                        <a href="nodelist.html">NodeList</a>
166
 
                                    </li>
167
 
                                
168
 
                            
169
 
                                
170
 
                                    <li data-description="Using a single event listener to handle events on multiple nodes.">
171
 
                                        <a href="node-evt-delegation.html">Delegating Node Events</a>
172
 
                                    </li>
173
 
                                
174
 
                            
175
 
                                
176
 
                                    <li data-description="This example demonstrates how to position an element in page coordinates.">
177
 
                                        <a href="node-xy.html">Node Positioning</a>
178
 
                                    </li>
179
 
                                
180
 
                            
181
 
                                
182
 
                                    <li data-description="This example demonstrates how to set styles and get style information.">
183
 
                                        <a href="node-style.html">Node Styling</a>
184
 
                                    </li>
185
 
                                
186
 
                            
187
 
                                
188
 
                                    <li data-description="This example demonstrates how to insert content into a Node.">
189
 
                                        <a href="node-insert.html">Adding Node Content</a>
190
 
                                    </li>
191
 
                                
192
 
                            
193
 
                                
194
 
                                    <li data-description="This example demonstrates how to show and hide a Node.">
195
 
                                        <a href="node-view.html">Showing and Hiding</a>
196
 
                                    </li>
197
 
                                
198
 
                            
199
 
                                
200
 
                            
201
 
                                
202
 
                            
203
 
                                
204
 
                            
205
 
                                
206
 
                            
207
 
                                
208
 
                            
209
 
                                
210
 
                            
211
 
                                
212
 
                            
213
 
                        </ul>
214
 
                    </div>
215
 
                </div>
216
 
            
217
 
 
218
 
            
219
 
                <div class="sidebox">
220
 
                    <div class="hd">
221
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
222
 
                    </div>
223
 
 
224
 
                    <div class="bd">
225
 
                        <ul class="examples">
226
 
                            
227
 
                                
228
 
                            
229
 
                                
230
 
                            
231
 
                                
232
 
                            
233
 
                                
234
 
                            
235
 
                                
236
 
                            
237
 
                                
238
 
                            
239
 
                                
240
 
                            
241
 
                                
242
 
                            
243
 
                                
244
 
                            
245
 
                                
246
 
                                    <li data-description="Use the Event Utility to attach simple DOM event handlers.">
247
 
                                        <a href="../event/basic-example.html">Simple DOM Events</a>
248
 
                                    </li>
249
 
                                
250
 
                            
251
 
                                
252
 
                                    <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.">
253
 
                                        <a href="../node-focusmanager/node-focusmanager-1.html">Accessible Toolbar</a>
254
 
                                    </li>
255
 
                                
256
 
                            
257
 
                                
258
 
                                    <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.">
259
 
                                        <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
260
 
                                    </li>
261
 
                                
262
 
                            
263
 
                                
264
 
                                    <li data-description="Use IO to request XML data from a remote web service.">
265
 
                                        <a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
266
 
                                    </li>
267
 
                                
268
 
                            
269
 
                                
270
 
                                    <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
271
 
                                        <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
272
 
                                    </li>
273
 
                                
274
 
                            
275
 
                                
276
 
                                    <li data-description="Example Photo Browser application.">
277
 
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
278
 
                                    </li>
279
 
                                
280
 
                            
281
 
                                
282
 
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
283
 
                                        <a href="../dd/portal-drag.html">Portal Style Example</a>
284
 
                                    </li>
285
 
                                
286
 
                            
287
 
                        </ul>
288
 
                    </div>
289
 
                </div>
290
 
            
291
 
        </div>
292
 
    </div>
293
 
</div>
294
 
 
295
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
296
 
<script>prettyPrint();</script>
297
 
 
298
 
</body>
299
 
</html>