jQuery UI选项卡未随容器滚动

Question

jQuery UI选项卡未随容器滚动

javascriptjqueryjquery-uiscrolljquery-ui-tabs

8

设置 :

我有一个包含div，它应该是可滚动的。这是我的jquery ui tab div的容器。

问题:

当我在IE8中滚动容器时，它会滚动其中的其他内容，但jquery UI选项卡的位置似乎是固定的，就好像position = fixed一样。在FF中运行良好。欢迎任何帮助。非常感谢

CSS:

#content {
    overflow:auto;
    margin: 1px;
    height: 700px;
}

div.content-container {
    border: solid 1px #C8C8C8;
    padding:10px;
    background-color: #F5F3E5;
    margin: 1px 2px 10px 1px;
}

js:

$('#tabs').tabs();

html:

<div id="content">
    <div class="content-container">
        <div id="tabs">
         </div>
    </div>
</div>

- Alan Alcock

1

这是一个形式良好的问题。+1 - Phil

仍然没有答案很奇怪，我有同样的问题，已经几个月了。 - Nick-ACNB

我也遇到了这个问题，已经花了很长时间来解决它，但迄今为止还没有找到解决办法。如果我找到了解决方法，我会发布一个答案。 - Jeff Escalante

如果您能抽出时间创建一个jsFiddle，我会非常感激。我可以创建，但准备好它会更有优势。http://www.jsfiddle.net - Gabriel Ryan Nahmias

4个回答

0

请尝试以下操作：

将容器的高度定义为：

.content_container_1    {max-width: 400px;  width: 'auto'; height: 550px;  margin: 10px 0px 0px 10px; } 
  
/*  Tabs  
--------------------------------------------------- */
#tabs li { text-align:center;font:normal 10px; font-family: "Segoe UI", Arial, Sans-serif; } 
#tabs p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } 
#tabs .tabs_img {     float: left;     background-color: #aaa;       margin: 0px 0px 0px 0px; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }
#tabs {height: 100%; overflow: 'auto';}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Creating a windows-like interface with jQuery UI</title>
        <!-- Load the jQuery UI CSS -->

        <link rel="stylesheet" type="text/css" href="mtl.css">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
         
        <!-- Load jQuery first before jQuery UI! -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

        <script>
            $(document).ready(function() {
                //$('#draggable3').dialog({width:'auto',height:'auto'});
            //    $('#tab_container').dialog({width:'600px',height:'auto'});
                $( "#tabs" ).tabs(); 
             //   $('#tab_container').dialog({width:'600px',height:'auto'});
              })
        </script>

        <style>
/* Style sheets for tab.*/

/*  Containers 
--------------------------------------------------- */
.content_container_1    {max-width: 400px;  width: 'auto'; height: 550px;  margin: 10px 0px 0px 10px; } 
  
/*  Tabs  
--------------------------------------------------- */
#tabs li { text-align:center;font:normal 10px; font-family: "Segoe UI", Arial, Sans-serif; } 
#tabs p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } 
#tabs .tabs_img {     float: left;     background-color: #aaa;       margin: 0px 0px 0px 0px; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }
#tabs {height: 100%; overflow: 'auto';}

        </style>        

    </head>
<body>

<!-- Begin Tabs Container -->
<div id="tab_container" class="dialog_window" title="Tab Window Title"> 
  <div class="content_container_1"> 
