JQuery UI Аккордеоны внутри вкладок - PullRequest
Новая
       16

JQuery UI Аккордеоны внутри вкладок

26 голосов
/ 09 октября 2009

Я столкнулся с проблемой использования аккордеонов внутри вкладок, изначально неактивные аккордеоны не отображают свое содержимое правильно, когда выбрана их вкладка. Читая вокруг, я вижу причину этого в том, что неактивные вкладки имеют отображение: изначально нет, поэтому высота div в аккордеоне не рассчитывается правильно. Ни одно из предложенных решений не работает для меня. Кто-нибудь преодолел это или обойти?

Вот пример кода проблемы: 

<!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 ]

56 голосов
/ 21 октября 2009

У меня была такая же проблема раньше. Решение: Вы должны активировать аккордеон перед вкладками. 

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

Может быть, вам нужно выровнять по левому краю. 

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

удачи

8 голосов
/ 02 сентября 2010

После прочтения заявленной проблемы у меня сложилось впечатление, что проблема, с которой я столкнулся, носила схожий характер. Использование функции аккордеона на вкладке заставляло мой аккордеонный контент содержать полосу прокрутки, а эта функция мне не нужна.

По тем или иным причинам текущее решение не работает для меня.

Решение, которое я нашел, состояло в том, чтобы перезаписать настройку аккордеона по умолчанию autoHeight (по умолчанию true, перезаписать в false) 

$("#accordion").accordion({
    autoHeight: false
});
$('#tabs').tabs();
1 голос
/ 28 октября 2013

Ничто из вышеперечисленного не сработало для меня. Для меня хитрость заключалась в том, чтобы перейти от использования уникальных идентификаторов div для каждого аккордеона к одному классу для всех аккордеонов. То есть измените: <div id="accordion1>, <div id="accordion2>, и т. Д. ... на <div class="accordion"> в каждой вкладке.

Возможно, вам также понадобится добавить в ваш $ (document) .ready функцию 

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

  $('#tabs').tabs();
  $('#tabs').bind('tabshow', function(event, ui) {
      $(".accordion").accordion("resize");
      });

Таким образом, формат будет: 

<!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 голос
/ 23 июля 2011 
    $( "#tabs" ).tabs({
        load: function(event, ui) {
            $("#"+ui.panel.id+" .accordians:first").accordion();
        }
    });

Это сработало при использовании ajax html с вкладками.

1 голос
/ 09 октября 2009

Инициализация аккордеона при активации вкладки:

образец: 

$('.selector').bind('tabsadd', function(event, ui) {
  ...
});

Ваш образец: 

  <script type="text/javascript">
    $(document).ready(function(){
        $('#tabs').tabs();
    $('#tabs').bind('tabshow', function(event, ui) {
        $("#accordion1").accordion();
        $("#accordion2").accordion(); 
    });

  });
  </script>

Возможно, вам потребуется инициализировать каждый аккордеон специально для каждой вкладки.

Или используйте последний пользовательский интерфейс 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>
0 голосов
/ 15 марта 2012

См

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

.ui-helper-clearfix {display: block; минимальная ширина: 0; переполнение: скрытое; }

0 голосов
/ 13 октября 2009

просто внимательно прочитайте http://docs.jquery.com/UI/Tabs# есть ответ. это самый простой способ

...