-1

10 以上のタブ コンテンツなど、多くのタブ コンテンツ用のタブ ナビゲーションを備えた jquery タブを含むコンテンツ ボックスを作成したいと考えています。問題は、jquery UI が、大きなタブ番号の組み込みタブ ナビゲーションと、Google コードの「jquery プラグインのスクロール可能なタブ」を提供しないことです: https://code.google.com/p/jquery-ui-scrollable-tabs/、50ページを超える大容量の場合、非常に遅く、非効率的に見えます。ユーザーが 1 ページ目と 40 ページ目を読もうとすると、30 秒以上かかります。矢印をクリックしてナビゲートします。

そのため、選択したものを含む5つのタブのみを含むタブコンテンツボックスを作成し、入力テキストボックスのタブナビゲーションで特定のページを選択し、最初と最後のページタブナビゲーションボタンで次と前を選択しました。(通常の jquery UI タブに 20 ～ 30 個を超えるタブを配置すると、外観と css が台無しになります。)

<div id="tabs" class="tabs-bottom">
<ul>
 <li><a href="#tabs-1">Nunc tincidunt</a>
    </li>
    <li><a href="#tabs-2">Proin dolor</a>
    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>
    </li>
</ul>
<ul class="TabbedPageNavi">
    <li>Page
        <input id="pageNumber" type="text" value="01" style="width:30px;" />
    </li>
    <li><a class="previous" href="#">&laquo;&nbsp;Prev</a>
    </li>
    <li><a class="nexttab" href="#">Next&nbsp;&raquo;</a>
    </li>
    <li class="copyTab">2013&nbsp;&copy;John3825&nbsp;blog</li>
</ul>
<div class="tabs-spacer"></div>
<div id="tab-contents">
    <div id="tabs-1">

サンプル: http://jsfiddle.net/john3825/anh7c/embedded/result/

多数のコンテンツ タブをナビゲーションで管理する最善の方法は何ですか? 例や正しい問題を教えてください。

また、タブ コンテンツ ボックスを幅 350px x 高さ 1000px 以内に収まるようにしたいと考えています。

4

1 に答える 1

2

可能な限り最良の方法に関する限り、それらの多くがあります.1つの提案は使用することですiFrames.

結果は次のようになります: DEMO

または、あなたのアプローチは非常にスケーラブルであり、互換性と使いやすさに関しては良いことです。これで、他の要件は次のようになります。このように content-tab にwidth:350px;と を設定します。height:1000px

ワーキングフィドル：DEMO

コード：

#tab-content{

height: 1000px !important;
width:350px;
background-color:darkgrey;
border:2px ridge black;

}
于 2013-09-10T04:38:53.887 に答える