← Back to branch summary

~ubuntu-branches/ubuntu/precise/maas/precise-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/tabview/tabview-add-remove.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/tabview/tabview-add-remove.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Adding and Removing Tabs</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: Adding and Removing Tabs</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><style scoped>
21
 
.yui3-tabview {
22
 
    margin-bottom: 1em;
23
 
}
24
 
 
25
 
.yui3-skin-sam .yui3-tab {
26
 
    position: relative;
27
 
}
28
 
 
29
 
.yui3-skin-sam .yui3-tabview-removeable .yui3-tab-label,
30
 
.yui3-skin-sam .yui3-tabview-removeable .yui3-tab-selected .yui3-tab-label {
31
 
    padding-right: 1.3em; /* make room for close link */
32
 
}
33
 
 
34
 
.yui3-skin-sam .yui3-tabview-removeable .yui3-tab-add {
35
 
    padding-right: 0.75em; /* no close link for add tab link */
36
 
}
37
 
 
38
 
.yui3-skin-sam .yui3-tab-add {
39
 
    color: #999;
40
 
    font: bold 120%/1 verdana;
41
 
    margin-left: 0.25em;
42
 
}
43
 
 
44
 
.yui3-tab-remove {
45
 
    color: #999;
46
 
    font:bold 80% verdana;
47
 
    position: absolute;
48
 
    right: 0.4em;
49
 
    top: 0.4em;
50
 
}
51
 
 
52
 
.yui3-tab-remove:hover {
53
 
    color: #666;
54
 
}
55
 
 
56
 
.yui3-skin-sam .yui3-tab-selected .yui3-tab-remove {
57
 
    top: 0.52em;
58
 
}
59
 
 
60
 
.yui3-skin-sam .yui3-tab-selected .yui3-tab-remove:hover {
61
 
    color: #fff;
62
 
}
63
 
 
64
 
#main #example-canvas .yui3-tabview .yui3-tab-selected a {
65
 
        color:white;
66
 
}
67
 
 
68
 
</style>
69
 
<div class="intro">
70
 
    <p>This example shows how to give <code>TabView</code> buttons for adding and removing tabs.</p>
71
 
</div>
72
 
 
73
 
<div class="example yui3-skin-sam">
74
 
<div id="demo">
75
 
    <ul>
76
 
        <li><a href="#foo">foo</a></li>
77
 
        <li><a href="#bar">bar</a></li>
78
 
        <li><a href="#baz">baz</a></li>
79
 
    </ul>
80
 
    <div>
81
 
        <div id="foo">
82
 
            <p>foo content</p>
83
 
        </div>
84
 
        <div id="bar">
85
 
            <p>bar content</p>
86
 
        </div>
87
 
        <div id="baz">
88
 
            <p>baz content</p>
89
 
        </div>
90
 
    </div>
91
 
</div>
92
 
 
93
 
<div id="demo2">
94
 
</div>
95
 
 
96
 
<div id="demo3">
97
 
</div>
98
 
 
99
 
<script type="text/javascript">
100
 
