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é. Lecture autour Je vois la raison de ceci est que les onglets inactifs ont l'affichage: aucun initialement, ainsi la taille des divs dans l'accordéon ne sont pas calculées correctement. Aucune des solutions proposées ne fonctionne pour moi. Est-ce que quelqu'un a surmonté cela ou a un travail?jquery ui accordéons dans les onglets

Voici quelques exemples 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>

Source

2009-10-09 Paul

J'ai eu le même problème avant. La solution est: Vous devez activer l'accordéon avant les onglets.

$("#accordion").accordion(); 
$("#tabs").tabs();

Vous avez peut-être besoin d'aligner à gauche.

.ui-accordion-header{ 
    text-align: left; 
}

bonne chance

Source

2009-10-21 19:31:00 castocolina

Merci, beaucoup plus simple que la solution I est venu avec! – Paul

Merci beaucoup !!! J'avais tellement de mal à essayer de résoudre ce problème que je n'avais pas réalisé que la solution pouvait être aussi simple. Merci encore. – lidermin

A travaillé comme un charme. Excellente solution – anataliocs

Initialiser accordéon lorsque vous activez l'onglet:

é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 devrez initialiser chaque accordéon spécial pour chaque onglet.

Ou utiliser 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>

Source

2009-10-09 08:14:14 jmav

-1

juste de lire attentivement http://docs.jquery.com/UI/Tabs# il y a une réponse. c'est la façon la plus simple

Source

2009-10-13 06:05:53

Après avoir lu le problème posé, il était mon impression qu'il ya un problème, j'ai rencontré était de même nature. Utiliser 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 ne fonctionnait pas pour moi.

La solution que j'ai trouvé pour remplacer le paramètre par défaut d'accordéon de autoHeight (par défaut true, remplacer false)

$("#accordion").accordion({ 
    autoHeight: false 
}); 
$('#tabs').tabs();

Source

2010-09-01 21:08:15 user261939

Merci beaucoup. Je me suis arraché les cheveux toute la journée pour essayer de résoudre ça. La "réponse acceptée" ci-dessus n'a pas aidé - mais cela l'a corrigé! –

+1 Merci, c'est ce qui a fonctionné pour moi aussi. –

merci cela a fonctionné pour moi –

$("#tabs").tabs({ 
     load: function(event, ui) { 
      $("#"+ui.panel.id+" .accordians:first").accordion(); 
     } 
    });

Cela a fonctionné lors de l'utilisation html ajax avec des onglets.

Source

2011-07-22 21:20:16

Voir

http://bugs.jqueryui.com/ticket/5601

.ui-aide-clearfix {display: block; min-largeur: 0; débordement caché; }

Source

2012-03-15 17:34:25 user965445

Aucune de ces réponses n'a fonctionné pour moi. Pour moi, l'astuce consistait à passer d'un ID div unique pour chaque accordéon à une seule identification de classe pour tous les accordéons. C'est-à-dire, changer: <div id="accordion1>, <div id="accordion2>, etc ... à <div class="accordion"> dans chacun des onglets.

Vous devrez peut-être ajouter à votre $ (document) Fonction .ready

$(".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>

Source

2013-10-28 14:24:13

jquery ui accordéons dans les onglets

Répondre

Questions connexes