当前位置： 文江博客话题详情

jquery UI 选项卡不随容器滚动

发布于 2024-11-26 04:39:50 字数 752 浏览 1 评论 0原文

设置：

我有一个包含 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>
原文

Setup :

I have a containing div which is meant to be scrollable. This is a container for my jquery ui tab div.

Problem:

When I scroll the container in IE8 it scrolls other content in it but the jquery UI tab is fixed as though position=fixed. Works fine in FF. Any help welcome. Many thanks

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

乄_柒ぐ汐 2024-12-03 04:39:50

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

Add position:relative to the scrolling container. This is a common issue in IE.

回复 原文
抠脚大汉 2024-12-03 04:39:50

我对其他组件也有完全相同的问题 - 切换器和滑块。当我为此使用标准组件时，我没有遇到任何问题，但它只发生在 jquery ui 库中，所以我认为这是一个 jQuery UI 错误。

无法在 Firefox/Chrome 和 IE9 上重现 - 仅限 IE7/IE8。

I have the exactly same problems with other components - toggles and slider. When I use standard components for this I have no troubles, but it occurs only with the jquery ui library so I suppose it is a jQuery UI bug.

Can't reproduce on Firefox/Chrome and IE9 - only IE7/IE8.

回复 原文
南风起 2024-12-03 04:39:50

我在 IE7 和其他一些浏览器中也遇到了同样的问题，我花了几个小时尝试了我们能想到的所有修复方法，但没有成功。我认为继续调试可能是 jquery UI（对于 IE7）中的错误的东西并在三行 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 小提琴。

I had this same problem in IE7 and a few others and I spent a couple hours trying every fix we could possibly think of, but to no avail. I figured it wasn't anywhere close to worth it to continue debugging something that was probably a bug in jquery UI (for IE7) and rewrote all the JS in three lines of jquery. For reference, if anyone else is struggling with it, this is what I did.

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>

relevant css (using scss here)

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

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

   &.hidden { visibility: hidden; }
}

javascript (requires jquery)

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

Hope this helps someone. This is probably a lot lighter weight than using the full tabs plugin anyway, in all honesty, and gets the job done quite nicely. If this is not complete enough or you can't get this code to work, drop me a comment and I'll help you out or put up a js fiddle.

回复 原文
原来是傀儡 2024-12-03 04:39:50

尝试以下操作：

将容器的高度定义为：

.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>

Try following:

Define the height of container as:

.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>

回复 原文
~没有更多了~

关于作者

烟若柳尘

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文