YUI().use('tabview', 'escape', 'plugin', function(Y) {
101
 
    var Addable = function(config) {
102
 
        Addable.superclass.constructor.apply(this, arguments);
103
 
    };
104
 
 
105
 
    Addable.NAME = 'addableTabs';
106
 
    Addable.NS = 'addable';
107
 
 
108
 
    Y.extend(Addable, Y.Plugin.Base, {
109
 
        ADD_TEMPLATE: '<li class="yui3-tab" title="add a tab">' +
110
 
                    '<a class="yui3-tab-label yui3-tab-add">+</a></li>',
111
 
 
112
 
        initializer: function(config) {
113
 
            var tabview = this.get('host');
114
 
            tabview.after('render', this.afterRender, this);
115
 
            tabview.get('contentBox')
116
 
                .delegate('click', this.onAddClick, '.yui3-tab-add', this);
117
 
        },
118
 
 
119
 
        getTabInput: function() {
120
 
            var tabview = this.get('host');
121
 
            return {
122
 
                label: Y.Escape.html(window.prompt('label:', 'new tab')),
123
 
                content: '<p>' + Y.Escape.html(window.prompt('content:', 'new content')) + '</p>',
124
 
                index: Number(window.prompt('index:', tabview.size()))
125
 
            }
126
 
        },
127
 
 
128
 
        afterRender: function(e) {
129
 
            var tabview = this.get('host');
130
 
            tabview.get('contentBox').one('> ul').append(this.ADD_TEMPLATE);
131
 
        },
132
 
 
133
 
        onAddClick: function(e) {
134
 
            e.stopPropagation();
135
 
            var tabview = this.get('host'),
136
 
                input = this.getTabInput();
137
 
            tabview.add(input, input.index);
138
 
        }
139
 
    });
140
 
 
141
 
    var Removeable = function(config) {
142
 
        Removeable.superclass.constructor.apply(this, arguments);
143
 
    };
144
 
 
145
 
    Removeable.NAME = 'removeableTabs';
146
 
    Removeable.NS = 'removeable';
147
 
 
148
 
    Y.extend(Removeable, Y.Plugin.Base, {
149
 
        REMOVE_TEMPLATE: '<a class="yui3-tab-remove" title="remove tab">x</a>',
150
 
 
151
 
        initializer: function(config) {
152
 
            var tabview = this.get('host'),
153
 
                cb = tabview.get('contentBox');
154
 
 
155
 
            cb.addClass('yui3-tabview-removeable');
156
 
            cb.delegate('click', this.onRemoveClick, '.yui3-tab-remove', this);
157
 
 
158
 
            // Tab events bubble to TabView
159
 
            tabview.after('tab:render', this.afterTabRender, this);
160
 
        },
161
 
 
162
 
        afterTabRender: function(e) {
163
 
            // boundingBox is the Tab's LI
164
 
            e.target.get('boundingBox').append(this.REMOVE_TEMPLATE);
165
 
        },
166
 
 
167
 
        onRemoveClick: function(e) {
168
 
            e.stopPropagation();
169
 
            var tab = Y.Widget.getByNode(e.target);
170
 
            tab.remove();
171
 
        }
172
 
    });
173
 
 
174
 
    var tabview = new Y.TabView({
175
 
        srcNode: '#demo',
176
 
        plugins: [Addable]
177
 
    });
178
 
 
179
 
    var tabview2 = new Y.TabView({
180
 
        children: [{
181
 
            label: 'foo',
182
 
            content: '<p>foo content</p>'
183
 
        }, {
184
 
            label: 'bar',
185
 
            content: '<p>bar content</p>'
186
 
        }, {
187
 
            label: 'baz',
188
 
            content: '<p>baz content</p>'
189
 
        }],
190
 
        plugins: [Removeable]
191
 
    });
192
 
 
193
 
    var tabview3 = new Y.TabView({
194
 
        children: [{
195
 
            label: 'foo',
196
 
            content: '<p>foo content</p>'
197
 
        }, {
198
 
            label: 'bar',
199
 
            content: '<p>bar content</p>'
200
 
        }, {
201
 
            label: 'baz',
202
 
            content: '<p>bar content</p>'
203
 
        }],
204
 
        plugins: [Addable, Removeable]
205
 
    });
206
 
 
207
 
    tabview.render();
208
 
    tabview2.render('#demo2');
209
 
    tabview3.render('#demo3');
210
 
});
211
 
</script>
212
 
 
213
 
</div>
214
 
 
215
 
<h2>Plugin Template</h2>
216
 
 
217
 
<p>In order to make these addons reusable, we can build them as plugins.  This
218
 
allows the option for multiple tabviews that mix and match functionality.
219
 
To get started, we will first fill in a basic <code>Plugin</code> template.
220
 
The <code>NAME</code> property is required to prefix events, classNames, et cetera.
221
 
