1

私はいくつかのコンテンツのグリッド ビューを実装してきました。そして、見栄えのよいブロックの視覚的な外観を得るために、純粋な順序付けられていないリストとして実装しています。今、私は同じデータをテーブルとして実装することを任されています。このデータに対して実行できるアクションもあります。この図は切り替えを示すためのものですが、リストは長くなる可能性があります。

グリッド/テーブル ビュー

これで、既存の順序付けられていないリスト構造を使用して要素を追加し、テーブル ビューを「偽造」することができると感じましたが、実際にはそれほど難しくはないようです。または、別の方法ですべてをテーブル ビューに変更し、CSS でグリッド ビューを実装することもできます。

私の質問は、これを行うためのいくつかのアプローチは何ですか? マークアップを 2 倍にすることができます。両方を実装してから、切り替えることができます。しかし、AJAX を多用するアプリケーションでは、これを追加するために 2 倍の DOM 操作を行っています。

このようなビューを切り替えるためのベスト プラクティスはありますか? 特にアイデアや実例を探しています。

これを、順序付けられていないリストをベースとして表示するjsFiddleで更新しました。テーブルを基礎として使用する CSS の例はありますか?

4

1 に答える 1

3

中心的なアプローチでこれを行うことに誰も私を連れて行かなかったので、中心的なアプローチtableのコードを以下に示します。ul>li

HTML:

<div class="controls">
    <a href="#" class="list active">List</a>
    <a href="#" class="grid">Grid</a>
</div>

<div id="wrapper">
<ul class="list">
    <li class="header"><h2 class="name">Name</h2>
        <p class="date">Start Date</p>
        <p class="title">Title</p>
        <div class="image">Image</div></li>
    <li class="even"><h2 class="name">Adam Ant</h2>
        <p class="date">1995</p>
        <p class="title">Specialist</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
    <li class="odd"><h2 class="name">Brian Box</h2>
        <p class="date">2005</p>
        <p class="title">Specialist</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
    <li class="even"><h2 class="name">Clara Clock</h2>
        <p class="date">2010</p>
        <p class="title">Manager</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
    <li class="odd"><h2 class="name">Darla Dock</h2>
        <p class="date">1996</p>
        <p class="title">Editor</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
</ul>
</div>​

CSS:

body {
    font-family: sans-serif;
}
.controls {
    text-align: right;
    width: 500px;
}
.controls a {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding: 6px;
    text-decoration: none;
}
.controls a.active {
    background-color: blue;
}

#wrapper .list li { 
    width: 500px; 
    position: relative;
    height: 30px;
}
#wrapper .list li.odd * {
    background-color: #eee;
}
#wrapper .list li.header {
    background-color: #666;
    color: #fff;
}
#wrapper .list li * {
    position: absolute;
    line-height: 1;
    top: 0;
    display: block;
    height: 30px;
}
#wrapper .list li h2.name {
    left: 0;
    width: 150px;

}
#wrapper .list li p.date {
    left: 150px;
    width: 100px;
}
#wrapper .list li p.title {
    left: 250px;
    width: 100px;
}
#wrapper .list li div.image {
    left: 350px;
    width: 150px;
}
#wrapper .list li div.image img {
    height: 20px;
    width: 20px
    margin: 0 auto;
}

#wrapper .grid li { 
    display: inline-block;
    width: 200px; 
    height: 200px;
    position: relative;
    overflow: hidden;
}
#wrapper .grid li.header {
    display: none;
}
#wrapper .grid h2.name {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    line-height: 2;
    height: 30px;
}
#wrapper .grid p.date {
    display: none;
}
#wrapper .grid p.title {
    display: none;
}

</p>

JavaScript (MooTools を使用):

$$('a').addEvent('click', function(){
    $$('.controls a').toggleClass('active');
    $$('ul').toggleClass('list').toggleClass('grid');
    return false;
})

</p>

于 2012-05-12T22:10:55.100 に答える