web-dev-qa-db-fra.com

JQuery UI Accordétions dans les onglets

J'ai rencontré un problème en utilisant des accordéions dans les onglets, les accordéions initialement inactifs ne rendent pas leur contenu correctement lorsque leur onglet est sélectionné. Lecture autour de ce que je vois la raison en est que les onglets inactifs ont affiché: Aucune initialement, la hauteur des divs dans l'accordéon n'est pas calculée correctement. Aucune des solutions suggérées ne fonctionne pour moi. Vous avez-vous surmonté cela ou avez-vous un travail?

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>
jquery-uijquery-ui-tabs
26
Paul

Après avoir lu le problème indiqué, c'était mon impression qu'un problème que j'ai couru était de nature similaire. L'utilisation de la fonctionnalité d'accordéon dans un onglet a forcé que mon contenu accordéon contient une barre de défilement, une fonctionnalité que je ne voulais pas.

Pour une raison quelconque 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 de l'accordéon par défaut de AutoHeight (défaut de True, écraser à False)

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

Aucune de ces réponses n'a travaillé pour moi. Pour moi, l'astuce consistait à passer de l'utilisation d'un ID divisé unique pour chaque accordéon à une seule identification de classe pour toutes les accordées. C'est-à-dire changement: <div id="accordion1>, <div id="accordion2>,etc ... to<div class="accordion"> Dans chacun des onglets.

Vous devrez peut-être aussi ajouter à votre fonction $ (document) .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>
1
Chuck Schneider

Initialiser l'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 utilisez la dernière UI 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>
1
jmav
    $( "#tabs" ).tabs({
        load: function(event, ui) {
            $("#"+ui.panel.id+" .accordians:first").accordion();
        }
    });

Cela a fonctionné lors de l'utilisation de Ajax HTML avec des onglets.

1
Brant Messenger

Voir

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

.ui-helper-Clearfix {affichage: bloc; min-largeur: 0; débordement caché; }

0
user965445