Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>History + TabView</title>
- <style type="text/css">
- body {
- margin:0;
- padding:0;
- }
- </style>
- <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
- <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
- <style>
- #demo { width: 300px; }
- #demo img {
- border: 1px solid #000;
- height: 150px;
- }
- #demo .yui3-tab-selected .yui3-tab-label { color: #fff; }
- </style>
- </head>
- <body class="yui3-skin-sam yui-skin-sam">
- <h1>History + TabView</h1>
- <div class="exampleIntro">
- <p>
- This example demonstrates how to add browser history support to a TabView widget
- using the History Utility.
- </p>
- <p>
- Select a new tab in the TabView below, then use your browser's back button
- to return to the previously selected tab. Next, click on one of the images to
- visit the Flickr photo page for that image, then use your browser's back button
- to return to the current page with the same tab selected.
- </p>
- </div>
- <div id="demo">
- <ul>
- <li><a href="#asparagus">Asparagus</a></li>
- <li><a href="#bird">Bird</a></li>
- <li><a href="#coffee">Coffee</a></li>
- </ul>
- <div>
- <div id="asparagus">
- <a href="http://www.flickr.com/photos/allenr/4686935131/">
- <img src="http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg" alt="Asparagus">
- </a>
- </div>
- <div id="bird">
- <a href="http://www.flickr.com/photos/allenr/66307916/">
- <img src="http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg" alt="Bird">
- </a>
- </div>
- <div id="coffee">
- <a href="http://www.flickr.com/photos/allenr/4638474362/">
- <img src="http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg" alt="Coffee">
- </a>
- </div>
- </div>
- </div>
- <script>
- YUI().use("history", "tabview", function (Y) {
- var history = new Y.HistoryHTML5(),
- tabview = new Y.TabView({srcNode: '#demo'});
- if (window.history) {
- var state = window.history.state;
- if (state) {
- alert('tab from window.history is: ' + state['tab'] + '\n' + 'but tab from YUI History is: ' + history.get('tab'));
- }
- }
- tabview.render();
- tabview.selectChild(history.get('tab') || 0);
- tabview.after('selectionChange', function (e) {
- history.addValue('tab', e.newVal.get('index') || null);
- });
- Y.on('history:change', function (e) {
- if (e.src === Y.HistoryHTML5.SRC_POPSTATE) {
- if (e.changed.tab) {
- tabview.selectChild(e.changed.tab.newVal);
- } else if (e.removed.tab) {
- tabview.selectChild(0);
- }
- }
- });
- });
- </script>
- <script type="text/javascript" src="http://track2.mybloglog.com/js/jsserv.php?mblID=2007020704011645"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement