Onglets imbriqués de l'interface utilisateur jQuery arrière historique des boutons

Question

J'utilise le jQuery Address plug-in pour que mes onglets de l'interface utilisateur jQuery puissent être mis en signet et soient compatibles avec l'historique des boutons de retour. Fonctionne très bien.

Cependant, je me demandais s'il était possible de fournir le même type de «lien profond» pour les onglets imbriqués? Par exemple, je donne les résultats suivants:

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

Tout fonctionne parfaitement pour les principaux (onglets extérieurs):

• link href de l'onglet se mettre sur l'URL comme a correctement
• onglets externes obéissent les boutons arrière de votre navigateur et avant
• onglets externes sont bookmark-mesure

Cependant, je ne peux pas sembler obtenir le même type de fonctionnalité pour les onglets internes. Étant donné que les onglets imbriqués sont contenus dans l'un des onglets «principaux», la fonction de liaison ci-dessus considère $ (this) comme étant l'onglet externe (même lorsqu'un onglet imbriqué est cliqué). Le résultat est que le code JavaScript s'exécute correctement pour l'onglet imbriqué, puis s'exécute comme si le dernier onglet principal (externe) était l'onglet sélectionné.

Je n'arrive pas à comprendre comment arrêter l'exécution du JavaScript après le traitement de l'onglet imbriqué et avant l'exécution du dernier onglet principal (externe). Le plus proche que je peux obtenir est l'ajout de ce qui suit à la fonction de liaison et arrêter l'exécution sur l'onglet externe contenant les onglets imbriqués.

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

Je suis sûr qu'il me manque quelque chose d'évident. Aucune suggestion?

Merci!

Answer 1

Vous devrez probablement faire une sorte de solution de contournement pour combiner les hachages. Je n'ai pas beaucoup d'expérience avec le plugin .Address, mais que diriez-vous quelque chose comme ceci:

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

Et pour le 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(); 
    }) 
});