← 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/properties.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/properties.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Set and Get Properties</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: Set and Get Properties</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
 
<div class="intro">
22
 
    <p>This example demonstrates how to retrieve and use a <code>Node</code> instance and access DOM properties.</p>
23
 
    <p>Press the button to get or set the <code>FORM</code>'s <code>offsetWidth</code>.</p>
24
 
</div>
25
 
 
26
 
<div class="example">
27
 
<form id="demo" action="#">
28
 
    <label>Width:</label>
29
 
    <input name="width" size="2">
30
 
    <input type="submit" value="Run">
31
 
</form>
32
 
 
33
 
<script type="text/javascript">
34
 
YUI().use('node', function(Y) {
35
 
    var form = Y.one('#demo'),
36
 
        input = Y.one('#demo input[name=width]'),
37
 
        button = Y.one('#demo input[type=submit]');
38
 
 
39
 
    form.on('submit', function(e) {
40
 
       e.preventDefault(); // keep the form from submitting
41
 
 
42
 
       var value = input.get('value'),
43
 
            width = form.get('offsetWidth');
44
 
 
45
 
       if (value == '') {
46
 
           input.set('value', width);
47
 
       } else if (!isNaN(parseInt(value))) {
48
 
            form.set('offsetWidth', value);
49
 
       }
50
 
    });
51
 
});
52
 
</script>
53
 
 
54
 
</div>
55
 
 
56
 
<h2>Setting up the HTML</h2>
57
 
 
58
 
<pre class="code prettyprint">&lt;form id=&quot;demo&quot; action=&quot;#&quot;&gt;
59
 
    &lt;label&gt;How wide is this form?&lt;&#x2F;label&gt;
60
 
    &lt;input name=&quot;width&quot; size=&quot;2&quot;&gt;
61
 
    &lt;input type=&quot;submit&quot; value=&quot;Show Me&quot;&gt;
62
 
&lt;&#x2F;form&gt;</pre>
63
 
 
64
 
 
65
 
<h2>Getting a Node Instance</h2>
66
 
<p>The <code>Y.one</code> method accepts a Selector or HTML element and returns a Node instance.  Let's go ahead and set up some variables for the node's representing our HTML.</p>
67
 
 
68
 
