Jquery Simply Deep Linking with BBQ (Back Button & Query Library)


/ Published in: jQuery
Save to your folder(s)

This is a cut down example using custom tabs (you can easily add a custom ajax event to load in content - just follow Ben Alman's example).


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5. <title>Sandboxing</title>
  6. </head>
  7. <body>
  8. <style type="text/css">
  9. .tabs {height: 33px;padding:0px;margin-bottom:0px;border-bottom:1px solid #444;margin-left:0px;}
  10. .tabs li {float: left;height: 32px;line-height: 32px; overflow: hidden;position: relative;margin:0px;margin-right:.5em;border:1px solid #444;}
  11. .tabs li a {display: block;padding: 0 1em; outline: none;}
  12. .tabs .selected {background: #fff;border-bottom: 1px solid #efefef;}
  13. .tabs .selected {height:32px;background:#efefef;color:#444;}
  14. .tabs a {text-decoration:none;}
  15. .tabContent {padding:10px;background:#efefef;border:1px solid #444;border-top:none;}
  16. </style>
  17.  
  18. <ul class="tabs">
  19. <li><a href="#tab1">Tab 1</a></li>
  20. <li><a href="#tab2">Tab 2</a></li>
  21. <li><a href="#tab3">Tab 3</a></li>
  22. </ul>
  23. <div id="tabWrapper">
  24. <div id="tab1" class="tabContent">
  25. <h4>Tab 1</h4>
  26. <p>Quisque ac iaculis neque. In ac eros vitae nunc elementum pellentesque.
  27. Fusce nec libero ligula, non consectetur libero. Nam tempus ipsum ut arcu fermentum posuere. Nam fringilla facilisis condimentum.</p>
  28. </div>
  29. <div id="tab2" class="tabContent">
  30. <h4>Tab 2</h4>
  31. <p>In ac eros vitae nunc elementum pellentesque.
  32. Fusce nec libero ligula, non consectetur libero. Nam tempus ipsum ut arcu fermentum posuere. Nam fringilla facilisis condimentum.</p>
  33. </div>
  34. <div id="tab3" class="tabContent">
  35. <h4>Tab 3</h4>
  36. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie velit nec mauris aliquam id facilisis quam ultrices. Proin
  37. eget urna quis lorem elementum adipiscing. Fusce tincidunt sem id eros tincidunt vitae fringilla sapien porta. Vivamus tincidunt ultricies
  38. adipiscing. Mauris tellus orci, facilisis id congue a, congue nec est. Quisque ac iaculis neque. In ac eros vitae nunc elementum pellentesque.
  39. Fusce nec libero ligula, non consectetur libero. Nam tempus ipsum ut arcu fermentum posuere. Nam fringilla facilisis condimentum.</p>
  40. </div>
  41. </div>
  42. </div>
  43.  
  44. <script type="text/javascript" src="_assets/behaviour/jquery-1.4.3.min.js"></script>
  45. <script type="text/javascript" src="_assets/behaviour/jquery.ba-bbq.min.js"></script>
  46. <script type="text/javascript">
  47. $(function() {
  48.  
  49. //when the history state changes, gets the url from the hash and display
  50. $(window).bind( 'hashchange', function(e) {
  51.  
  52. var url = $.param.fragment();
  53.  
  54. //hide all
  55. $( '.tabs li.selected' ).removeClass( 'selected' );
  56. $( '#tabWrapper' ).children(".tabContent").removeClass(".selected").hide();
  57.  
  58. //find a href that matches url
  59. if (url) {
  60. $( 'a[href="#' + url + '"]' ).parent().addClass( 'selected' );
  61. $("#" + url).addClass("selected").show();
  62. } else {
  63. $( 'a[href="#tab1"]' ).parent().addClass( 'selected' );
  64. $("#tab1").addClass("selected").show();
  65. }
  66. });
  67.  
  68. // Since the event is only triggered when the hash changes, we need to trigger
  69. // the event now, to handle the hash the page may have loaded with.
  70. $(window).trigger( 'hashchange' );
  71. });
  72. </script>
  73. </body>
  74. </html>

URL: http://benalman.com/projects/jquery-bbq-plugin/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.