JQuery UI选项卡：嵌套选项卡，AJAX加载和后退按钮

Question

我正在使用AJAX加载JQuery UI选项卡。

我有3个级别的嵌套UI选项卡：

1. 垂直
2. 水平
3. 水平

大部分的东西是只有2级深，但有些是3问题是第三级。我也跟着这样的：

http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/

但它不包括标签的嵌套。

页面的布局是这样的：

<script type="text/javascript"> 
    var tabs; 
    var tab_a_selector; 
    var tab_a_vertical_selector; 

    $(function() {    

     $("#menuTabs").tabs({ 
      ajaxOptions: { 
       cache: false 
      } 
     }).addClass("ui-tabs-vertical ui-helper-clearfix"); 
     $("#menuTabs li").removeClass('ui-corner-top').addClass('ui-corner-left'); 
     $(".ui-tabs-vertical .ui-tabs-nav").removeClass("ui-tabs-nav").addClass("ui-tabs-nav-vert") 

     $("#menuItem0").tabs(); 
     $("#menuItem1").tabs(); 
     //... 

     /* -- enables Back button for nested tabs -- */ 

     // The "tab widgets" to handle. 
     tabs = $('.tabs'); 

     // This selector will be reused when selecting actual tab widget A elements. 
     tab_a_selector = 'ul.ui-tabs-nav a'; 
     tab_a_vertical_selector = 'ul.ui-tabs-nav-vert a'; 
     // Enable tabs on all tab widgets. The `event` property must be overridden so 
     // that the tabs aren't changed on click, and any custom event name can be 
     // specified. Note that if you define a callback for the 'select' event, it 
     // will be executed for the selected tab whenever the hash changes. 
     tabs.tabs({ event: 'change' }); 

     // Define our own click handler for the tabs, overriding the default. 
     tabs.find(tab_a_selector).click(function(){ 
      var state = {}; 

      // Get the id of this tab widget. 
      id = $(this).closest('.tabs').attr('id'); 

      // Get the index of this tab. 
      idx = $(this).parent().prevAll().length; 

      // Set the new state 
      // This is done as below to remove any state from deeper levels of nested tabs. 
      state ['menuTabs'] = $.bbq.getState('menuTabs'); 
      state[ id ] = idx;     
      $.bbq.pushState(state, 2); 
     }); 
     tabs.find(tab_a_vertical_selector).click(function(){     
      var state = {}; 

      // Get the id of this tab widget. 
      id = $(this).closest('.tabs').attr('id'); 

      // Get the index of this tab. 
      idx = $(this).parent().prevAll().length; 

      // Set the state! 
      state[ id ] = idx; 

      // 2 -> replaces old state with new state. meaning indexes of nested tabs are removed 
      $.bbq.pushState(state, 2); 
     }); 

     // Bind an event to window.onhashchange that, when the history state changes, 
     // iterates over all tab widgets, changing the current tab as necessary. 
     $(window).bind('hashchange', function(e) {    

      // Iterate over all tab widgets. 
      tabs.each(function(){ 

       // Get the index for this tab widget from the hash, based on the 
       // appropriate id property. In jQuery 1.4, you should use e.getState() 
       // instead of $.bbq.getState(). The second, 'true' argument coerces the 
       // string value to a number. 
       var idx = $.bbq.getState(this.id, true) || 0; 

       // Select the appropriate tab for this tab widget by triggering the custom 
       // event specified in the .tabs() init above (you could keep track of what 
       // tab each widget is on using .data, and only select a tab if it has 
       // changed). 
       $(this).find(tab_a_selector).eq(idx).triggerHandler('change'); 
       $(this).find(tab_a_vertical_selector).eq(idx).triggerHandler('change'); 
      });     
     }) 

     // Since the event is only triggered when the hash changes, we need to trigger 
     // the event now, to handle the hash the page may have loaded with. 
     $(window).trigger('hashchange'); 

     /* -- END enables Back button for nested tabs -- */ 
    }); 
</script> 

<div id="menuTabs" class="tabs"> 
    <ul> 
     <li><a href="#menuItem0">menuItem0</a></li> 
     <li><a href="#menuItem1">menuItem1</a></li> 
     <li><a href="#menuItem2">menuItem2</a></li> 
    </ul> 

    <div id="menuItem0" class="tabs"> 
     <ul> 
      <li><a href="content/menuItem0/Intro.html">Intro</a></li> 
     </ul>      
    </div> 
    <div id="menuItem1" class="tabs"> 
     <ul> 
      <li><a href="content/menuItem1/Intro.html">Introduction</a></li> 
      <li><a href="content/menuItem1/Guide.html">Guide</a></li> 
      <li><a href="content/menuItem1/abc.html">abc</a></li>      
     </ul>      
    </div> 
    <!--...--> 
</div> 

标签的第三级是在上面的html页面，如实例abc.html：

<script type="text/javascript"> 

    var rNumberTabs = $("#rNumber").tabs(); 
    rNumberTabs.tabs({ event: 'change' }); 
    rNumberTabs.find(tab_a_selector).click(function(){ 
     var state = {}; 

     // Get the id of this tab widget. 
     id = $(this).closest('.tabs').attr('id'); 

     // Get the index of this tab. 
     idx = $(this).parent().prevAll().length; 

     // Set the state! 
     state[ id ] = idx;     
     $.bbq.pushState(state); 
    }); 
    tabs = tabs.add(grNumberTabs); 
    // If this is triggered it leads to an infinte loop, 
    // if not, I can't even browse to any other tab than the first 
    // one on he third level, eg. it automatically jumps back 
    // to first one. 
    $(window).trigger('hashchange'); 
</script> 
<div id="rNumber" class="tabs"> 
    <ul> 
     <li><a href="#layout">Layout</a></li>  
     <li><a href="#prefix">Prefix</a></li> 
    </ul> 
    <div id="layout"> 
     <!-- Content here --> 
    </div> 
    <div id="prefix"> 
     <!-- Content here --> 
    </div> 
</div> 

任何想法如何我可以解决？

Answer 1

所以这里我现在的解决方案。无限循环的问题似乎是由于使用AJAX加载选项卡时导致的，每次点击它时都会再次加载该选项卡。由于包含第三级选项卡的选项卡也包含JavaScript（请参阅问题），因此重新加载此选项卡会导致问题。

的解决方案是缓存选项卡：

$("#menuTabs").tabs({ 
    cache: true, 
    ajaxOptions: { 
     cache: false 
    } 
}) 

注：必须设置阿贾克斯缓存为false：

http://docs.jquery.com/UI/Tabs#option-cache

同为标签的第3级。此处还可以移除对hashchange事件的调用。

var rNumberTabs = $("#rNumber").tabs({ 
    cache: true, 
    ajaxOptions: { 
     cache: false 
    } 
}); 
//snipped.. 
//$(window).trigger('hashchange'); remove this line