4

私が取り組んでいる 1 つのプロジェクトでは、タブ ナビゲーションを使用しています。タブの数は動的に計算され、多数になる可能性があるため、これらのタブ (本質的に<li>は、スタイル宣言を持つ要素float: left;) が次の行にオーバーフローすることが[###]あります。タブを表示するために使用すると、最終結果は次のようになります:

[###] [###] [###] [###] [###] [###]
[###] [###]
[Rest of the content..............]

一番上の行の最後の 4 つの要素には '接続先' の要素がないため、これはひどいものに見えます。

Javascript の助けを借りて (jQuery や MooTools などのフレームワークは、より短い/より簡単なソリューションを提供する場合は許容されます)、最初に一番下の行に入力し、残りの要素を一番上に配置することは可能ですか?

このような：

[###] [###]
[###] [###] [###] [###] [###] [###]
[Rest of the content..............]

(MooTools というタグが付けられた質問です。現在使用している JS フレームワークであるためです。おそらく MT にすぐに変換できるため、他のフレームワークでの回答でも問題ありません)

4

4 に答える 4

1

以下は、この問題を解決するために使用したコードです。基本的に、JSを使用して、コンテナーの幅を計算し、タブの幅（すべてのタブの幅は同じ）とともに、行ごとのタブの数と残りを計算します。次に、単純なモジュロ比較を使用して、clear: bothスタイルを挿入できます（タブを強制的に空の行に移動します）。

var allTabs = $$('#tab-container li');
var tabNum = allTabs.length;
var tabWidth = allTabs[0].offsetWidth;
var oWidth = $('tab-container').offsetWidth;
var tabRowNum = Math.floor(oWidth/tabWidth);
var tabRowOffset = (tabNum % tabRowNum);

for(var i = 0; i < tabNum; i++) {
    if((i % tabRowNum) == tabRowOffset) {
        allTabs[i].setStyle('clear', 'both');
    }
    else {
        allTabs[i].setStyle('clear', 'none');
    }
}
于 2010-02-26T13:56:04.567 に答える
0

すべてのタブを 1 行にまとめて (必要なだけ幅を広げて)、現在のタブまでスクロールすることをお勧めします。(ナビゲーション用に、使用可能なすべてのタブを一覧表示するドロップダウン メニューも必要になります。)

あなたがやろうとしていることの問題は、あなたが望むものを手に入れた場合、一番上の行のタブが選択されたときに何が起こるかということです.

  • 現在のパネルに接続されていない（タブの一番下の行で区切られている）選択されたタブがあります。これは見苦しいか、
  • タブの一番上の行を一番下 (パネルに隣接する) に移動すると、回避しようとしている状況または
  • 選択したタブを一番下に配置するようにタブを再編成すると、ナビゲーションが混乱します (ユーザーがタブの場所を知ることは不可能です)。
于 2010-02-25T18:49:37.930 に答える
0

残念ながら、あなたが望むことを正確に行うための簡単な解決策はありません。フロートはフロートです。最善の策は、javascript を使用してオンザフライでタブのサイズと数をカウントし、手動で配置することposition:absoluteです。かわいくない。

しかし、小さなスペースにたくさんのタブを収めるという問題は解決可能です。最も簡単な方法は、2 行目のタブに追加の css クラスを与え、それを使用して最初の行の上に配置することです。これは、サーバー側またはクライアント側で JavaScript を使用して実行できます。または、タブの正確な数とコンテナーの正確な幅がわかっている場合は、max-widthそれらを設定して少し縮小することができます。または、タブコンテナを使用することもできoverflow: scrollますが、これは確かに見苦しくなります:)

于 2010-02-25T11:29:41.020 に答える
0

JSで簡単。疑似コード以下:

  • を作成しますdiv(オプション)
  • を作成するul
  • li指定された最大数に達するか、合計幅が必要な幅の「すぐ下」になるまで、 sで埋めます
  • を html ドキュメントに追加し、divid への参照を保存します
  • 繰り返しますが、保存された div への参照が保存されている場合は、その前に新しい参照を追加してください。
于 2010-02-25T11:35:47.683 に答える