Вложенные jQuery UI Вкладки История кнопки Назад - PullRequest
Новая
       33

Вложенные jQuery UI Вкладки История кнопки Назад

3 голосов
/ 27 августа 2010

Я использую плагин jQuery Address , чтобы сделать вкладки jQuery UI доступными для закладок и совместимыми с историей кнопок возврата. Прекрасно работает.

Однако мне было интересно, можно ли обеспечить такой же тип «глубоких ссылок» для вложенных вкладок? Например, у меня есть следующее: 

<div id="tabs">
 <ul class="links">
  <li><a href="#one">main tab one</a></li>     
  <li><a href="#two">main tab two</a></li>
  <li><a href="#three">main tab three</a></li>
  <li><a href="#four">main tab four</a></li>
 </ul>
 <div id="one">  Main tab one content </div> 
 <div id="two">
  Main tab two content 
  <div id="nested">
   <ul>
    <li><a href="#nestedone">nested tab one</a></li>
    <li><a href="#nestedtwo">nested tab two</a></li>
    <li><a href="#nestedthree">nested tab three</a></li>
   </ul>
   <div id="nestedone"> nested tab one </div>
   <div id="nestedtwo"> nested tab two </div>
   <div id="nestedthree"> nested tab three </div>
  </div> <!-- end nested -->
 </div> 
 <div id="three">  Main tab three content </div> 
 <div id="fout">  Main tab four content </div> 
</div> <!-- end tabs -->


<script>
$(document).ready(function(){
   /* main tabs stuff */
   var $tabs = $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
   $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

   /* nested tabs */
   var $nested = $("#nested").tabs().addClass('ui-tabs-hz');
   $("#nested ul").removeClass('ui-tabs-nav');

   /* show the hash's tab whenever the address is changed */
   $.address.change(function(event){               
      $("#tabs").tabs( "select" , window.location.hash ) ;  
   })

   /* when the tab is selected update the url with the hash */
   $("#tabs").bind("tabsselect", function(event, ui) {          
      window.location.hash = ui.tab.hash;                           
   })
});
</script>

Все отлично работает для основного (внешние вкладки):

  • ссылка href вкладки помещается на URL-адрес как правильно
  • внешние вкладки подчиняются кнопкам браузера назад и вперед
  • внешние вкладки можно закладывать

Однако я не могу получить такой же тип функциональности для внутренних вкладок.

Учитывая, что вложенные вкладки содержатся в одной из «главных» вкладок, вышеуказанная выше функция связывания видит $ (this) как внешнюю вкладку (даже если щелкнуть вложенную вкладку). В результате код JavaScript выполняется правильно для вложенной вкладки, но затем выполняется так, как если бы последняя главная (внешняя) вкладка была выбранной вкладкой.

Я не могу понять, как остановить выполнение JavaScript после обработки вложенной вкладки и до запуска последней главной (внешней) вкладки. Самое близкое, что я могу получить, это добавить следующее в функцию связывания и остановить выполнение на внешней вкладке, содержащей вложенные вкладки. 

   $("#tabs").bind("tabsselect", function(event, ui) {          
      if ($(ui.tab).closest('div').attr('id') !== "nested") {
         window.location.hash = ui.tab.hash; 
      }                     
   })

Я уверен, что упускаю что-то очевидное. Есть предложения?

Спасибо!

1 Ответ

0 голосов
/ 10 декабря 2011

Возможно, вам придется сделать какой-то обходной путь для объединения хэшей.У меня нет большого опыта работы с плагином .address, но как насчет этого: 

<div id="tabs">
 <ul class="links">
  <li><a href="#one">main tab one</a></li>     
  <li><a href="#two">main tab two</a></li>
  <li><a href="#three">main tab three</a></li>
  <li><a href="#four">main tab four</a></li>
 </ul>
 <div id="one">  Main tab one content </div> 
 <div id="two">
  Main tab two content 
  <div id="nested">
   <ul>
    <li><a href="#two-nestedone">nested tab one</a></li>
    <li><a href="#two-nestedtwo">nested tab two</a></li>
    <li><a href="#two-nestedtwo">nested tab three</a></li>
   </ul>
   <div id="two-nestedone"> nested tab one </div>
   <div id="two-nestedtwo"> nested tab two </div>
   <div id="two-nestedthree"> nested tab three </div>
  </div> <!-- end nested -->
 </div> 
 <div id="three">  Main tab three content </div> 
 <div id="four">  Main tab four content </div> 
</div> <!-- end tabs -->

А для javascript: 

$(document).ready(function(){
   /* main tabs stuff */
   var $tabs = $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
   $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

   /* nested tabs */
   var $nested = $("#nested").tabs().addClass('ui-tabs-hz');
   $("#nested ul").removeClass('ui-tabs-nav');

   /* show the hash's tab whenever the address is changed */
   $.address.change(function(event){               
      var arrParts = window.location.hash.substring(1).split("-");      
      $("#tabs").tabs( "select" , '#' + arrParts[0] ) ;
      if (arrParts.length > 1) {  
        $("#nested").tabs( "select" , '#' + arrParts[1] ) ;  
      }
   })

   /* when the tab is selected update the url with the hash */
   $("#tabs, #nested").bind("tabsselect", function(event, ui) {          
      window.location.hash = ui.tab.hash;                           
      event.stopPropagation();
   })
});
...