← Back to branch summary

~lutostag/ubuntu/utopic/maas/1.5.2

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/history/history-tabview.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-03-15 18:14:08 UTC
  • mfrom: (1.1.3)
  • Revision ID: package-import@ubuntu.com-20120315181408-zgl94hzo0x4n99an
Tags: 0.1+bzr295+dfsg-0ubuntu2
* debian/patches:
  - 01-fix-database-settings.patch: Update to set PSERV_URL.
  - 02-pserv-config.patch: Set port to 8001.
* debian/maas.postinst: Run maas-import-isos on install.
* debian/control: Depends on rabbitmq-server.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/history/history-tabview.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
5
    <title>Example: History + TabView</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: History + TabView</h1>
 
15
 
 
16
    
 
17
 
 
18
    <div class="yui3-g">
 
19
        <div id="main" class="yui3-u">
 
20
            <div class="content"><div class="intro">
 
21
<p>
 
22
This example demonstrates how to add browser history support to a TabView widget
 
23
using the History Utility.
 
24
</p>
 
25
 
 
26
<p>
 
27
Select a new tab in the TabView below, then use your browser's back button
 
28
to return to the previously selected tab. Next, click on one of the images to
 
29
visit the Flickr photo page for that image, then use your browser's back button
 
30
to return to the current page with the same tab selected.
 
31
</p>
 
32
</div>
 
33
 
 
34
<div class="example">
 
35
    <style scoped>
 
36
        #demo { width: 300px; }
 
37
 
 
38
        #demo img {
 
39
            border: 1px solid #000;
 
40
            height: 150px;
 
41
        }
 
42
 
 
43
        #demo .yui3-tab-selected .yui3-tab-label { color: #fff; }
 
44
    </style>
 
45
 
 
46
    <div id="demo" class="yui3-skin-sam">
 
47
  <ul>
 
48
    <li><a href="#asparagus">Asparagus</a></li>
 
49
    <li><a href="#bird">Bird</a></li>
 
50
    <li><a href="#coffee">Coffee</a></li>
 
51
  </ul>
 
52
  <div>
 
53
    <div id="asparagus">
 
54
      <a href="http://www.flickr.com/photos/allenr/4686935131/">
 
55
        <img src="http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg" alt="Asparagus">
 
56
      </a>
 
57
    </div>
 
58
    <div id="bird">
 
59
      <a href="http://www.flickr.com/photos/allenr/66307916/">
 
60
        <img src="http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg" alt="Bird">
 
61
      </a>
 
62
    </div>
 
63
    <div id="coffee">
 
64
      <a href="http://www.flickr.com/photos/allenr/4638474362/">
 
65
        <img src="http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg" alt="Coffee">
 
66
      </a>
 
67
    </div>
 
68
  </div>
 
69
</div>
 
70
 
 
71
<script>
 
72
YUI().use('history', 'tabview', function (Y) {
 
73
  var history = new Y.HistoryHash(),
 
74
      tabview = new Y.TabView({srcNode: '#demo'});
 
75
 
 
76
  // Render the TabView widget to turn the static markup into an
 
77
  // interactive TabView.
 
78
  tabview.render();
 
79
 
 
80
  // Set the selected tab to the bookmarked history state, or to
 
81
  // the first tab if there's no bookmarked state.
 
82
  tabview.selectChild(history.get('tab') || 0);
 
83
 
 
84
  // Store a new history state when the user selects a tab.
 
85
  tabview.after('selectionChange', function (e) {
 
86
    // If the new tab index is greater than 0, set the "tab"
 
87
    // state value to the index. Otherwise, remove the "tab"
 
88
    // state value by setting it to null (this reverts to the
 
89
    // default state of selecting the first tab).
 
90
    history.addValue('tab', e.newVal.get('index') || null);
 
91
  });
 
92
 
 
93
  // Listen for history changes from back/forward navigation or
 
94
  // URL changes, and update the tab selection when necessary.
 
95
  Y.on('history:change', function (e) {
 
96
    // Ignore changes we make ourselves, since we don't need
 
97
    // to update the selection state for those. We're only
 
98
    // interested in outside changes, such as the ones generated
 
99
    // when the user clicks the browser's back or forward buttons.
 
100
    if (e.src === Y.HistoryHash.SRC_HASH) {
 
101
 
 
102
      if (e.changed.tab) {
 
103
        // The new state contains a different tab selection, so
 
104
        // change the selected tab.
 
105
        tabview.selectChild(e.changed.tab.newVal);
 
106
      } else if (e.removed.tab) {
 
107
        // The tab selection was removed in the new state, so
 
108
        // select the first tab by default.
 
109
        tabview.selectChild(0);
 
110
      }
 
111
 
 
112
    }
 
113
  });
 
114
});
 
