2

jQueryUIダイアログボックス内でjQueryUIタブを使用しています。各タブ パネルのコンテンツは非常に大きくなる可能性があります。たとえば、個々のタブ パネル内に数百行のテーブルが存在する場合があります。そのため、コンテンツをナビゲートするにはスクロールバーが必要です。

デフォルトでは、ダイアログ パネルには独自のスクロールバーが表示されますが、これは私が望んでいるものではありません。このスクロールバーにより、ナビゲーション タブ自体が上に移動して表示されなくなります。私が望むのは、必要に応じて各タブ パネルに独自のスクロール バーを表示し、ナビゲーション タブは表示したままにすることです。ダイアログ パネルに「overflow:hidden」を設定してから、個々のタブ パネルに「overflow:auto」を設定してみました (以下を参照)。ただし、コンテンツで必要な場合でも、タブパネルにスクロールバーが表示されません。

以下は、問題を示す (簡略化された) テスト ケースです。オーバーフロー スタイルを使用して問題を解決しようとした試みも含まれています。「大きなコンテンツ...」を、スクロールバーが必要になる何かに置き換えると、それが表示されます。

それが十分に明確であることを願っています。この問題を解決する方法についてのアイデアはありますか? どうもありがとう...

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

1 に答える 1

2

「コンテンツ」を含む各 div の高さを制限できます。

height:100px;
overflow:auto;

デモ: http://jsfiddle.net/AeXNP/

これにより、すべてが非常に簡単になります。

編集：（以下で要求したように）ユーザーがダイアログのサイズを変更することに基づいてコンテンツのサイズが変更されると、難しい部分が発生します。には、さらに多くの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/

于 2011-09-11T00:19:38.860 に答える