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" parente ?

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

Donnez un titre à votre division cible, par exemple :

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

et donnez le même titre à vos liens d'onglets :

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

Il semble que cela ne soit pas possible avec la version actuelle de jQueryUI (1.7.2) sans modification de l'événement.

J'ai soumis un patch pour envisager une solution plus gracieuse.

Answer 3

Utilice aria-controls l'attribut li pour sélectionner la balise 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>