115
</script>
 
116
 
 
117
</div>
 
118
 
 
119
<h2>HTML</h2>
 
120
 
 
121
<p>
 
122
First, create the markup for a simple TabView widget with three tabs.
 
123
</p>
 
124
 
 
125
<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
 
126
  &lt;ul&gt;
 
127
    &lt;li&gt;&lt;a href=&quot;#asparagus&quot;&gt;Asparagus&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
 
128
    &lt;li&gt;&lt;a href=&quot;#bird&quot;&gt;Bird&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
 
129
    &lt;li&gt;&lt;a href=&quot;#coffee&quot;&gt;Coffee&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
 
130
  &lt;&#x2F;ul&gt;
 
131
  &lt;div&gt;
 
132
    &lt;div id=&quot;asparagus&quot;&gt;
 
133
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;allenr&#x2F;4686935131&#x2F;&quot;&gt;
 
134
        &lt;img src=&quot;http:&#x2F;&#x2F;farm5.static.flickr.com&#x2F;4005&#x2F;4686935131_253e921bf7_m.jpg&quot; alt=&quot;Asparagus&quot;&gt;
 
135
      &lt;&#x2F;a&gt;
 
136
    &lt;&#x2F;div&gt;
 
137
    &lt;div id=&quot;bird&quot;&gt;
 
138
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;allenr&#x2F;66307916&#x2F;&quot;&gt;
 
139
        &lt;img src=&quot;http:&#x2F;&#x2F;farm1.static.flickr.com&#x2F;26&#x2F;66307916_811efccdfc_m.jpg&quot; alt=&quot;Bird&quot;&gt;
 
140
      &lt;&#x2F;a&gt;
 
141
    &lt;&#x2F;div&gt;
 
142
    &lt;div id=&quot;coffee&quot;&gt;
 
143
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;allenr&#x2F;4638474362&#x2F;&quot;&gt;
 
144
        &lt;img src=&quot;http:&#x2F;&#x2F;farm4.static.flickr.com&#x2F;3336&#x2F;4638474362_093edb7565_m.jpg&quot; alt=&quot;Coffee&quot;&gt;
 
145
      &lt;&#x2F;a&gt;
 
146
    &lt;&#x2F;div&gt;
 
147
  &lt;&#x2F;div&gt;
 
148
&lt;&#x2F;div&gt;</pre>
 
149
 
 
150
 
 
151
<h2>JavaScript</h2>
 
152
 
 
153
<h3>Load history and tabview</h3>
 
154
 
 
155
<p>
 
156
Load the <code>history</code> and <code>tabview</code> modules.
 
157
</p>
 
158
 
 
159
<pre class="code prettyprint">YUI().use(&#x27;history&#x27;, &#x27;tabview&#x27;, function (Y) {
 
160
  &#x2F;&#x2F; ...implementation code...
 
161
});</pre>
 
162
 
 
163
 
 
164
<h3>Initialize History and TabView</h3>
 
165
 
 
166
<p>
 
167
Create an instance of the TabView widget and a history adapter, and restore the
 
168
bookmarked tab selection, if any.
 
169
</p>
 
170
 
 
171
<p>
 
172
This example uses the <code>Y.HistoryHash</code> adapter, which stores history state in the
 
173
hash fragment of the URL. Another option would be to use the <code>Y.HistoryHTML5</code>
 
174
adapter, but this would require additional logic in order to create bookmarkable
 
175
URLs.
 
176
</p>
 
177
 
 
178
<p>
 
179
Add this code inside the <code>YUI().use()</code> callback from the previous step.
 
180
</p>
 
181
 
 
182
<pre class="code prettyprint">var history = new Y.HistoryHash(),
 