<!-- Begin Tabs Area -->
    <div id="tabs"> 
      <ul> 
          <li><a href="#tabs-1">jQuery UI</a></li> 
          <li><a href="#tabs-2">jQuery</a></li> 
          <li><a href="#tabs-3">ThemeRoller</a></li> 
      </ul> 
      
      <!-- Begin Tabs Section #1 -->
      <div id="tabs-1" style='max-width:400px;height:450px;overflow:auto; '> 
          <p> 
             <img class="tabs_img" src="images/jquery_ui.png" width="325" height="225" alt="jQuery UI" /><a href="http://jqueryui.com/" target="_blank" title="jQuery UI">jQuery UI</a> was built on top of the jQuery library and features ready to use widgets, advanced effects, animation, and much more.  
          </p> 
          <p> 
             Featuring a powerful and unique CSS theme framework, Themeroller tool and pre-made theme gallery, jQuery UI makes customizing your application fast and easy.  
          </p> 
          <p> 
             Detailed documentation and tutorials available on the <a href="http://jqueryui.com/" target="_blank" title="jQuery UI Official Website">official website</a> allow you to start using and learning jQuery UI right away. jQuery UI is also supported by a large and enthusiastic community of web developers. 
          </p> 
          <p> 
             <a href="http://jqueryui.com/" target="_blank" title="Visit The jQuery UI Website">Visit The Official jQuery UI Website</a> 
          </p> 
      </div> 
      <!-- End Tabs Section #1 -->
    
      <!-- Begin Tabs Section #2 -->
      <div id="tabs-2" style='max-width:400px;height:450px;overflow:auto;'> 
          <p> 
             <img class="tabs_img" src="images/jquery.png" width="325" height="225" alt="jQuery" /><a href="http://jquery.com/" target="_blank" title="jQuery">jQuery</a> is a very popular cross browser JavaScript library that features event handling, animation, Ajax interactions and more for rapid web development.  
          </p> 
          <p> 
             On the official jQuery website you can find <a href="http://docs.jquery.com/" target="_blank" title="detailed documentation">detailed documentation</a>, <a href="http://forum.jquery.com/" target="_blank" title="forums">forums</a> with thousands of posts and responses, information on  <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" target="_blank" title="How to use jQuery with other Libraries">How to use jQuery with other Libraries</a> and much more. 
          </p> 
          <p> 
             jQuery is lightweight, CSS3 compliant and cross browser tested. jQuery was designed to change the way developers write JavaScript! 
          </p> 
          <p> 
             <a href="http://jquery.com/" target="_blank" title="Visit the jQuery Website">Visit the Official jQuery Website</a> 
          </p> 
      </div> 
      <!-- End Tabs Section #2 -->
    
      <!-- Begin Tabs Section #3 -->
      <div id="tabs-3" style='max-width:400px;height:450px;overflow:auto;'> 

        <div id="draggable3" class="dialog_window" title="Traced Modules Minimize">
            <div class="css-tvw"> 
                <ul><li><input type="checkbox" id="Node_2" checked="checked" /><label for="Node_2"><a>SubmitBWTable [ Submit ]</a></label>
                <ul>
                <li><input type="checkbox" id="Node_3" checked="checked" /><label class=moduleM for="Node_3">checkUserLogin [ Common ]</label>
                <ul>
                <li><input type="checkbox" id="Node_4" checked="checked" /><label class=classM for="Node_4">ActivateWindow [ frmConflictManagement ]</label>
                <ul>
                <li><input type="checkbox" id="Node_5" checked="checked" /><label class=sheetM for="Node_5">populateListBoxControls [ frmConflictManagement ]</label>
                <ul>
                <li><input type="checkbox" id="Node_6" checked="checked" /><label class=workbookM for="Node_6">clearLables [ frmConflictManagement ]</label>
                </li>
                </ul>
                <ul><li><input type="checkbox" id="Node_2" checked="checked" /><label for="Node_2">SubmitBWTable [ Submit ]</label>
                <ul>
                <li><input type="checkbox" id="Node_3" checked="checked" /><label class=moduleM for="Node_3">checkUserLogin [ Common ]</label>
                <ul>
                <li><input type="checkbox" id="Node_4" checked="checked" /><label class=classM for="Node_4">ActivateWindow [ frmConflictManagement ]</label>
                <ul>
                <li><input type="checkbox" id="Node_5" checked="checked" /><label class=sheetM for="Node_5">populateListBoxControls [ frmConflictManagement ]</label>
                <ul>
                <li><input type="checkbox" id="Node_6" checked="checked" /><label class=workbookM for="Node_6">clearLables [ frmConflictManagement ]</label>
                </li>
                </ul>       
            </div>
        </div>  

      </div> 
      <!-- End Tabs Section #3 -->
    </div>  
    <!-- End Tabs Area -->
  </div>
 
</div>
<!-- End Tabs Container -->
</body>
</html>

- Rahul Varadkar

0

我在其他组件 - 切换和滑块上也遇到了完全相同的问题。当我使用标准组件时，没有任何问题，但只有在jquery ui库中才会出现这种情况，因此我认为这是一个jQuery UI的错误。

在Firefox / Chrome和IE9上无法复制 - 仅限于IE7 / IE8。

- Insight

0

我在IE7和其他一些浏览器上遇到了同样的问题，花了几个小时尝试了我们能想到的每一个解决方法，但都没有成功。我认为继续调试可能是jquery UI（针对IE7）中的一个bug，所以用三行jquery重写了所有JS代码。供参考，如果其他人也遇到了这个问题，这就是我所做的。 html

<div id='tabs'>

  <ul>
    <li><a href='#tab-1'></a><li>
    <li><a href='#tab-2'></a><li>
    <li><a href='#tab-3'></a><li>
  </ul>

  <div id='tab-1'>
    <p>Some content</p>
  </div>
  <div id='tab-2'>
    <p>Some content</p>
  </div>
  <div id='tab-3'>
    <p>Some content</p>
  </div>

</div>

相关的 CSS（这里使用 SCSS）

#tabs {
  position: relative;
  height: 250px; /* whatever the height is of your container */

   & > div { 
     position: absolute;
     top: 0;
     margin-top: 10px;

   &.hidden { visibility: hidden; }
}

Javascript（需要jQuery）

$('#tabs li a').click(function(){
  $('#tabs > div').addClass('hidden');
  $($(this).attr('href')).removeClass('hidden');
});

希望这能帮到某些人。说实话，这可能比使用完整的选项卡插件要轻量级得多，并且可以很好地完成工作。如果这不够完整或者您无法让此代码正常工作，请给我留言，我会帮助您或发布一个js fiddle。

- Jeff Escalante

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alekop · Accepted Answer

将 position:relative 添加到滚动容器中。这是IE中的常见问题。