切り替え可能なグリッド/テーブルビューを実装するにはどうすればよいですか？

Question

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

、私が実際にいることは思えない私は、既存の番号なしリスト構造を使用し、それに要素を追加することができます意味し、「偽」テーブルビューを持っていますはるかに難しい。あるいは、私はそれを他の方法でやってみて、すべてをテーブルビューに変更してから、CSSでグリッドビューを実装することができます。

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

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

---

私は基礎として順不同リストを示すa jsFiddleでこれを更新しました。誰もがテーブルとしてのベースを使用して任意のCSSの例がありますか？

Answer 1

はまあ、誰もがそう以下、table -centricアプローチでこれを行うに私を取らなかった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; 
} 

のJavaScript（MooToolsはを使用して）：

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