The <code>NS</code> is the namespace where the plugin will live on the
222
 
<code>host</code>.  This is where its API can be accessed (e.g. "node.addable.destroy()").
223
 
Adding the <code>this._host</code> alias provides a convenient way to get back to the TabView
224
 
instance. Calling the superclass constructor kicks off the <code>Base</code> lifecycle,
225
 
which will call the <code>initializer</code>.
226
 
 
227
 
</p>
228
 
 
229
 
<pre class="code prettyprint">var Addable = function(config) {
230
 
    this._host = config.host;
231
 
    Addable.superclass.constructor.apply(this, arguments);
232
 
};
233
 
 
234
 
Addable.NAME = &#x27;addableTabs&#x27;;
235
 
Addable.NS = &#x27;addable&#x27;;
236
 
 
237
 
Y.extend(Addable, Y.Plugin.Base, {
238
 
    initializer: function(config) {
239
 
    }
240
 
});</pre>
241
 
 
242
 
 
243
 
<h2>Addable Tab Plugin</h2>
244
 
 
245
 
<p>To simplify adding new tabs, we are going to add a button that
246
 
users can click and that will prompt them for some details regarding the new tab.
247
 
The main task we are trying to accomplish is to add some HTML to the
248
 
<code>TabView</code>, listen for clicks on the button, prompt the user for input,
249
 
and update the tabs accordingly.</p>
250
 
 
251
 
<h3>HTML Template</h3>
252
 
<p>The first thing we need is a template for the markup to be generated.  Adding
253
 
this to the prototype allows separate customization for each <code>TabView</code>
254
 
instance. For this example, we want it to look and feel like another <code>Tab</code>
255
 
without actually being one.</p> 
256
 
 
257
 
<pre class="code prettyprint">Y.extend(Addable, Y.Plugin.Base, {
258
 
    ADD_TEMPLATE: &#x27;&lt;li class=&quot;yui3-tab&quot; title=&quot;add a tab&quot;&gt;&#x27; +
259
 
                &#x27;&lt;a class=&quot;yui3-tab-label yui3-tab-add&quot;&gt;+&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;&#x27;,
260
 
 
261
 
    initializer: function(config) {
262
 
    }
263
 
});</pre>
264
 
 
265
 
 
266
 
<h3>Adding the HTML</h3>
267
 
<p>Now that we have a markup template, we will need to add it to the <code>TabView</code>
268
 
somehow.  The <code>render</code> phase is the appropriate moment to do so.  Listening
269
 
for the <code>render</code> event will give us access to that moment.  Listening
270
 
for <code>after('render')</code> ensure that the rendering has actually happened. Then
271
 
we just need to find the tab list and, using the template, add the new item.
272
 
The <code>contentBox</code> provides a <code>Node</code> that can be used to manage
273
 
the <code>TabView</code> HTML.</p> 
274
 
 
275
 
