12

2 から 20 の動的な数のタブを持つ Web アプリケーションがあります。

現在、Jquery UI のタブ プラグインを使用していますが、その動作が理想的ではないことがわかりました (つまり、約 12 個のタブで、ラップすると、タブの 2 行目がタブの選択と共に移動し、2 行ではなく 3 行にまたがることがあります。

これは 2 つの質問です。まず、選択が変更されたときに 2 行目のタブがジャンプするのを止める方法を知っている人はいますか。

または、複数行のタブを適切に処理する jQuery 用のタブ プラグインを知っている人はいますか (解決策が見つからない場合は、ExtJS などを使用することになるかもしれませんが、このアプリケーションをかなり軽量に保とうとしていました)。

答え

さらに調査した結果、これは私が使用していた Jquery UI テーマが原因であることが判明しました。これは問題のあるスタイルでした。

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {  padding-bottom: .1em; border-bottom: 0; }

padding-bottom: .1em を削除したところ、問題が解決しました (手がかりは、選択の変更に伴って要素の 2 行目が移動していたことです)。

4

6 に答える 6

5

拡張子はまったく必要ありません。スタイルのないULでフローティングLIを使用するだけです。LIは適切にラップする必要があります。通常、同じタブ内の単語が「」を「」に置き換えて折り返されないようにすることをお勧めします。

私のカスタムタブコントロールはASP.Netで動的に構築されていますが、タブと非表示/表示機能はすべてjQueryです。

<div id="tabWrapper">
    <ul id="tabContainer">
        <li>Tab&nbsp;1</li>
        <li>Tab&nbsp;2</li>
        <li>Tab&nbsp;3</li>
     </ul>
</div>

基本的なCSS

#tabWrapper
{
    border-bottom: solid 1px #676767;
}

#tabContainer 
{
    padding:0;
margin:0;
    position:relative;
    z-index: 1;
    float:left;
    list-style:none;
}

#tabContainer li 
{
    float:left;
    margin:0;
    cursor: pointer;
    background: f1f1f1;
    border-top: solid 1px #676767;
    border-left: solid 1px #676767;
    border-right: solid 1px #ababab;
    margin-bottom: -1px;
}

#tabContainer .selected, #tabContainer .selected:hover
{
    background: #fff;
}
于 2009-03-09T04:27:52.487 に答える
4

この問題は、jQuery UI イシュー トラッカーのバグ レポートで説明されています。そのバグ レポートに、選択されていないタブの下の .ui-tabs-nav 境界線を保持しながら、この問題を解決するパッチを添付しました。乾杯。

于 2009-10-17T22:39:07.900 に答える
2

2 行目に改行するときにタブが表示される方法が気に入らなかったので、2 行目に改行する代わりに「もっと見る」タブを導入するプラグインを作成しました。

https://github.com/jasonday/plusTabs

于 2012-09-28T06:03:17.630 に答える
1

以下は、複数行の並べ替え可能なタブに役立つことがわかりました。私が抱えていた問題の 1 つは、指定しない限りタブが適切にクリックされないことaxis: 'x'でしたが、これは行間をドラッグすると見苦しく見えました。

以下の方法で改善できました。

$('#tab-container')
    .sortable({
        delay       : 200,
        distance    : 20,
        axis        : 'x'
    })
    .on('sort sortchange', function() {
        $('.ui-sortable-helper').css('top', $('.ui-sortable-placeholder').position().top + 'px');
    });
于 2011-11-06T16:31:57.097 に答える
0

問題を完全に解決するために使用できる優れた回答がたくさんありますが、ここに私自身の ¢2 があります。

問題を大幅に簡素化するために<hr> 、タブの行を区切るためにスタイルを追加するだけです。私の意見では、これは行を開いているよりも見栄えがします。

于 2015-12-31T15:17:25.133 に答える