发表新帖
发表新帖

jquery ui accordions within tabs

后端 未结
关注
7 548
失恋的感觉
失恋的感觉 2020-12-05 10:17

I’ve run into a problem using accordions within tabs, the initially inactive accordions do not render their content correctly when their tab is selected. Reading around I s

相关标签:
7条回答
  • 逝去的感伤
    2020-12-05 10:41

    After reading the stated problem, it was my impression that a problem I have run into was of a similar nature. Using the accordion functionality within a tab was forcing my accordion content to contain a scrollbar, a feature I did not want.

    For some reason or another, the current solution provided did not work for me.

    The solution I found was to overwrite the default accordion setting of autoHeight (default of true, overwrite to false)

    $("#accordion").accordion({
    autoHeight: false
});
$('#tabs').tabs();
    0 讨论(0)
  • 清歌不尽
    2020-12-05 10:45

    See

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

    .ui-helper-clearfix { display:block; min-width: 0; overflow: hidden; }

    0 讨论(0)
  • 挽巷
    2020-12-05 10:49

    None of the above worked for me. For me, the trick was to change from using unique div IDs for each accordion to a single class identification for all accordions. That is, change: <div id="accordion1>, <div id="accordion2>,etc... to<div class="accordion"> within each of the tabs.

    You may also need to add to your $(document).ready function

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

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

    So the format would be:

    <!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>
    0 讨论(0)
  • 刺人心
    2020-12-05 10:51

    just read carefully http://docs.jquery.com/UI/Tabs# there is an answer. it's simpliest way

    0 讨论(0)
  • 名媛妹妹
    2020-12-05 10:57

    I had the same problem before. The solution is: You must active accordion before tabs.

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

    Maybe you need left align.

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

    good luck

    0 讨论(0)
  • 鱼传尺愫
    2020-12-05 10:57

    Initialize accordion when you activate tab:

    sample:

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

    your sample:

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

  });
  </script>

    Maybe that you will need to initialize every accordion special for each tab.

    Or use latest 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>
    0 讨论(0)
 看不清?
提交回复
热议问题