<pre class="code prettyprint">Y.extend(Addable, Y.Plugin.Base, {
276
 
    ADD_TEMPLATE: &#x27;&lt;li class=&quot;yui3-tab&quot; title=&quot;add a tab&quot;&gt;&#x27; +
277
 
                &#x27;&lt;a class=&quot;yui3-tab-label yui3-tab-add&quot;&gt;+&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;&#x27;,
278
 
 
279
 
    initializer: function(config) {
280
 
        var tabview = this.get(&#x27;host&#x27;);
281
 
        tabview.after(&#x27;render&#x27;, this.afterRender, this);
282
 
    },
283
 
 
284
 
    afterRender: function(e) {
285
 
        var tabview = this.get(&#x27;host&#x27;);
286
 
        tabview.get(&#x27;contentBox&#x27;).one(&#x27;&gt; ul&#x27;).append(this.ADD_TEMPLATE);
287
 
    }
288
 
});</pre>
289
 
 
290
 
 
291
 
<h3>Handling the Click</h3>
292
 
<p>All that remains is to listen for clicks on the add button and prompt
293
 
the user for the relevant <code>Tab</code> data.  Again we can leverage
294
 
the <code>Node</code> API, this time to delegate clicks on the add button.
295
 
Stopping event propagation in our handler ensures that the event does
296
 
not bubble any further, preventing the <code>TabView</code> from trying
297
 
to handle it. To keep the example simple, a basic <code>prompt</code> is
298
 
used to get the user input.  This could be refined to use an
299
 
<code>Overlay</code> or other custom control.  The data is then handed off
300
 
to <code>TabView</code>'s <code>add</code> method.</p> 
301
 
 
302
 
<pre class="code prettyprint">Y.extend(Addable, Y.Plugin.Base, {
303
 
    ADD_TEMPLATE: &#x27;&lt;li class=&quot;yui3-tab&quot; title=&quot;add a tab&quot;&gt;&#x27; +
304
 
                &#x27;&lt;a class=&quot;yui3-tab-label yui3-tab-add&quot;&gt;+&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;&#x27;,
305
 
 
306
 
    initializer: function(config) {
307
 
        var tabview = this.get(&#x27;host&#x27;);
308
 
        tabview.after(&#x27;render&#x27;, this.afterRender, this);
309
 
 
310
 
        tabview.get(&#x27;contentBox&#x27;)
311
 
            .delegate(&#x27;click&#x27;, this.onAddClick, &#x27;.yui3-tab-add&#x27;, this);
312
 
    },
313
 
 
314
 
    afterRender: function(e) {
315
 
        this.get(&#x27;host&#x27;).get(&#x27;contentBox&#x27;).one(&#x27;&gt; ul&#x27;).append(this.ADD_TEMPLATE);
316
 
    },
317
 
 
318
 
    getTabInput: function() {
319
 
        return {
320
 
            label: window.prompt(&#x27;label:&#x27;, &#x27;new tab&#x27;),
321
 
            content: window.prompt(&#x27;content:&#x27;, &#x27;&lt;p&gt;new content&lt;&#x2F;p&gt;&#x27;),
322
 
            index: Number(window.prompt(&#x27;index:&#x27;, this._host.size()))
323
 
        }
324
 
    },
325
 
 
326
 
    onAddClick: function(e) {
327
 
        e.stopPropagation();
328
 
        var tabview = this.get(&#x27;host&#x27;);
329
 
            input = this.getTabInput();
330
 
        tabview.add(input, input.index);
331
 
    }
332
 
});</pre>
333
 
 
334
 
 
335
 
<h3>Using the Plugin</h3>
336
 
<p>Now we can go ahead and plug in our functionality.  This can be during
337
 
construction with the <code>plugins</code> attribute, or subsequently
338
 
via the <code>plug</code> method.</p> 
339
 
 
340
 
<pre class="code prettyprint">var tabview = new Y.TabView({
341
 
    children: [{
342
 
        label: &#x27;foo&#x27;,
343
 
        content: &#x27;&lt;p&gt;foo content&lt;&#x2F;p&gt;&#x27;
344
 
    }, {
345
 
        label: &#x27;bar&#x27;,
346
 
        content: &#x27;&lt;p&gt;bar content&lt;&#x2F;p&gt;&#x27;
347
 
    }, {
348
 
        label: &#x27;baz&#x27;,
349
 
        content: &#x27;&lt;p&gt;baz content&lt;&#x2F;p&gt;&#x27;
350
 
    }],
351
 
    plugins: [Addable]
352
 
});
353
 
 
354
 
&#x2F;&#x2F; or
355
 
&#x2F;&#x2F; tabview.plug(Addable);</pre>
356
 
 
357
 
 
358
 
<h2>Removeable Tabs Plugin</h2>
359
 
<p>The process for creating a removeable plugin for <code>TabView</code>
360
 
is very similar.  The full source is provided below.</p>
361
 
 
362
 
<pre class="code prettyprint">var Removeable = function(config) {
363
 
    Removeable.superclass.constructor.apply(this, arguments);
364
 
};
365
 
 
366
 
Removeable.NAME = &#x27;removeableTabs&#x27;;
367
 
Removeable.NS = &#x27;removeable&#x27;;
368
 
 
369
 
Y.extend(Removeable, Y.Plugin.Base, {
370
 
    REMOVE_TEMPLATE: &#x27;&lt;a class=&quot;yui3-tab-remove&quot; title=&quot;remove tab&quot;&gt;x&lt;&#x2F;a&gt;&#x27;,
371
 
 
372
 
    initializer: function(config) {
373
 
        var tabview = this.get(&#x27;host&#x27;),
374
 
            cb = tabview.get(&#x27;contentBox&#x27;);
375
 
 
376
 
        cb.addClass(&#x27;yui3-tabview-removeable&#x27;);
377
 
        cb.delegate(&#x27;click&#x27;, this.onRemoveClick, &#x27;.yui3-tab-remove&#x27;, this);
378
 
 
379
 
        &#x2F;&#x2F; Tab events bubble to TabView
380
 
        tabview.after(&#x27;tab:render&#x27;, this.afterTabRender, this);
381
 
    },
382
 
 
383
 
    afterTabRender: function(e) {
384
 
        &#x2F;&#x2F; boundingBox is the Tab&#x27;s LI
385
 
        e.target.get(&#x27;boundingBox&#x27;).append(this.REMOVE_TEMPLATE);
386
 
    },
387
 
 
388
 
    onRemoveClick: function(e) {
389
 
        e.stopPropagation();
390
 
        var tab = Y.Widget.getByNode(e.target);
391
 
        tab.remove();
392
 
    }
393
 
});</pre>
394
 
 
395
 
<h2>Complete Example Source</h2>
396
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
397
 
    &lt;ul&gt;
398
 
        &lt;li&gt;&lt;a href=&quot;#foo&quot;&gt;foo&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
399
 
        &lt;li&gt;&lt;a href=&quot;#bar&quot;&gt;bar&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
400
 
        &lt;li&gt;&lt;a href=&quot;#baz&quot;&gt;baz&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
401
 
    &lt;&#x2F;ul&gt;
402
 
    &lt;div&gt;
403
 
        &lt;div id=&quot;foo&quot;&gt;
404
 
            &lt;p&gt;foo content&lt;&#x2F;p&gt;
405
 
        &lt;&#x2F;div&gt;
406
 
        &lt;div id=&quot;bar&quot;&gt;
407
 
            &lt;p&gt;bar content&lt;&#x2F;p&gt;
408
 
        &lt;&#x2F;div&gt;
409
 
        &lt;div id=&quot;baz&quot;&gt;
410
 
            &lt;p&gt;baz content&lt;&#x2F;p&gt;
411
 
        &lt;&#x2F;div&gt;
412
 
    &lt;&#x2F;div&gt;
413
 
&lt;&#x2F;div&gt;
414
 
 
415
 
&lt;div id=&quot;demo2&quot;&gt;
416
 
&lt;&#x2F;div&gt;
417
 
 
418
 
&lt;div id=&quot;demo3&quot;&gt;
419
 
&lt;&#x2F;div&gt;
420
 
 
421
 
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
422
 
YUI().use(&#x27;tabview&#x27;, &#x27;escape&#x27;, &#x27;plugin&#x27;, function(Y) {
423
 
    var Addable = function(config) {
424
 
        Addable.superclass.constructor.apply(this, arguments);
425
 
    };
426
 
 
427
 
    Addable.NAME = &#x27;addableTabs&#x27;;
428
 
    Addable.NS = &#x27;addable&#x27;;
429
 
 
430
 
    Y.extend(Addable, Y.Plugin.Base, {
431
 
        ADD_TEMPLATE: &#x27;&lt;li class=&quot;yui3-tab&quot; title=&quot;add a tab&quot;&gt;&#x27; +
432
 
                    &#x27;&lt;a class=&quot;yui3-tab-label yui3-tab-add&quot;&gt;+&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;&#x27;,
433
 
 
434
 
        initializer: function(config) {
435
 
            var tabview = this.get(&#x27;host&#x27;);
436
 
            tabview.after(&#x27;render&#x27;, this.afterRender, this);
437
 
            tabview.get(&#x27;contentBox&#x27;)
438
 
                .delegate(&#x27;click&#x27;, this.onAddClick, &#x27;.yui3-tab-add&#x27;, this);
439
 
        },
440
 
 
441
 
        getTabInput: function() {
442
 
            var tabview = this.get(&#x27;host&#x27;);
443
 
            return {
444
 
                label: Y.Escape.html(window.prompt(&#x27;label:&#x27;, &#x27;new tab&#x27;)),
445
 
                content: &#x27;&lt;p&gt;&#x27; + Y.Escape.html(window.prompt(&#x27;content:&#x27;, &#x27;new content&#x27;)) + &#x27;&lt;&#x2F;p&gt;&#x27;,
446
 
                index: Number(window.prompt(&#x27;index:&#x27;, tabview.size()))
447
 
            }
448
 
        },
449
 
 
450
 
        afterRender: function(e) {
451
 
            var tabview = this.get(&#x27;host&#x27;);
452
 
            tabview.get(&#x27;contentBox&#x27;).one(&#x27;&gt; ul&#x27;).append(this.ADD_TEMPLATE);
453
 
        },
454
 
 
455
 
        onAddClick: function(e) {
456
 
            e.stopPropagation();
457
 
            var tabview = this.get(&#x27;host&#x27;),
458
 
                input = this.getTabInput();
459
 
            tabview.add(input, input.index);
460
 
        }
461
 
    });
462
 
 
463
 
    var Removeable = function(config) {
464
 
        Removeable.superclass.constructor.apply(this, arguments);
465
 
    };
466
 
 
467
 
    Removeable.NAME = &#x27;removeableTabs&#x27;;
468
 
    Removeable.NS = &#x27;removeable&#x27;;
469
 
 
470
 
    Y.extend(Removeable, Y.Plugin.Base, {
471
 
        REMOVE_TEMPLATE: &#x27;&lt;a class=&quot;yui3-tab-remove&quot; title=&quot;remove tab&quot;&gt;x&lt;&#x2F;a&gt;&#x27;,
472
 
 
473
 
        initializer: function(config) {
474
 
            var tabview = this.get(&#x27;host&#x27;),
475
 
                cb = tabview.get(&#x27;contentBox&#x27;);
476
 
 
477
 
            cb.addClass(&#x27;yui3-tabview-removeable&#x27;);
478
 
            cb.delegate(&#x27;click&#x27;, this.onRemoveClick, &#x27;.yui3-tab-remove&#x27;, this);
479
 
 
480
 
            &#x2F;&#x2F; Tab events bubble to TabView
481
 
            tabview.after(&#x27;tab:render&#x27;, this.afterTabRender, this);
482
 
        },
483
 
 
484
 
        afterTabRender: function(e) {
485
 
            &#x2F;&#x2F; boundingBox is the Tab&#x27;s LI
486
 
            e.target.get(&#x27;boundingBox&#x27;).append(this.REMOVE_TEMPLATE);
487
 
        },
488
 
 
489
 
        onRemoveClick: function(e) {
490
 
            e.stopPropagation();
491
 
            var tab = Y.Widget.getByNode(e.target);
492
 
            tab.remove();
493
 
        }
494
 
    });
495
 
 
496
 
    var tabview = new Y.TabView({
497
 
        srcNode: &#x27;#demo&#x27;,
498
 
        plugins: [Addable]
499
 
    });
500
 
 
501
 
    var tabview2 = new Y.TabView({
502
 
        children: [{
503
 
            label: &#x27;foo&#x27;,
504
 
            content: &#x27;&lt;p&gt;foo content&lt;&#x2F;p&gt;&#x27;
505
 
        }, {
506
 
            label: &#x27;bar&#x27;,
507
 
            content: &#x27;&lt;p&gt;bar content&lt;&#x2F;p&gt;&#x27;
508
 
        }, {
509
 
            label: &#x27;baz&#x27;,
510
 
            content: &#x27;&lt;p&gt;baz content&lt;&#x2F;p&gt;&#x27;
511
 
        }],
512
 
        plugins: [Removeable]
513
 
    });
514
 
 
515
 
    var tabview3 = new Y.TabView({
516
 
        children: [{
517
 
            label: &#x27;foo&#x27;,
518
 
            content: &#x27;&lt;p&gt;foo content&lt;&#x2F;p&gt;&#x27;
519
 
        }, {
520
 
            label: &#x27;bar&#x27;,
521
 
            content: &#x27;&lt;p&gt;bar content&lt;&#x2F;p&gt;&#x27;
522
 
        }, {
523
 
            label: &#x27;baz&#x27;,
524
 
            content: &#x27;&lt;p&gt;bar content&lt;&#x2F;p&gt;&#x27;
525
 
        }],
526
 
        plugins: [Addable, Removeable]
527
 
    });
528
 
 
529
 
    tabview.render();
530
 
    tabview2.render(&#x27;#demo2&#x27;);
531
 
    tabview3.render(&#x27;#demo3&#x27;);
532
 
});
533
 
&lt;&#x2F;script&gt;</pre>
534
 
 
535
 
</div>
536
 
        </div>
537
 
 
538
 
        <div id="sidebar" class="yui3-u">
539
 
            
540
 
 
541
 
            
542
 
                <div class="sidebox">
543
 
                    <div class="hd">
544
 
                        <h2 class="no-toc">Examples</h2>
545
 
                    </div>
546
 
 
547
 
                    <div class="bd">
548
 
                        <ul class="examples">
549
 
                            
550
 
                                
551
 
                                    <li data-description="This example shows how to create a TabView wigdet from existing HTML.">
552
 
                                        <a href="tabview-basic.html">TabView from Existing Markup</a>
553
 
                                    </li>
554
 
                                
555
 
                            
556
 
                                
557
 
                                    <li data-description="This example shows how to create a TabView wigdet from JavaScript.">
558
 
                                        <a href="tabview-fromjs.html">Dynamic TabView from JavaScript</a>
559
 
                                    </li>
560
 
                                
561
 
                            
562
 
                                
563
 
                                    <li data-description="This example shows how to add and remove Tabs.">
564
 
                                        <a href="tabview-add-remove.html">Adding and Removing Tabs</a>
565
 
                                    </li>
566
 
                                
567
 
                            
568
 
                                
569
 
                                    <li data-description="This example shows how to load tab content remotely using a YQL plugin.">
570
 
                                        <a href="tabview-yql.html">Loading Tab Content</a>
571
 
                                    </li>
572
 
                                
573
 
                            
574
 
                                
575
 
                            
576
 
                        </ul>
577
 
                    </div>
578
 
                </div>
579
 
            
580
 
 
581
 
            
582
 
                <div class="sidebox">
583
 
                    <div class="hd">
584
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
585
 
                    </div>
586
 
 
587
 
                    <div class="bd">
588
 
                        <ul class="examples">
589
 
                            
590
 
                                
591
 
                            
592
 
                                
593
 
                            
594
 
                                
595
 
                            
596
 
                                
597
 
                            
598
 
                                
599
 
                                    <li data-description="Demonstrates how to add browser history support to a TabView widget using the History Utility.">
600
 
                                        <a href="../history/history-tabview.html">History + TabView</a>
601
 
                                    </li>
602
 
                                
603
 
                            
604
 
                        </ul>
605
 
                    </div>
606
 
                </div>
607
 
            
608
 
        </div>
609
 
    </div>
610
 
</div>
611
 
 
612
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
613
 
<script>prettyPrint();</script>
614
 
 
615
 
</body>
616
 
</html>