Posted By

Meander365 on 11/09/10


Tagged

ajax javascript jquery Linking BBQ deep


Versions (?)

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


 / Published in: jQuery
 

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

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).

  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>

Report this snippet  

You need to login to post a comment.