183
    tabview = new Y.TabView({srcNode: &#x27;#demo&#x27;});
 
184
 
 
185
&#x2F;&#x2F; Render the TabView widget to turn the static markup into an
 
186
&#x2F;&#x2F; interactive TabView.
 
187
tabview.render();
 
188
 
 
189
&#x2F;&#x2F; Set the selected tab to the bookmarked history state, or to
 
190
&#x2F;&#x2F; the first tab if there&#x27;s no bookmarked state.
 
191
tabview.selectChild(history.get(&#x27;tab&#x27;) || 0);</pre>
 
192
 
 
193
 
 
194
<h3>Add a history entry when the selected tab changes</h3>
 
195
 
 
196
<p>
 
197
When the user selects a new tab, create a new browser history entry with a
 
198
state value named <code>tab</code> that contains the index of the selected tab.
 
199
If the first tab is selected, then set the <code>tab</code> state value to
 
200
<code>null</code> to remove it from the state, because the first tab is the
 
201
default tab.
 
202
</p>
 
203
 
 
204
<pre class="code prettyprint">&#x2F;&#x2F; Store a new history state when the user selects a tab.
 
205
tabview.after(&#x27;selectionChange&#x27;, function (e) {
 
206
  &#x2F;&#x2F; If the new tab index is greater than 0, set the &quot;tab&quot;
 
207
  &#x2F;&#x2F; state value to the index. Otherwise, remove the &quot;tab&quot;
 
208
  &#x2F;&#x2F; state value by setting it to null (this reverts to the
 
209
  &#x2F;&#x2F; default state of selecting the first tab).
 
210
  history.addValue(&#x27;tab&#x27;, e.newVal.get(&#x27;index&#x27;) || null);
 
211
});</pre>
 
212
 
 
213
 
 
214
<h3>Listen for history events to capture back/forward navigation</h3>
 
215
 
 
216
<p>
 
217
Finally, listen for history change events, which indicate that the user clicked
 
218
the back/forward button or manually changed the URL.
 
219
</p>
 
220
 
 
221
<p>
 
222
When a <code>history:change</code> event occurs, it could come from the call to
 
223
the <code>addValue()</code> method above or it could come from a change to the
 
224
URL hash. We only care about changes that come from the URL hash, since that
 
225
indicates a navigation event.
 
226
</p>
 
227
 
 
228
<pre class="code prettyprint">&#x2F;&#x2F; Listen for history changes from back&#x2F;forward navigation or
 
229
&#x2F;&#x2F; URL changes, and update the tab selection when necessary.
 
230
Y.on(&#x27;history:change&#x27;, function (e) {
 
231
  &#x2F;&#x2F; Ignore changes we make ourselves, since we don&#x27;t need
 
232
  &#x2F;&#x2F; to update the selection state for those. We&#x27;re only
 
233
  &#x2F;&#x2F; interested in outside changes, such as the ones generated
 
234
  &#x2F;&#x2F; when the user clicks the browser&#x27;s back or forward buttons.
 
235
  if (e.src === Y.HistoryHash.SRC_HASH) {
 
236
 
 
237
    if (e.changed.tab) {
 
238
      &#x2F;&#x2F; The new state contains a different tab selection, so
 
239
      &#x2F;&#x2F; change the selected tab.
 
240
      tabview.selectChild(e.changed.tab.newVal);
 
241
    } else if (e.removed.tab) {
 
242
      &#x2F;&#x2F; The tab selection was removed in the new state, so
 
243
      &#x2F;&#x2F; select the first tab by default.
 
244
      tabview.selectChild(0);
 
245
    }
 
246
 
 
247
  }
 
248
});</pre>
 
249
 
 
250
 
 
251
<h3>Complete example source code</h3>
 
252
 
 
253
<p>
 
254
Here's the complete source code for the example:
 
255
</p>
 
256
 
 
257
<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
 
258
  &lt;ul&gt;
 
259
    &lt;li&gt;&lt;a href=&quot;#asparagus&quot;&gt;Asparagus&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
 
260
    &lt;li&gt;&lt;a href=&quot;#bird&quot;&gt;Bird&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
 
261
    &lt;li&gt;&lt;a href=&quot;#coffee&quot;&gt;Coffee&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
 
262
  &lt;&#x2F;ul&gt;
 
263
  &lt;div&gt;
 
264
    &lt;div id=&quot;asparagus&quot;&gt;
 
265
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;allenr&#x2F;4686935131&#x2F;&quot;&gt;
 
266
        &lt;img src=&quot;http:&#x2F;&#x2F;farm5.static.flickr.com&#x2F;4005&#x2F;4686935131_253e921bf7_m.jpg&quot; alt=&quot;Asparagus&quot;&gt;
 
267
      &lt;&#x2F;a&gt;
 
268
    &lt;&#x2F;div&gt;
 
269
    &lt;div id=&quot;bird&quot;&gt;
 
270
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;allenr&#x2F;66307916&#x2F;&quot;&gt;
 
271
        &lt;img src=&quot;http:&#x2F;&#x2F;farm1.static.flickr.com&#x2F;26&#x2F;66307916_811efccdfc_m.jpg&quot; alt=&quot;Bird&quot;&gt;
 
272
      &lt;&#x2F;a&gt;
 
273
    &lt;&#x2F;div&gt;
 
274
    &lt;div id=&quot;coffee&quot;&gt;
 
275
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;allenr&#x2F;4638474362&#x2F;&quot;&gt;
 
276
        &lt;img src=&quot;http:&#x2F;&#x2F;farm4.static.flickr.com&#x2F;3336&#x2F;4638474362_093edb7565_m.jpg&quot; alt=&quot;Coffee&quot;&gt;
 
277
      &lt;&#x2F;a&gt;
 
278
    &lt;&#x2F;div&gt;
 
279
  &lt;&#x2F;div&gt;
 
280
&lt;&#x2F;div&gt;
 
281
 
 
282
&lt;script&gt;
 
283
YUI().use(&#x27;history&#x27;, &#x27;tabview&#x27;, function (Y) {
 
284
  var history = new Y.HistoryHash(),
 
285
      tabview = new Y.TabView({srcNode: &#x27;#demo&#x27;});
 
286
 
 
287
  &#x2F;&#x2F; Render the TabView widget to turn the static markup into an
 
288
  &#x2F;&#x2F; interactive TabView.
 
289
  tabview.render();
 
290
 
 
291
  &#x2F;&#x2F; Set the selected tab to the bookmarked history state, or to
 
292
  &#x2F;&#x2F; the first tab if there&#x27;s no bookmarked state.
 
293
  tabview.selectChild(history.get(&#x27;tab&#x27;) || 0);
 
294
 
 
295
  &#x2F;&#x2F; Store a new history state when the user selects a tab.
 
296
  tabview.after(&#x27;selectionChange&#x27;, function (e) {
 
297
    &#x2F;&#x2F; If the new tab index is greater than 0, set the &quot;tab&quot;
 
298
    &#x2F;&#x2F; state value to the index. Otherwise, remove the &quot;tab&quot;
 
299
    &#x2F;&#x2F; state value by setting it to null (this reverts to the
 
300
    &#x2F;&#x2F; default state of selecting the first tab).
 
301
    history.addValue(&#x27;tab&#x27;, e.newVal.get(&#x27;index&#x27;) || null);
 
302
  });
 
303
 
 
304
  &#x2F;&#x2F; Listen for history changes from back&#x2F;forward navigation or
 
305
  &#x2F;&#x2F; URL changes, and update the tab selection when necessary.
 
306
  Y.on(&#x27;history:change&#x27;, function (e) {
 
307
    &#x2F;&#x2F; Ignore changes we make ourselves, since we don&#x27;t need
 
308
    &#x2F;&#x2F; to update the selection state for those. We&#x27;re only
 
309
    &#x2F;&#x2F; interested in outside changes, such as the ones generated
 
310
    &#x2F;&#x2F; when the user clicks the browser&#x27;s back or forward buttons.
 
311
    if (e.src === Y.HistoryHash.SRC_HASH) {
 
312
 
 
313
      if (e.changed.tab) {
 
314
        &#x2F;&#x2F; The new state contains a different tab selection, so
 
315
        &#x2F;&#x2F; change the selected tab.
 
316
        tabview.selectChild(e.changed.tab.newVal);
 
317
      } else if (e.removed.tab) {
 
318
        &#x2F;&#x2F; The tab selection was removed in the new state, so
 
319
        &#x2F;&#x2F; select the first tab by default.
 
320
        tabview.selectChild(0);
 
321
      }
 
322
 
 
323
    }
 
324
  });
 
325
});
 
326
&lt;&#x2F;script&gt;</pre>
 
327
 
 
328
</div>
 
329
        </div>
 
330
 
 
331
        <div id="sidebar" class="yui3-u">
 
332
            
 
333
 
 
334
            
 
335
                <div class="sidebox">
 
336
                    <div class="hd">
 
337
                        <h2 class="no-toc">Examples</h2>
 
338
                    </div>
 
339
 
 
340
                    <div class="bd">
 
341
                        <ul class="examples">
 
342
                            
 
343
                                
 
344
                                    <li data-description="Demonstrates how to add browser history support to a TabView widget using the History Utility.">
 
345
                                        <a href="history-tabview.html">History + TabView</a>
 
346
                                    </li>
 
347
                                
 
348
                            
 
349
                        </ul>
 
350
                    </div>
 
351
                </div>
 
352
            
 
353
 
 
354
            
 
355
        </div>
 
356
    </div>
 
357
</div>
 
358
 
 
359
<script src="../assets/vendor/prettify/prettify-min.js"></script>
 
360
<script>prettyPrint();</script>
 
361
 
 
362
</body>
 
363
</html>