plugins onglets jQuery sémantique accessible

Question

Juste une petite question pour voir si quelqu'un sait de tous les plugins onglets jquery qui exécutent basés sur une structure similaire à:

<div class="tabs"> 
    <div> 
     <h4>Tab one</h4> 
     <p>Lorem Ipsum</p> 
    </div> 

    <div> 
     <h4>Tab two</h4> 
     <p>Lorem Ipsum</p> 
    </div> 
</div> 

Lorsque le plug-in prend le titre des onglets des H4S ? Je ne peux pas sembler trouver des plugins qui utilisent la structure:

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Tab 1 content</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tab 2 content</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Tab 3 content</p> 
    </div> 
</div> 

Je suppose que la seule autre façon d'utiliser ces plug-ins serait de saisir les titres, les supprimer, les ajouter dans une liste en haut du html puis exécutez le plugin basé sur cela? Je demande juste parce que je suis assez nouveau à jQuery alors je ne suis pas sûr de la façon dont je m'y prendrais et je me demandais juste s'il existait déjà un plugin dont personne n'était au courant.

Sinon, ne vous inquiétez pas, je vais devoir m'occuper des docs et essayer!

Vive

Answer 1

j'ai réussi à mettre quelque chose ensemble pour obtenir le code HTML à la structure correcte pour utiliser les onglets de l'interface utilisateur jQuery - Espérons que quelqu'un peut apprendre quelque chose de ça!

$(document).ready(function() { 
    $.fn.reverse = [].reverse; //Set the reverse function 
    $('#tabs div h4').reverse().prependTo('#tabs'); //Grab the headings and reverse them, then prepend to outer div 
    $('#tabs h4').wrap('<li></li>'); //wrap each heading in an li 
    $('#tabs > li').wrapAll('<ul class="tabheadings"></ul>'); //wrap all li's in ul 
    $('#tabs ul li h4').each(function(){ 
     $(this).replaceWith('<a>' + $(this).text() + '</a>'); //for each heading replace with an anchor but keep innards 
    }); 
    $('#tabs div.in_content_box').each(function(i){ 
     $(this).attr('id', 'tabs-' + (i+1)); //for each div add an id with an incremental number 
    }); 
    $('#tabs ul li a').each(function(i){ 
     $(this).attr('href', '#tabs-' + (i+1)); //match the href on the anchor with the id above 
    }); 



}); 

Answer 2

jQuery Accessible Tabs est presque là, sauf l'en-tête se trouve en dehors de la div cible.