Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

YUI3 History issue

By: a guest on Jun 9th, 2011  |  syntax: HTML  |  size: 3.08 KB  |  views: 327  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.         <head>
  5.                 <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6.                 <title>History + TabView</title>
  7.  
  8.                 <style type="text/css">
  9.                         body {
  10.                                 margin:0;
  11.                                 padding:0;
  12.                         }
  13.                 </style>
  14.  
  15.                 <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
  16.                 <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
  17.  
  18.  
  19.                 <style>
  20.                         #demo { width: 300px; }
  21.  
  22.                         #demo img {
  23.                                 border: 1px solid #000;
  24.                                 height: 150px;
  25.                         }
  26.  
  27.                         #demo .yui3-tab-selected .yui3-tab-label { color: #fff; }
  28.                 </style>
  29.  
  30.         </head>
  31.  
  32.         <body class="yui3-skin-sam  yui-skin-sam">
  33.  
  34.                 <h1>History + TabView</h1>
  35.  
  36.                 <div class="exampleIntro">
  37.                         <p>
  38.                                 This example demonstrates how to add browser history support to a TabView widget
  39.                                 using the History Utility.
  40.                         </p>
  41.  
  42.                         <p>
  43.                                 Select a new tab in the TabView below, then use your browser's back button
  44.                                 to return to the previously selected tab. Next, click on one of the images to
  45.                                 visit the Flickr photo page for that image, then use your browser's back button
  46.                                 to return to the current page with the same tab selected.
  47.                         </p>
  48.  
  49.                 </div>
  50.  
  51.                 <div id="demo">
  52.                         <ul>
  53.                                 <li><a href="#asparagus">Asparagus</a></li>
  54.                                 <li><a href="#bird">Bird</a></li>
  55.                                 <li><a href="#coffee">Coffee</a></li>
  56.                         </ul>
  57.                         <div>
  58.                                 <div id="asparagus">
  59.                                         <a href="http://www.flickr.com/photos/allenr/4686935131/">
  60.                                                 <img src="http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg" alt="Asparagus">
  61.                                         </a>
  62.                                 </div>
  63.                                 <div id="bird">
  64.                                         <a href="http://www.flickr.com/photos/allenr/66307916/">
  65.                                                 <img src="http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg" alt="Bird">
  66.                                         </a>
  67.                                 </div>
  68.                                 <div id="coffee">
  69.                                         <a href="http://www.flickr.com/photos/allenr/4638474362/">
  70.                                                 <img src="http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg" alt="Coffee">
  71.                                         </a>
  72.                                 </div>
  73.                         </div>
  74.                 </div>
  75.  
  76.                 <script>
  77.                         YUI().use("history", "tabview", function (Y) {
  78.                                 var history = new Y.HistoryHTML5(),
  79.                                         tabview = new Y.TabView({srcNode: '#demo'});
  80.  
  81.                                         if (window.history) {
  82.                                                 var state = window.history.state;
  83.  
  84.                                                 if (state) {
  85.                                                         alert('tab from window.history is: ' + state['tab'] + '\n' + 'but tab from YUI History is: ' + history.get('tab'));
  86.                                                 }
  87.                                         }
  88.  
  89.                                         tabview.render();
  90.  
  91.                                         tabview.selectChild(history.get('tab') || 0);
  92.  
  93.                                         tabview.after('selectionChange', function (e) {
  94.  
  95.                                         history.addValue('tab', e.newVal.get('index') || null);
  96.                                 });
  97.  
  98.                                 Y.on('history:change', function (e) {
  99.                                         if (e.src === Y.HistoryHTML5.SRC_POPSTATE) {
  100.  
  101.                                                 if (e.changed.tab) {
  102.                                                         tabview.selectChild(e.changed.tab.newVal);
  103.                                                 } else if (e.removed.tab) {
  104.                                                         tabview.selectChild(0);
  105.                                                 }
  106.                                         }
  107.                                 });
  108.                         });
  109.                 </script>
  110.                 <script type="text/javascript" src="http://track2.mybloglog.com/js/jsserv.php?mblID=2007020704011645"></script>
  111.         </body>
  112. </html>