Вкладки jQueryUI в диалоге jQueryUI - как получить полосу прокрутки только для содержимого вкладки, а не для всего диалогового окна? - PullRequest
Новая
       11

Вкладки jQueryUI в диалоге jQueryUI - как получить полосу прокрутки только для содержимого вкладки, а не для всего диалогового окна?

2 голосов
/ 11 сентября 2011

Я использую вкладки jQueryUI внутри диалогового окна jQueryUI. Содержимое в каждой панели вкладок может быть довольно большим - например, внутри каждой отдельной вкладки может быть таблица с сотнями строк. Поэтому для навигации по содержимому необходимы полосы прокрутки.

По умолчанию диалоговая панель отображает собственную полосу прокрутки - что не совсем то, что я хочу. Эта полоса прокрутки заставляет сами вкладки навигации перемещаться вверх и из поля зрения. Я бы предпочел, чтобы каждая панель вкладок отображала собственную полосу прокрутки, если необходимо, но оставляла вкладки навигации видимыми. Я попытался установить «переполнение: скрытый» для диалоговой панели, а затем «переполнение: авто» для отдельных вкладок (см. Ниже). Но тогда панели вкладок не получают полосы прокрутки, даже когда контент требует этого.

Ниже приведен (сокращенный) контрольный пример, в котором показана проблема, включая мою попытку использовать стили переполнения для ее решения. Замените «Большой контент ...» на что-то, что потребует полос прокрутки, и вы увидите это.

Надеюсь, это достаточно ясно. Есть идеи, как решить эту проблему? Большое спасибо ... 

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#dialog").dialog({height:300});
   $("#tabs").tabs();
});
</script>
</head>
<body>
   <div id="dialog" style="overflow:hidden;">
      <div id="tabs">
        <ul>
          <li><a href="#tab-1">tab-1</a></li>
          <li><a href="#tab-2">tab-2</a></li>
        </ul>
        <div id="tab-1" style="overflow:auto;">Big content...</div>
        <div id="tab-2" style="overflow:auto;">Big content...</div>
      </div>
   </div>
</body>
</html>

1 Ответ

2 голосов
/ 11 сентября 2011

Вы можете ограничить высоту каждого div, который содержит ваш контент, то есть: 

height:100px;
overflow:auto;

Демо: http://jsfiddle.net/AeXNP/

Что делает все очень простым.

Редактировать : более сложная часть возникает, когда (как вы просили ниже), когда размер контента изменяется в зависимости от изменения размера диалогового окна пользователем.In включает в себя гораздо больше CSS ... Чтобы использовать переполнение в вашем случае, вам требуется высота div.Поскольку высота все время меняется, вы не знаете, какой она будет.Поэтому вам нужно вручную установить поля и отступы, чтобы вы могли установить высоту на «авто».Таким образом, CSS для самораскрывающегося содержимого вкладки: 

.fixedSizedTab {
    overflow:auto;     
    position:absolute; 
    height:auto; 
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:50px; 
    margin-bottom:10px; 
    margin-right:0px; 
    margin-left:0px;
}

Демо: http://jsfiddle.net/AeXNP/2/

...