<pre class="code prettyprint">var form = Y.one(&#x27;#demo&#x27;),
69
 
    input = Y.one(&#x27;#demo input[name=width]&#x27;),
70
 
    button = Y.one(&#x27;#demo input[type=submit]&#x27;);</pre>
71
 
 
72
 
 
73
 
<h2>Accessing Node Properties</h2>
74
 
<p>The properties of a node can be accessed via its <code>set</code> and <code>get</code> methods.</p>
75
 
<p>In most cases, simple type of properties (strings, numbers, booleans) pass directly to/from the underlying DOM node, however properties representing other DOM nodes return <code>Node</code> or <code>NodeList</code> instances.</p>
76
 
 
77
 
<h3>The Get Method</h3>
78
 
<p>We can use the <code>get</code> method to read the <code>FORM</code> element's offsetWidth, which includes the style width, padding, and border.</p>
79
 
 
80
 
<pre class="code prettyprint">width = form.get(&#x27;offsetWidth&#x27;);</pre>
81
 
 
82
 
 
83
 
<h3>The Set Method</h3>
84
 
<p>The <code>set</code> method allows us to update the value of the <code>INPUT</code> element with the value of the <code>FORM</code>'s <code>offsetWidth</code> property.</p>
85
 
 
86
 
<pre class="code prettyprint">input.set(&#x27;value&#x27;, width);</pre>
87
 
 
88
 
 
89
 
<h3>Setting the Offset Width</h3>
90
 
<p>The <code>offsetWidth</code> property of an HTML element is read only, however YUI makes this writeable as well.  This assures that the final <code>offsetWidth</code> matches the value that is set, regardless of borders, padding, or box model.</p>
91
 
 
92
 
<pre class="code prettyprint">form.set(&#x27;offsetWidth&#x27;, value);</pre>
93
 
 
94
 
 
95
 
<h2>Listening for Node Events</h2>
96
 
<p>We will update the value of the <code>INPUT</code> when the <code>BUTTON</code> is pressed. The <code>FORM</code>'s default action can be suppressed using the incoming Event object's <code>preventDefault()</code> method.</p>
97
 
 
98
 
<pre class="code prettyprint">button.on(&#x27;click&#x27;, function(e) {
99
 
    e.preventDefault();
100
 
};</pre>
101
 
 
102
 
 
103
 
<h2>Complete Example Source</h2>
104
 
<pre class="code prettyprint">&lt;form id=&quot;demo&quot; action=&quot;#&quot;&gt;
105
 
    &lt;label&gt;Width:&lt;&#x2F;label&gt;
106
 
    &lt;input name=&quot;width&quot; size=&quot;2&quot;&gt;
107
 
    &lt;input type=&quot;submit&quot; value=&quot;Run&quot;&gt;
108
 
&lt;&#x2F;form&gt;
109
 
 
110
 
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
111
 
YUI().use(&#x27;node&#x27;, function(Y) {
112
 
    var form = Y.one(&#x27;#demo&#x27;),
113
 
        input = Y.one(&#x27;#demo input[name=width]&#x27;),
114
 
        button = Y.one(&#x27;#demo input[type=submit]&#x27;);
115
 
 
116
 
    form.on(&#x27;submit&#x27;, function(e) {
117
 
       e.preventDefault(); &#x2F;&#x2F; keep the form from submitting
118
 
 
119
 
       var value = input.get(&#x27;value&#x27;),
120
 
            width = form.get(&#x27;offsetWidth&#x27;);
121
 
 
122
 
       if (value == &#x27;&#x27;) {
123
 
           input.set(&#x27;value&#x27;, width);
124
 
       } else if (!isNaN(parseInt(value))) {
125
 
            form.set(&#x27;offsetWidth&#x27;, value);
126
 
       }
127
 
    });
128
 
});
129
 
&lt;&#x2F;script&gt;</pre>
130
 
 
131
 
</div>
132
 
        </div>
133
 
 
134
 
        <div id="sidebar" class="yui3-u">
135
 
            
136
 
 
137
 
            
138
 
                <div class="sidebox">
139
 
                    <div class="hd">
140
 
                        <h2 class="no-toc">Examples</h2>
141
 
                    </div>
142
 
 
143
 
                    <div class="bd">
144
 
                        <ul class="examples">
145
 
                            
146
 
                                
147
 
                                    <li data-description="Using selectors and property accessors with Node.">
148
 
                                        <a href="properties.html">Set and Get Properties</a>
149
 
                                    </li>
150
 
                                
151
 
                            
152
 
                                
153
 
                                    <li data-description="Using DOM methods with Node.">
154
 
                                        <a href="dom-node.html">DOM Methods</a>
155
 
                                    </li>
156
 
                                
157
 
                            
158
 
                                
159
 
                                    <li data-description="Listening for DOM events with Node instances.">
160
 
                                        <a href="events.html">Handling DOM Events</a>
161
 
                                    </li>
162
 
                                
163
 
                            
164
 
                                
165
 
                                    <li data-description="NodeList provides Node functionality for multiple nodes.">
166
 
                                        <a href="nodelist.html">NodeList</a>
167
 
                                    </li>
168
 
                                
169
 
                            
170
 
                                
171
 
                                    <li data-description="Using a single event listener to handle events on multiple nodes.">
172
 
                                        <a href="node-evt-delegation.html">Delegating Node Events</a>
173
 
                                    </li>
174
 
                                
175
 
                            
176
 
                                
177
 
                                    <li data-description="This example demonstrates how to position an element in page coordinates.">
178
 
                                        <a href="node-xy.html">Node Positioning</a>
179
 
                                    </li>
180
 
                                
181
 
                            
182
 
                                
183
 
                                    <li data-description="This example demonstrates how to set styles and get style information.">
184
 
                                        <a href="node-style.html">Node Styling</a>
185
 
                                    </li>
186
 
                                
187
 
                            
188
 
                                
189
 
                                    <li data-description="This example demonstrates how to insert content into a Node.">
190
 
                                        <a href="node-insert.html">Adding Node Content</a>
191
 
                                    </li>
192
 
                                
193
 
                            
194
 
                                
195
 
                                    <li data-description="This example demonstrates how to show and hide a Node.">
196
 
                                        <a href="node-view.html">Showing and Hiding</a>
197
 
                                    </li>
198
 
                                
199
 
                            
200
 
                                
201
 
                            
202
 
                                
203
 
                            
204
 
                                
205
 
                            
206
 
                                
207
 
                            
208
 
                                
209
 
                            
210
 
                                
211
 
                            
212
 
                                
213
 
                            
214
 
                        </ul>
215
 
                    </div>
216
 
                </div>
217
 
            
218
 
 
219
 
            
220
 
                <div class="sidebox">
221
 
                    <div class="hd">
222
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
223
 
                    </div>
224
 
 
225
 
                    <div class="bd">
226
 
                        <ul class="examples">
227
 
                            
228
 
                                
229
 
                            
230
 
                                
231
 
                            
232
 
                                
233
 
                            
234
 
                                
235
 
                            
236
 
                                
237
 
                            
238
 
                                
239
 
                            
240
 
                                
241
 
                            
242
 
                                
243
 
                            
244
 
                                
245
 
                            
246
 
                                
247
 
                                    <li data-description="Use the Event Utility to attach simple DOM event handlers.">
248
 
                                        <a href="../event/basic-example.html">Simple DOM Events</a>
249
 
                                    </li>
250
 
                                
251
 
                            
252
 
                                
253
 
                                    <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.">
254
 
                                        <a href="../node-focusmanager/node-focusmanager-1.html">Accessible Toolbar</a>
255
 
                                    </li>
256
 
                                
257
 
                            
258
 
                                
259
 
                                    <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.">
260
 
                                        <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
261
 
                                    </li>
262
 
                                
263
 
                            
264
 
                                
265
 
                                    <li data-description="Use IO to request XML data from a remote web service.">
266
 
                                        <a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
267
 
                                    </li>
268
 
                                
269
 
                            
270
 
                                
271
 
                                    <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
272
 
                                        <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
273
 
                                    </li>
274
 
                                
275
 
                            
276
 
                                
277
 
                                    <li data-description="Example Photo Browser application.">
278
 
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
279
 
                                    </li>
280
 
                                
281
 
                            
282
 
                                
283
 
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
284
 
                                        <a href="../dd/portal-drag.html">Portal Style Example</a>
285
 
                                    </li>
286
 
                                
287
 
                            
288
 
                        </ul>
289
 
                    </div>
290
 
                </div>
291
 
            
292
 
        </div>
293
 
    </div>
294
 
</div>
295
 
 
296
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
297
 
<script>prettyPrint();</script>
298
 
 
299
 
</body>
300
 
</html>