-1

私は次のものを持っています：

ここに画像の説明を入力

リストを介してこれを実装しました。これには大量の CSS が必要でした。見出し (「オペレーティング システム」、「パーセンテージ」) を追加したいのですが、これにはさらに多くの CSS トリックが必要になります。

テーブルを使用する方が簡単な場合があります。

一般的に、推奨される方法はどれですか: テーブルまたは ul/list?

これは、非常に単純な jQuery 関数で実行できます。

$('.transfer').on('click',function(){
    $($(this).data('from'))
        .find(':selected')
        .remove()
        .appendTo($(this).data('to'))
        .prop('selected',false);
});

次の HTML を想定します。

<select id="one" multiple>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
</select>
<select id="two" multiple></select>

<button class="transfer" data-from="#one" data-to="#two">&raquo;</button>
<button class="transfer" data-from="#two" data-to="#one">&laquo;</button>

--- jsFiddle デモ ---

これから小さな jQuery プラグインを作成し、2 つの要素を与えてselect転送ボタンと機能を作成することもできますが、関数として実行することもできます。optionプラグインを使用すると、要素を前後に移動しても元の順序を維持するなど、より複雑な機能を追加することもできます。

4

4 に答える 4

2

私はテーブルを使います。あなたがそうするように表形式のデータ形式を持っているとき、テーブルから遠ざかる理由はありません。あなたはそれらが作成された目的のためにそれらを使用しています。

于 2012-08-17T18:50:27.353 に答える
1

答えは、最終的な決定/事実ではなく、実際には意見/経験の問題です (これを言うことで多くの反対票が投じられることはわかっていますが、それは本当だと思います)。Tablesそれらを使用すると物事がずっと簡単になるかもしれませんが、もともとレイアウトに使用することを意図したものではありません。多くのスタイリングで aを使用することulは、標準的に言えば「大丈夫」です。これはあなたの考え次第です。

  • tablesたとえそれが目的ではなくても、技術的に機能し、あなたのサイトの HTML をからかう人もいます。
  • 優れた CSS (それが本当に優れていて、ウィンドウのサイズ変更時にすべての配置が崩れない場合) は便利ですが、使用/作成は困難です。

あなたが決定を下します！

于 2012-08-17T18:56:24.007 に答える
0

ulには列がないため、これはテーブルです。

ulの列を修正するのは少し難しいかもしれませんが、テーブルでは自動的に行われます。

于 2012-08-17T18:50:13.827 に答える
0

HTMLを意味的にコンテンツと一致させることが常に優先されます。あなたが持っているのはオペレーティングシステムの「リスト」なので、順序付けられていないリスト（UL / LI）を使用してそれらを実装する必要があります。レンダリングされるコンテンツが、たとえばスプレッドシートで意味のあるデータである場合は、それをテーブルとして実装する方が適切でした。

于 2012-08-17T18:51:00.990 に答える