Comment spécifier le panneau cible de l'onglet jQueryUI?

Question

Quel est le moyen le plus propre de spécifier un panneau cible partagé pour les onglets jQueryUI lorsque tout le contenu est chargé via AJAX et que la cible se trouve en dehors de la div «tabs» parent?

Par exemple:

<div id="tabs"> 
    <ul> 
    <li><a href="link1.html" title="Go to Link 1"><span>Link 1</span></a></li> 
    <li><a href="link2.html" title="Go to Link 2"><span>Link 2</span></a></li> 
    <li><a href="link3.html" title="Go to Link 3"><span>Link 3</span></a></li> 
    <li><a href="link4.html" title="Go to Link 4"><span>Link 4</span></a></li> 
    </ul> 
</div> 

<div id="panel">Content should be loaded here.</div> 

EDIT: Je préférerais avoir un attribut de titre unique par lien

Answer 1

Il semble que ce n'est pas possible avec la version actuelle de jQueryUI (1.7.2) sans modification d'événement.

J'ai soumis un patch pour considération pour une solution plus gracieuse.

Answer 2

Donnez votre cible div un titre, par exemple:

<div id="panel" title="contentPane">Content should be loaded here.</div> 

et donner à votre onglet liens le même titre:

<div id="tabs"> 
    <ul> 
    <li><a href="link1.html" title="contentPane"><span>Link 1</span></a></li> 
    <li><a href="link2.html" title="contentPane"><span>Link 2</span></a></li> 
    <li><a href="link3.html" title="contentPane"><span>Link 3</span></a></li> 
    <li><a href="link4.html" title="contentPane"><span>Link 4</span></a></li> 
    </ul> 
</div> 

Answer 3

Utilisez aria-controls attribut li tag pour sélectionner le id du panneau

<div id="tabs"> 
    <ul> 
    <li aria-controls="panel"><a href="link1.html"><span>Link 1</span></a></li> 
    <li aria-controls="panel"><a href="link2.html"><span>Link 2</span></a></li> 
    <li aria-controls="panel"><a href="link3.html"><span>Link 3</span></a></li> 
    <li aria-controls="panel"><a href="link4.html"><span>Link 4</span></a></li> 
    </ul> 
    <div id="panel" >Content should be loaded here.</div> 
</div>