複数行のタブを適切に処理するJqueryタブコントロールはありますか？

StackOverflow https://stackoverflow.com/questions/624516

質問

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

現在、Jquery UIのタブプラグインを使用していますが、その動作が理想よりも低いことを確認しています（つまり、約12タブ、ラップすると、タブの2行目がタブ選択とともに移動し、時には3行にジャンプします） 2。

これは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番目の行が選択の変更に伴って移動していたという手掛かりでした）。

役に立ちましたか？

解決

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

私のカスタムタブコントロールは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;
}

他のヒント

技術的な解決策ではありませんが、 Nielsen は複数行のタブに対して強く推奨することに留意してください：

  

タブは1行のみです。複数   行はジャンプUI要素を作成します。   空間メモリを破壊し、したがって   ユーザーが覚えることができない   既にアクセスしたタブ。   また、もちろん、複数の行は   過度の複雑さの確かな症状：   収まるよりも多くのタブが必要な場合   単一の行、単純化する必要があります   あなたのデザイン。

-タブ、正しい使用法：13のユーザビリティガイドライン

この問題は、jQuery UI課題トラッカーのバグレポートに記載されています。そのバグレポートに、選択されていないタブの下の.ui-tabs-navボーダーを保存しながら、この問題を解決するパッチを添付しました。乾杯。

2行目に分割するときにタブがレンダリングされる方法が気に入らなかったため、<！> quot; see more <！> quot;を導入するプラグインを作成しました。 2行目に分割する代わりにタブ。

https://github.com/jasonday/plusTabs

複数の行にあるソート可能なタブには、以下が役立つことがわかりました。私が抱えていた問題の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');
    });

問題を完全に解決するために使用できる多くの素晴らしい答えがありますが、ここに私自身の<！>＃162; 2。

問題を大幅に簡素化するために、タブの行を分離するようにスタイル設定された<hr>を追加できます。私の意見では、これは開いた行を持つよりも見栄えがよくなります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top