Partager un élément entre les onglets de jQuery UI ?

Question

J'utilise les onglets de jQuery UI pour diviser le contenu de ma page. J'ai une "barre de liens" que je voudrais accrocher au bas de chaque onglet. (Le texte des onglets changera, mais en général, ils feront naviguer l'utilisateur à gauche ou à droite dans les onglets).

Le fait de placer la barre de liens à l'intérieur du premier onglet lui donne un aspect correct, à l'intérieur de la bordure de Themeroller. En le plaçant juste à l'extérieur de la division "onglet parent", les liens sont placés en dessous de la bordure du thème. J'ai essayé de créer un div d'espacement mais cela ne fait que pousser #linkBar plus bas.

Bien sûr, lorsque l'utilisateur passe à un autre onglet, la barre de liens disparaît. Comment la propriété des éléments est-elle organisée entre les onglets ? Dois-je détruire dynamiquement la div #linkBar dans l'onglet dont on s'éloigne et la reconstruire dans l'onglet vers lequel on se dirige ? Ou existe-t-il un meilleur moyen de la déplacer d'un onglet à l'autre, ou de gérer simplement la visibilité ?

J'aimerais que la barre de liens suive le contenu de chaque onglet comme un pied de page, "flottant" une ou deux lignes sous le dernier contenu de chaque onglet (plutôt que d'avoir une position fixe par rapport à la barre d'onglets).

Answer 1

Ok ... Il s'agissait simplement d'ajouter les classes jQuery UI à la barre de liens. Regardez ma démo de jsFiddle qui fonctionne :

J'ai déplacé le linkBar en dehors de la tabOne et le placer au bas de la page tabs div :

<div id="container">
    <div id="title">
      <h1>title bar</h1>
    </div>
    <div id="tabs">
        <ul>  
            <li><a href="#tabone">one</a></li>  
            <li><a href="#tabtwo">two</a></li>  
            <li><a href="#tabthree">three</a></li>
        </ul>  
        <div id="tabone">
            content goes here
            <br><br><br><br>more stuff<br><br><br>more stuff<br><br>
        </div>    
        <div id="tabtwo">
             content goes here...
        </div>
        <div id="tabthree">
             content goes here...
        </div>
        <div id="linkBar">
            <span id="leftLink"><< left link</span>
            <span id="rightLink">right link >></span>
        </div>
    </div>
</div>

J'ai légèrement modifié le linkBar en lui donnant une marge supérieure et inférieure et en le masquant par défaut :

#linkBar {
    display: none;
    margin: 10px auto;
}

Ensuite, j'ai simplement ajouté les classes jQuery UI à la section $linkBar . J'ai légèrement modifié le jQuery pour être plus lisible :

$("#accordion").accordion({ header: "h3" });

var $tabs = $("#tabs"),
    $linkBar = $("#linkBar");

$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();

$('#title').click(function() {

    $tabs.tabs('select', 0);
    return false;

});

Note : Vous pouvez simplement ajouter class="ui-tabs-panel ui-widget-content ui-corner-bottom" à la linkBar div et d'en finir avec elle. Mais, je pense que je préfère qu'il soit géré dans le JS.