List-view
、Grid-view
、およびの間で表示モードを選択するオプションをユーザーに提供する必要がありますFull-view
。基本的な構造は単純で、次のようになります。
<ul>
<li><a href="#">List Toggle</a></li>
<li><a href="#">Grid Toggle</a></li>
<li><a href="#">Full Toggle</a></li>
</ul>
<div id="wrap">
<div id="list-view">
<div class="line">lorem line</div>
<div class="line">lorem line</div>
<div class="line">lorem line</div>
</div>
<div id="grid-view">
<div class="box">lorem box</div>
<div class="box">lorem box</div>
<div class="box">lorem box</div>
</div>
<div id="full-view">
<div class="full">full lorem</div>
<div class="full">full lorem</div>
<div class="full">full lorem</div>
</div>
</div>
これは、jsfiddle
私が最初にlist-view
設定したものを表示し、他のものを非表示に設定したものです:
これは私が実装を考えていたものですが、3つのオプションに必要です.. http://jsfiddle.net/mgNQy/2/
基本的に、表示モードをクリックすると、現在の表示モードがフェードアウトし、選択した表示モードがフェードインします。
可能であれば、ユーザーの好みを記憶するために Cookie も追加したいのですが、その方法がわかりません。私は jQuery にかなり慣れていないので、質問が基本的すぎないことを願っています。