jQuery ui accordéons dans les onglets
J'ai rencontré un problème en utilisant des accordéons dans les onglets, les accordéons initialement inactifs ne rendent pas leur contenu correctement lorsque leur onglet est sélectionné. En lisant autour de moi, je vois la raison en est que les onglets inactifs ont display: none initialement, de sorte que la hauteur des divs dans l'accordéon n'est pas calculée correctement. Aucune des solutions suggérées ne fonctionne pour moi. Est-ce que quelqu'un a surmonté cela ou a un travail autour?
Voici un exemple de code du problème:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
<script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabs();
$("#accordion1").accordion();
$("#accordion2").accordion();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="main" class="round roundB">
<div id="tabs">
<ul>
<li><a href="#tab1">Tab 1</a> </li>
<li><a href="#tab2">Tab 2</a> </li>
</ul>
<div id="tab1">
<div id="accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
TAB 1 Accordion 1
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
TAB 1 Accordion 2
</p>
</div>
</div>
</div>
<div id="tab2">
<div id="accordion2">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
TAB 2 Accordion 1
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
TAB 2 Accordion 2
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
7 réponses
J'ai eu le même problème avant. La solution est la suivante: vous devez activer l'accordéon avant les onglets.
$("#accordion").accordion();
$("#tabs").tabs();
Peut-être que vous avez besoin d'aligner à gauche.
.ui-accordion-header{
text-align: left;
}
Bonne chance
Après avoir lu le problème déclaré, j'ai eu l'impression qu'un problème que j'ai rencontré était de nature similaire. L'utilisation de la fonctionnalité accordéon dans un onglet forçait mon contenu accordéon à contenir une barre de défilement, une fonctionnalité que je ne voulais pas.
Pour une raison ou une autre, la solution actuelle fournie n'a pas fonctionné pour moi.
La solution que j'ai trouvée était d'écraser le réglage d'accordéon par défaut de autoHeight (par défaut de true, écraser à false)
$("#accordion").accordion({
autoHeight: false
});
$('#tabs').tabs();
Initialisez accordéon lorsque vous activez tab:
Échantillon:
$('.selector').bind('tabsadd', function(event, ui) {
...
});
Votre échantillon:
<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabs();
$('#tabs').bind('tabshow', function(event, ui) {
$("#accordion1").accordion();
$("#accordion2").accordion();
});
});
</script>
Peut-être que vous aurez besoin d'initialiser chaque accordéon spécial pour chaque onglet.
Ou utilisez la dernière interface utilisateur lib:
<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
$( "#tabs" ).tabs({
load: function(event, ui) {
$("#"+ui.panel.id+" .accordians:first").accordion();
}
});
Cela a fonctionné lors de l'utilisation d'ajax html avec des onglets.
Rien de ce qui précède n'a fonctionné pour moi. Pour moi, l'astuce était de passer de L'utilisation d'ID div uniques pour chaque accordéon à une identification de classe unique pour tous les accordéons. C'est-à-dire, change: <div id="accordion1>, <div id="accordion2>, etc... de<div class="accordion"> dans chacun des onglets.
Vous devrez peut-être également ajouter à votre $(document).fonction prête
$(".accordion").accordion({ autoHeight: false }); $('#tabs').tabs(); $('#tabs').bind('tabshow', function(event, ui) { $(".accordion").accordion("resize"); });
Donc le format serait:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
<script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".accordion").accordion({
autoHeight: false
});
$('#tabs').tabs();
$('#tabs').bind('tabshow', function(event, ui) {
$(".accordion").accordion("resize");
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
<ul>
<li><a href="#tabs-1">User</a></li>
<li><a href="#tabs-2">Folders</a></li>
<li><a href="#tabs-3">Decks</a></li>
</ul>
<div id="tabs-1">
<div class='accordion'>
<h3>Header 1</h3>
<div</div>
<h3>Header 2</h3>
<div></div>
<h3>Header 3</h3>
<div><</div>
</div>
</div>
<div id="tabs-2">
<div class='accordion'>
<h3>Header 4</h3>
<div</div>
<h3>Header 5</h3>
<div></div>
<h3>Header 6</h3>
<div><</div>
</div>
</div>
<div id="tabs-3">
<div class='accordion'>
<h3>Header 7</h3>
<div</div>
<h3>Header 8</h3>
<div></div>
<h3>Header 9</h3>
<div><</div>
</div>
</div>
</div>
</body>
</html>
Voir
Http://bugs.jqueryui.com/ticket/5601
.ui-helper-clearfix { display:block; min-width: 0; overflow: hidden; }
Il suffit de lire attentivement http://docs.jquery.com/UI/Tabs# il y a une réponse. c'est le moyen le plus simple