2

必要なメニュー項目の数やメニュー項目のサイズがわからない Web サイト テンプレートがあります。以下の js は、私が望んでいたとおりに動作しますが、これは私が書いたほとんどの js です。私が js の初心者であるために気付いていない、この方法の欠点や潜在的な問題はありますか? 現在、各サイトのパディングを手動で設定しています。ありがとうございました！

var width_of_text = 0; 
var number_of_li = 0;

// measure the width of each <li> and add it to the total with, increment li counter
$('li').each(function() {
    width_of_text += $(this).width();
    number_of_li++;
});

// calculate the space between <li>'s so the space is equal
var padding = Math.floor((900 - width_of_text)/(number_of_li - 1));

// add the padding the all but the first <li>
$('li').each(function(index) {
    if (index !== 0)
    {
        $(this).css("padding-left", padding);
    }
});
4

6 に答える 6

2

display: inline-block、およびを使用して、CSSでこれをハックに行うことができますtext-align: justify

<ul>
    <li>thing</li>
    <li>thing2</li>
    <li>thing3</li>
    <li>thing4</li>
    <li class="hack"></li>
</ul>

その後：

ul { text-align: justify }
li { display: inline-block }
li.hack { width: 100% } /* force the justified text to wrap */

デモ

</p>

于 2012-06-02T22:39:52.573 に答える
1

はい、書式設定に JS を使用することには欠点があります。

書式設定と配置に JS を使用することは避け、可能な限り CSS を使用することを強くお勧めします。

Javascript は、ブラウザーごと、OS ごと、OS/ブラウザーのバージョンごとに解釈され、実行される方法が大きく異なります。

CSS レンダリングはネイティブのブラウザ エンジン機能であり、レンダリングの優先度は JS よりも高くなっています。

CSS レンダリングは JS よりもはるかに高速です。

等。

あなたが今していることは、決してお勧めしません。私見、これは非常に間違ったアプローチです。この場合、JS は明らかに誤用されています。このタスクには CSS を使用する必要があります。このタスクで CSS を正しく使用する方法について質問を投稿することをお勧めします。

于 2012-06-02T22:32:53.493 に答える
0

内容に合わせて幅を調整する CSS アルゴリズム (テーブル レイアウトアルゴリズム) に依存できる限り、JavaScript は必要ありません:)

例については、以前の回答のhttp://jsfiddle.net/r9yrM/1/を参照してください。

各「セル」に最小限のパディングを設定することを忘れないでください。テキストが境界線に張り付いていると、あまり読みにくくなります (そして見苦しくなります)。text-align: centerまた、セル (最後の CSS ルール) も必要になるでしょう。

JS を使用すると、タブの最大数 (または最小の「妥当な」幅) を決定し、その数より上 (下) に、親にクラスを追加して、各タブをトリガーとしてレンダリングしたり、レンダリングしfloat: leftたりblockしないようにすることができtable-cellます。次に、2行以上を占有します（Firefoxの拡張機能Tab Mix Plusのように）

注: table には少なくとも 2 つのアルゴリズムがあります: with と withouttable-layout: fixedで、適応時にブラウザに残された自由に依存します。

上記のjQueryコードに関する注意：「最初のものを除く各li」は次のように表現できます$('li + li')（最初のものの前に a はありませんli）

于 2012-06-03T04:39:39.037 に答える
0

コンテナから押し出されないように、デフォルトの間隔を空けることをお勧めします。それらを均等に配置できるようにするための追加のJavaScriptは、機能強化のみです。

于 2012-06-02T22:34:10.177 に答える
0

サイトの訪問者にもよりますが、JS を無効にして訪問する人は約 3% です。そして、あなたはサイトが彼らのために機能することを望んでいます. サイトの不要な部分ではないかもしれませんが、重要な部分は機能させたいと考えています。ナビゲーションは、Web サイトの最も重要な部分の 1 つです。

ナビゲーションが JS なしで動作することを確認してください (JS のように派手である必要はありません)。その後、JS を使用していくつかの改善を行うことができます。

于 2012-06-02T22:59:08.083 に答える
0

あなたの質問への答えは、それが機能する場合は機能する（そして機能し続ける）ということだと思いますが、それはこれがそれを処理するための最良の方法であるという意味ではありません. 最善の方法が気になる場合は、CSS を主に (または排他的に) 使用してアプローチを改善する方法を検討してください。仕事をやり遂げたいだけで、それが機能しているのであれば、問題ありません。

于 2012-06-02T22:35:28.367 に答える