plugin onglets jQuery sémantique accessible
-
20-09-2019 - |
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>
Si le plugin 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 de l'html et puis exécutez le plug-in sur cette base? Je demande juste que je suis tout à fait nouveau pour jQuery donc je ne sais pas comment j'irais à ce sujet et me demandais s'il y avait un plugin déjà existant que tout le monde connaissait.
Sinon, ne vous inquiétez pas, je vais devoir nous occuper avec les docs et lui donner un aller!
Vive
La solution
J'ai réussi à mettre quelque chose ensemble pour obtenir le code HTML à la structure correcte à utiliser les onglets jQuery UI sur - Espérons que quelqu'un peut apprendre quelque chose de ce
$(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
});
});
Autres conseils
jQuery onglets accessibles est presque là, sauf l'en-tête se trouve en dehors de la div cible.