jquery UI Tab không di chuyển với container

Setup:jquery UI Tab không di chuyển với container

Tôi có một div chứa mà được hiểu là cuộn. Đây là một container cho div tab jquery jui của tôi.

Vấn đề:

Khi tôi di chuyển container trong IE8 nó cuộn nội dung khác trong nó, nhưng tab UI jquery là cố định như position = cố định. Hoạt động tốt trong FF. Bất kỳ sự trợ giúp nào. Rất cám ơn

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>

Nguồn

2011-07-25 Alan Alcock

Thật là một câu hỏi cũng được hình thành.+1 – Phil

Vẫn không có câu trả lời là lẻ, tôi có cùng một vấn đề và nó đã được một vài tháng rồi. –

Tôi cũng gặp phải vấn đề này và đã dành rất nhiều thời gian để sửa chữa không có kết quả. Tôi sẽ đăng một câu trả lời nếu tôi tìm ra nó –

Thêm position:relative vào vùng chứa cuộn. Đây là một vấn đề phổ biến trong IE.

Nguồn

2012-04-26 18:42:22 alekop

Tôi có chính xác cùng một vấn đề với các thành phần khác - toggles và trượt. Khi tôi sử dụng các thành phần tiêu chuẩn cho điều này tôi không có rắc rối, nhưng nó chỉ xảy ra với thư viện jquery ui vì vậy tôi cho rằng đó là một lỗi giao diện người dùng jQuery.

Không thể tái tạo trên Firefox/Chrome và IE9 - chỉ có IE7/IE8.

Nguồn

2011-07-30 15:07:00 Insight

Tôi đã gặp vấn đề tương tự trong IE7 và một vài người khác và tôi đã dành một vài giờ cố gắng mọi sửa chữa chúng tôi có thể nghĩ, nhưng vô ích. Tôi nghĩ rằng nó không phải là bất cứ nơi nào gần giá trị nó để tiếp tục gỡ lỗi một cái gì đó mà có lẽ là một lỗi trong giao diện người dùng jquery (cho IE7) và viết lại tất cả các JS trong ba dòng jquery. Để tham khảo, nếu bất cứ ai khác đang đấu tranh với nó, đây là những gì tôi đã làm.

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 liên quan (sử dụng SCSS đây)

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

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

    &.hidden { visibility: hidden; } 
}

javascript (yêu cầu jquery)

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

Hy vọng điều này sẽ giúp ai đó. Điều này có lẽ là trọng lượng nhẹ hơn rất nhiều so với việc sử dụng các plugin tab đầy đủ anyway, trong tất cả sự trung thực, và được công việc thực hiện khá độc đáo. Nếu điều này là không đủ hoặc bạn không thể nhận được mã này để làm việc, thả cho tôi một bình luận và tôi sẽ giúp bạn ra ngoài hoặc đưa lên một js fiddle.

Nguồn

2012-01-05 22:40:54

Hãy thử sau:

Xác định chiều cao của container như:

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

Nguồn

2016-10-02 14:35:28

jquery UI Tab không di chuyển với container

Trả lời

Các vấn đề liên quan