← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/docs/node/properties.html

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/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://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: Set and Get Properties</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 how to retrieve and use a <code>Node</code> instance 
25
 
    and access DOM properties.</p>
26
 
    <p>Press a button to get or set the <code>offsetWidth</code> of the <code>div</code> 
27
 
    containing the corn image.</p>
28
 
</div>
29
 
 
30
 
<div class="example">
31
 
<style>
32
 
.example #corn{
33
 
    position: relative;
34
 
    background: url(../assets/node/images/corn.jpg);
35
 
    width: 232px;
36
 
    height: 181px;
37
 
    -moz-box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
38
 
    -webkit-box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
39
 
    margin: 2px 0 1em;
40
 
    border: none;
41
 
}
42
 
.example #ruler{
43
 
    width: 650px;
44
 
    height: 42px;
45
 
    background: url("../assets/node/images/ruler_ticks.png") repeat-x scroll -1px 24px #DDCEB7;
46
 
}
47
 
.example .yui3-button {
48
 
    margin: 0 0.2em;
49
 
}
50
 
.example .btn-get{
51
 
    margin-left: 4em;
52
 
}
53
 
#input {
54
 
    height: 1.6em;
55
 
    width: 4em;
56
 
}
57
 
#output{
58
 
    position: absolute;
59
 
    top: -40px;
60
 
    width: 100px;
61
 
    height: 40px;
62
 
    right: -50px;
63
 
    text-align: center;
64
 
    cursor: pointer;
65
 
}
66
 
#corn .ruler-marker{
67
 
    position: absolute;
68
 
    top:  -20px;
69
 
    right: 0;
70
 
    height: 30px;
71
 
    border-right: solid 1px #f00;
72
 
}
73
 
</style>
74
 
 
75
 
<body>
76
 
    <div id="ruler"></div>
77
 
    <div id="corn">
78
 
        <div class="ruler-marker"></div>                
79
 
        <div id="output">? px</div>
80
 
    </div>
81
 
    <label>Width:</label>
82
 
    <input id="input" size="2" value="550"> px
83
 
    <button class="yui3-button btn-set">Set</button>
84
 
    <button class="yui3-button btn-get">Get</button>
85
 
<script>
86
 
YUI().use('node', 'button', function(Y) {
87
 
    var corn = Y.one('#corn'),
88
 
        input = Y.one('.example #input'),
89
 
        output = Y.one('.example #output');
90
 
 
91
 
    var getWidth = function(){
92
 
       var width = corn.get('offsetWidth');
93
 
       output.setContent(width + 'px'); // display width near the get button
94
 
    }
95
 
    
96
 
    Y.one('.example .btn-get').on('click', getWidth);
97
 
    output.on('click', getWidth); // also allows getting width by clicking on ruler width label 
98
 
 
99
 
    Y.one('.example .btn-set').on('click', function(e) {
100
 
        var value = input.get('value'),
101
 
            width = corn.get('offsetWidth');
102
 
        if (value == '') {
103
 
            input.set('value', width);
104
 
        } else if (!isNaN(parseInt(value))) { // if the value in the input is a number
105
 
            corn.set('offsetWidth', value);
106
 
            output.setContent('? ' + 'px'); // clear out the width label on the ruler
107
 
        }
108
 
    });
109
 
});
110
 
</script>
111
 
<div style="color:#aaa; display:block; font-size:90%; margin-top:1em;">Image derived from 
112
 
<a href="http://www.flickr.com/photos/29278394@N00/3934433763/" target="_blank">
113
 
"ear of corn"</a>, by normanack</div> 
114
 
</div>
115
 
 
116
 
<h2>Setting up the HTML</h2>
117
 
 
118
 
<pre class="code prettyprint">&lt;div id=&quot;ruler&quot;&gt;&lt;&#x2F;div&gt;
119
 
&lt;div id=&quot;corn&quot;&gt;
120
 
    &lt;div class=&quot;ruler-marker&quot;&gt;&lt;&#x2F;div&gt;                
121
 
    &lt;div id=&quot;output&quot;&gt;? px&lt;&#x2F;div&gt;
122
 
&lt;&#x2F;div&gt;
123
 
&lt;label&gt;Width:&lt;&#x2F;label&gt;
124
 
