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

私は現在、Jquery UIのタブプラグインを使用していますが、その動作は理想的ではありません（つまり、約12タブです。 2番目のタブの行はタブの選択とともに移動し、2つではなく3つの行にジャンプすることがあります。複数行のタブをうまく処理するJqueryタブコントロールはありますか？

これは2つの質問です。まず、2番目のタブの行を止める方法があります

また、複数行のタブを処理するjQuery用のタブプラグインを知っている人は誰でも知っています（私が見つけられない場合は解像度私はExtJSまたは類似のものを使用して終了するかもしれないが、このアプリケーションをかなり軽量に保つことを試みていた）。

回答は、これは私が使っていたのjQuery UIのテーマによって引き起こされていたが判明し、さらに調査した後、これは問題のあるスタイルだった：

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

私はちょうどパディング下を削除しました：.1emそしてそれは問題を解決する（手がかりは要素の第2の行が選択の変化と共に動いていたということだった）。

出典

2009-03-08 Bittercoder

ああ、聖杯の探検が大好き！ – scunliffe

拡張機能はまったく必要ありません。フローティングLIは、スタイルのないULで使用してください。 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-09 04:27:52 hunter

正しい方向に私を指してくれてありがとう:)あなたが言っているように、それは "うまくいく"べきで、jqueryタブコントロールは同じ原理で構築されているので、少し調べて、これがUI私が適用したテーマ。 – Bittercoder

ない技術的な解決策が、Nielsenが強く、タブの複数の行に対して推奨していることに注意してください：

タブの1行だけあります。複数の行がジャンプするUI要素を作成します。は空間メモリを破壊し、は既にユーザーがアクセスしたタブを覚えていません。また、もちろん、複数の行は、という複雑な症状があります。の1行に収まるサイズよりも多くのタブが必要な場合は、のデザインを簡素化する必要があります。

からTabs, Used Right: The 13 Usability Guidelines

出典

2009-04-01 16:48:05

私は間違いなく同意しました - この場合、私はタブの数（私たちは一般的なシステムを構築し、クライアントは20個の奇妙なタブを追加しました）をほとんど制御できませんでした。年二回。 – Bittercoder

この問題は、jQueryのUIの問題追跡にdescribed in a bug reportです。このバグレポートでは、の .ui-tabs-navの境界を非選択タブの下に保存しながら、この問題を解決するパッチを添付しました。乾杯。

出典

2009-10-17 22:39:07 sunaku

以下は、複数の行のソート可能なタブに役立つことがわかりました。私が持っていた問題の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-06 16:31:57