← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/tabview/tabview-basic.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/tabview/tabview-basic.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: TabView from Existing Markup</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: TabView from Existing Markup</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><div class="intro">
23
 
    <p>This example shows how to create a <code>TabView</code> widget from existing HTML on the page.</p>
24
 
</div>
25
 
 
26
 
<div class="example yui3-skin-sam">
27
 
<div id="demo">
28
 
    <ul>
29
 
        <li><a href="#foo">foo</a></li>
30
 
        <li><a href="#bar">bar</a></li>
31
 
        <li><a href="#baz">baz</a></li>
32
 
    </ul>
33
 
    <div>
34
 
        <div id="foo">
35
 
            <p>foo content</p>
36
 
        </div>
37
 
        <div id="bar">
38
 
            <p>bar content</p>
39
 
        </div>
40
 
        <div id="baz">
41
 
            <p>baz content</p>
42
 
        </div>
43
 
    </div>
44
 
</div>
45
 
 
46
 
<script type="text/javascript">
47
 
YUI().use('tabview', function(Y) {
48
 
    var tabview = new Y.TabView({srcNode:'#demo'});
49
 
    tabview.render();
50
 
});
51
 
</script>
52
 
 
53
 
</div>
54
 
 
55
 
<h2>Creating A TabView From Existing Markup</h2>
56
 
 
57
 
<p>A <code>TabView</code> can be created easily from existing markup, supporting a progressive enhancement approach to development.</p>
58
 
 
59
 
<h3>The Markup</h3>
60
 
 
61
 
<p>The only markup requirements are an unordered list of items and a corresponding group of divs.</p>
62
 
 
63
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
64
 
    &lt;ul&gt;
65
 
        &lt;li&gt;&lt;a href=&quot;#foo&quot;&gt;foo&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
66
 
        &lt;li&gt;&lt;a href=&quot;#bar&quot;&gt;bar&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
67
 
        &lt;li&gt;&lt;a href=&quot;#baz&quot;&gt;baz&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
68
 
    &lt;&#x2F;ul&gt;
69
 
    &lt;div&gt;
70
 
        &lt;div id=&quot;foo&quot;&gt;
71
 
            &lt;p&gt;foo content&lt;&#x2F;p&gt;
72
 
        &lt;&#x2F;div&gt;
73
 
        &lt;div id=&quot;bar&quot;&gt;
74
 
            &lt;p&gt;bar content&lt;&#x2F;p&gt;
75
 
        &lt;&#x2F;div&gt;
76
 
        &lt;div id=&quot;baz&quot;&gt;
77
 
            &lt;p&gt;baz content&lt;&#x2F;p&gt;
78
 
        &lt;&#x2F;div&gt;
79
 
    &lt;&#x2F;div&gt;
80
 
&lt;&#x2F;div&gt;</pre>
81
 
 
82
 
 
83
 
<h3>The JavaScript</h3>
84
 
 
85
 
<p><code>TabView</code> extends <code>Widget</code>, and the <code>srcNode</code>
86
 
becomes the <code>contentBox</code>.  This is the
87
 
minimal requirement to create a <code>Tabview</code> instance for the markup,
88
 
and can be assigned using a selector.  Calling render enlivens the <code>TabView
89
 
</code> making it usable.</p>
90
 
 
91
 
<pre class="code prettyprint">var tabview = new Y.TabView({srcNode:&#x27;#demo&#x27;});
92
 
tabview.render();</pre>
93
 
 
94
 
 
95
 
 
96
 
<h2>Complete Example Source</h2>
97
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
98
 
    &lt;ul&gt;
99
 
        &lt;li&gt;&lt;a href=&quot;#foo&quot;&gt;foo&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
100
 
        &lt;li&gt;&lt;a href=&quot;#bar&quot;&gt;bar&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
101
 
        &lt;li&gt;&lt;a href=&quot;#baz&quot;&gt;baz&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
102
 
    &lt;&#x2F;ul&gt;
103
 
    &lt;div&gt;
104
 
        &lt;div id=&quot;foo&quot;&gt;
105
 
            &lt;p&gt;foo content&lt;&#x2F;p&gt;
106
 
        &lt;&#x2F;div&gt;
107
 
        &lt;div id=&quot;bar&quot;&gt;
108
 
            &lt;p&gt;bar content&lt;&#x2F;p&gt;
109
 
        &lt;&#x2F;div&gt;
110
 
        &lt;div id=&quot;baz&quot;&gt;
111
 
            &lt;p&gt;baz content&lt;&#x2F;p&gt;
112
 
        &lt;&#x2F;div&gt;
113
 
    &lt;&#x2F;div&gt;
114
 
&lt;&#x2F;div&gt;
115
 
 
116
 
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
117
 
YUI().use(&#x27;tabview&#x27;, function(Y) {
118
 
    var tabview = new Y.TabView({srcNode:&#x27;#demo&#x27;});
119
 
    tabview.render();
120
 
});
121
 
&lt;&#x2F;script&gt;</pre>
122
 
 
123
 
</div>
124
 
            </div>
125
 
        </div>
126
 
 
127
 
        <div class="yui3-u-1-4">
128
 
            <div class="sidebar">
129
 
                
130
 
 
131
 
                
132
 
                    <div class="sidebox">
133
 
                        <div class="hd">
134
 
                            <h2 class="no-toc">Examples</h2>
135
 
                        </div>
136
 
 
137
 
                        <div class="bd">
138
 
                            <ul class="examples">
139
 
                                
140
 
                                    
141
 
                                        <li data-description="This example shows how to create a TabView wigdet from existing HTML.">
142
 
                                            <a href="tabview-basic.html">TabView from Existing Markup</a>
143
 
                                        </li>
144
 
                                    
145
 
                                
146
 
                                    
147
 
                                        <li data-description="This example shows how to create a TabView wigdet from JavaScript.">
148
 
                                            <a href="tabview-fromjs.html">Dynamic TabView from JavaScript</a>
149
 
                                        </li>
150
 
                                    
151
 
                                
152
 
                                    
153
 
                                        <li data-description="This example shows how to add and remove Tabs.">
154
 
                                            <a href="tabview-add-remove.html">Adding and Removing Tabs</a>
155
 
                                        </li>
156
 
                                    
157
 
                                
158
 
                                    
159
 
                                        <li data-description="This example shows how to load tab content remotely using a YQL plugin.">
160
 
                                            <a href="tabview-yql.html">Loading Tab Content</a>
161
 
                                        </li>
162
 
                                    
163
 
                                
164
 
                                    
165
 
                                
166
 
                            </ul>
167
 
                        </div>
168
 
                    </div>
169
 
                
170
 
 
171
 
                
172
 
                    <div class="sidebox">
173
 
                        <div class="hd">
174
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
175
 
                        </div>
176
 
 
177
 
                        <div class="bd">
178
 
                            <ul class="examples">
179
 
                                
180
 
                                    
181
 
                                
182
 
                                    
183
 
                                
184
 
                                    
185
 
                                
186
 
                                    
187
 
                                
188
 
                                    
189
 
                                        <li data-description="Demonstrates how to add browser history support to a TabView widget using the History Utility.">
190
 
                                            <a href="../history/history-tabview.html">History + TabView</a>
191
 
                                        </li>
192
 
                                    
193
 
                                
194
 
                            </ul>
195
 
                        </div>
196
 
                    </div>
197
 
                
198
 
            </div>
199
 
        </div>
200
 
    </div>
201
 
</div>
202
 
 
203
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
204
 
<script>prettyPrint();</script>
205
 
 
206
 
</body>
207
 
</html>