&lt;input id=&quot;input&quot; size=&quot;2&quot; value=&quot;550&quot;&gt; px
125
 
&lt;button class=&quot;yui3-button btn-set&quot;&gt;Set&lt;&#x2F;button&gt;
126
 
&lt;button class=&quot;yui3-button btn-get&quot;&gt;Get&lt;&#x2F;button&gt;</pre>
127
 
 
128
 
 
129
 
<h2>Getting a Node Instance</h2>
130
 
<p>The <code>Y.one</code> method accepts a Selector or HTML element and 
131
 
returns a Node instance.  First we'll set up some variables 
132
 
for the node's representing our HTML.</p>
133
 
 
134
 
<pre class="code prettyprint">var corn = Y.one(&#x27;#corn&#x27;),
135
 
    input = Y.one(&#x27;.example #input&#x27;),
136
 
    output = Y.one(&#x27;.example #output&#x27;);</pre>
137
 
 
138
 
 
139
 
<h2>Accessing Node Properties</h2>
140
 
<p>The properties of a node can be accessed via its <code>set</code> and 
141
 
<code>get</code> methods.</p>
142
 
<p>In most cases, simple type of properties (strings, numbers, Booleans) 
143
 
pass directly to/from the underlying DOM node, however properties representing 
144
 
other DOM nodes return <code>Node</code> or <code>NodeList</code> instances.</p>
145
 
 
146
 
<h3>The Get Method</h3>
147
 
<p>We can use the <code>get</code> method to read the <code>offsetWidth</code> of the <code>div</code> 
148
 
containing the corn image, 
149
 
which includes the style width, padding, and border.</p>
150
 
 
151
 
<pre class="code prettyprint">width = corn.get(&#x27;offsetWidth&#x27;);</pre>
152
 
 
153
 
 
154
 
<h3>The Set Method</h3>
155
 
<p>The Set method can be used to set the value of objects
156
 
</p>
157
 
<pre class="code prettyprint">input.set(&#x27;value&#x27;, 237);</pre>
158
 
 
159
 
 
160
 
<p>The <code>offsetWidth</code> property of an HTML element is read only, however YUI 
161
 
makes this writeable.  This assures that the final <code>offsetWidth</code> 
162
 
matches the value that is set, regardless of borders, padding, or box model.</p>
163
 
 
164
 
<pre class="code prettyprint">corn.set(&#x27;offsetWidth&#x27;, value);</pre>
165
 
 
166
 
 
167
 
<h2>Listening for Node Events</h2>
168
 
<p>We will update the value <code>offsetWidth</code> property of the <code>div</code> 
169
 
containing the corn image when the Set button is pressed. 
170
 
</p>
171
 
 
172
 
<pre class="code prettyprint">Y.one(&#x27;.example .btn-set&#x27;).on(&#x27;click&#x27;, function(e) {
173
 
    ...
174
 
    corn.set(&#x27;offsetWidth&#x27;, value);
175
 
    ...
176
 
};</pre>
177
 
 
178
 
 
179
 
<h2>Complete Example Source</h2>
180
 
<pre class="code prettyprint">&lt;style&gt;
181
 
.example #corn{
182
 
    position: relative;
183
 
    background: url(..&#x2F;assets&#x2F;node&#x2F;images&#x2F;corn.jpg);
184
 
    width: 232px;
185
 
    height: 181px;
186
 
    -moz-box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
187
 
    -webkit-box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
188
 
    margin: 2px 0 1em;
189
 
    border: none;
190
 
}
191
 
.example #ruler{
192
 
    width: 650px;
193
 
    height: 42px;
194
 
    background: url(&quot;..&#x2F;assets&#x2F;node&#x2F;images&#x2F;ruler_ticks.png&quot;) repeat-x scroll -1px 24px #DDCEB7;
195
 
}
196
 
.example .yui3-button {
197
 
    margin: 0 0.2em;
198
 
}
199
 
.example .btn-get{
200
 
    margin-left: 4em;
201
 
}
202
 
#input {
203
 
    height: 1.6em;
204
 
    width: 4em;
205
 
}
206
 
#output{
207
 
    position: absolute;
208
 
    top: -40px;
209
 
    width: 100px;
210
 
    height: 40px;
211
 
    right: -50px;
212
 
    text-align: center;
213
 
    cursor: pointer;
214
 
}
215
 
#corn .ruler-marker{
216
 
    position: absolute;
217
 
    top:  -20px;
218
 
    right: 0;
219
 
    height: 30px;
220
 
    border-right: solid 1px #f00;
221
 
}
222
 
&lt;&#x2F;style&gt;
223
 
 
224
 
&lt;body&gt;
225
 
    &lt;div id=&quot;ruler&quot;&gt;&lt;&#x2F;div&gt;
226
 
    &lt;div id=&quot;corn&quot;&gt;
227
 
        &lt;div class=&quot;ruler-marker&quot;&gt;&lt;&#x2F;div&gt;                
228
 
        &lt;div id=&quot;output&quot;&gt;? px&lt;&#x2F;div&gt;
229
 
    &lt;&#x2F;div&gt;
230
 
    &lt;label&gt;Width:&lt;&#x2F;label&gt;
231
 
    &lt;input id=&quot;input&quot; size=&quot;2&quot; value=&quot;550&quot;&gt; px
232
 
    &lt;button class=&quot;yui3-button btn-set&quot;&gt;Set&lt;&#x2F;button&gt;
233
 
    &lt;button class=&quot;yui3-button btn-get&quot;&gt;Get&lt;&#x2F;button&gt;
234
 
&lt;script&gt;
235
 
YUI().use(&#x27;node&#x27;, &#x27;button&#x27;, function(Y) {
236
 
    var corn = Y.one(&#x27;#corn&#x27;),
237
 
        input = Y.one(&#x27;.example #input&#x27;),
238
 
        output = Y.one(&#x27;.example #output&#x27;);
239
 
 
240
 
    var getWidth = function(){
241
 
       var width = corn.get(&#x27;offsetWidth&#x27;);
242
 
       output.setContent(width + &#x27;px&#x27;); &#x2F;&#x2F; display width near the get button
243
 
    }
244
 
    
245
 
    Y.one(&#x27;.example .btn-get&#x27;).on(&#x27;click&#x27;, getWidth);
246
 
    output.on(&#x27;click&#x27;, getWidth); &#x2F;&#x2F; also allows getting width by clicking on ruler width label 
247
 
 
248
 
    Y.one(&#x27;.example .btn-set&#x27;).on(&#x27;click&#x27;, function(e) {
249
 
        var value = input.get(&#x27;value&#x27;),
250
 
            width = corn.get(&#x27;offsetWidth&#x27;);
251
 
        if (value == &#x27;&#x27;) {
252
 
            input.set(&#x27;value&#x27;, width);
253
 
        } else if (!isNaN(parseInt(value))) { &#x2F;&#x2F; if the value in the input is a number
254
 
            corn.set(&#x27;offsetWidth&#x27;, value);
255
 
            output.setContent(&#x27;? &#x27; + &#x27;px&#x27;); &#x2F;&#x2F; clear out the width label on the ruler
256
 
        }
257
 
    });
258
 
});
259
 
&lt;&#x2F;script&gt;</pre>
260
 
 
261
 
</div>
262
 
            </div>
263
 
        </div>
264
 
 
265
 
        <div class="yui3-u-1-4">
266
 
            <div class="sidebar">
267
 
                
268
 
 
269
 
                
270
 
                    <div class="sidebox">
271
 
                        <div class="hd">
272
 
                            <h2 class="no-toc">Examples</h2>
273
 
                        </div>
274
 
 
275
 
                        <div class="bd">
276
 
                            <ul class="examples">
277
 
                                
278
 
                                    
279
 
                                        <li data-description="Using selectors and property accessors with Node.">
280
 
                                            <a href="properties.html">Set and Get Properties</a>
281
 
                                        </li>
282
 
                                    
283
 
                                
284
 
                                    
285
 
                                        <li data-description="Using DOM methods with Node.">
286
 
                                            <a href="dom-node.html">DOM Methods</a>
287
 
                                        </li>
288
 
                                    
289
 
                                
290
 
                                    
291
 
                                        <li data-description="Listening for DOM events with Node instances.">
292
 
                                            <a href="events.html">Handling DOM Events</a>
293
 
                                        </li>
294
 
                                    
295
 
                                
296
 
                                    
297
 
                                        <li data-description="NodeList provides Node functionality for manipulating multiple nodes at once.">
298
 
                                            <a href="nodelist.html">Using NodeList - Simple</a>
299
 
                                        </li>
300
 
                                    
301
 
                                
302
 
                                    
303
 
                                        <li data-description="How to use multiple NodeList features to build a simple game.">
304
 
                                            <a href="ducks.html">Using NodeList - Ducks Game</a>
305
 
                                        </li>
306
 
                                    
307
 
                                
308
 
                                    
309
 
                                        <li data-description="Using a single event listener to handle events on multiple nodes.">
310
 
                                            <a href="node-evt-delegation.html">Delegating Node Events</a>
311
 
                                        </li>
312
 
                                    
313
 
                                
314
 
                                    
315
 
                                        <li data-description="This example demonstrates how to position an element in page coordinates.">
316
 
                                            <a href="node-xy.html">Node Positioning</a>
317
 
                                        </li>
318
 
                                    
319
 
                                
320
 
                                    
321
 
                                        <li data-description="This example demonstrates how to set styles and get style information.">
322
 
                                            <a href="node-style.html">Node Styling</a>
323
 
                                        </li>
324
 
                                    
325
 
                                
326
 
                                    
327
 
                                        <li data-description="This example demonstrates how to insert content into a Node.">
328
 
                                            <a href="node-insert.html">Adding Node Content</a>
329
 
                                        </li>
330
 
                                    
331
 
                                
332
 
                                    
333
 
                                        <li data-description="This example demonstrates how to show and hide a Node.">
334
 
                                            <a href="node-view.html">Showing and Hiding</a>
335
 
                                        </li>
336
 
                                    
337
 
                                
338
 
                                    
339
 
                                
340
 
                                    
341
 
                                
342
 
                                    
343
 
                                
344
 
                                    
345
 
                                
346
 
                                    
347
 
                                
348
 
                                    
349
 
                                
350
 
                                    
351
 
                                
352
 
                            </ul>
353
 
                        </div>
354
 
                    </div>
355
 
                
356
 
 
357
 
                
358
 
                    <div class="sidebox">
359
 
                        <div class="hd">
360
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
361
 
                        </div>
362
 
 
363
 
                        <div class="bd">
364
 
                            <ul class="examples">
365
 
                                
366
 
                                    
367
 
                                
368
 
                                    
369
 
                                
370
 
                                    
371
 
                                
372
 
                                    
373
 
                                
374
 
                                    
375
 
                                
376
 
                                    
377
 
                                
378
 
                                    
379
 
                                
380
 
                                    
381
 
                                
382
 
                                    
383
 
                                
384
 
                                    
385
 
                                
386
 
                                    
387
 
                                        <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.">
388
 
                                            <a href="../node-focusmanager/node-focusmanager-1.html">Accessible Toolbar</a>
389
 
                                        </li>
390
 
                                    
391
 
                                
392
 
                                    
393
 
                                        <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.">
394
 
                                            <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
395
 
                                        </li>
396
 
                                    
397
 
                                
398
 
                                    
399
 
                                        <li data-description="Use the Event Utility to attach simple DOM event handlers.">
400
 
                                            <a href="../event/basic-example.html">Simple DOM Events</a>
401
 
                                        </li>
402
 
                                    
403
 
                                
404
 
                                    
405
 
                                        <li data-description="Use IO to request XML data from a remote web service.">
406
 
                                            <a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
407
 
                                        </li>
408
 
                                    
409
 
                                
410
 
                                    
411
 
                                        <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
412
 
                                            <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
413
 
                                        </li>
414
 
                                    
415
 
                                
416
 
                                    
417
 
                                        <li data-description="Example Photo Browser application.">
418
 
                                            <a href="../dd/photo-browser.html">Photo Browser</a>
419
 
                                        </li>
420
 
                                    
421
 
                                
422
 
                                    
423
 
                                        <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
424
 
                                            <a href="../dd/portal-drag.html">Portal Style Example</a>
425
 
                                        </li>
426
 
                                    
427
 
                                
428
 
                            </ul>
429
 
                        </div>
430
 
                    </div>
431
 
                
432
 
            </div>
433
 
        </div>
434
 
    </div>
435
 
</div>
436
 
 
437
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
438
 
<script>prettyPrint();</script>
439
 
 
440
 
</body>
441
 
</html>