0

JavaScript ベースのグリッド/行ビュー テーブルを作成したいと思います。
たとえば、10 枚ほどの画像があるページでは、ユーザーはこれらの画像をグリッドとして表示するか、行として表示することができます。したがって、グリッド アイコンをクリックすると、画像がグリッドとして表示されます。それ以外の場合は、行として表示されます。
やり方のコツを教えてください。

4

1 に答える 1

0

このための基本的な仕組みは非常に単純です。リストコンテナのクラスを切り替えるだけです。CSS で、そのクラスの子孫であるアイテムの一連のルールを設定して、float、column、または css テーブル プロパティを変更します。また、そのメイン リスト クラスを使用して、アイテム内に何を表示するか、またはアイテムをどのように表示するかを決定します。

クラスが削除されると、ブロック要素とデフォルトの css に戻ります

簡単な例:

HTML:

<ul id="itemList">
    <li>
         <h3 class="title">Item # 1</h3>
        <div class="details">Detals # 1</div>
    </li>
</ul>

CSS:

.grid li{ float:left; width:30%;margin-right:5px}
.grid .details{display:none}

JS:

$('button').click(function(){
    var txt=$(this).text();
    txt= txt=='Grid view'? 'List view' : 'Grid view';
    $(this).text( txt);
    $('#itemList').toggleClass('grid')
});

デモ: http://jsfiddle.net/kzDNe/

于 2013-03-30T21:40:39.657 に答える