1

List-viewGrid-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設定したものを表示し、他のものを非表示に設定したものです:

http://jsfiddle.net/eTb5C/13/

これは私が実装を考えていたものですが、3つのオプションに必要です.. http://jsfiddle.net/mgNQy/2/

基本的に、表示モードをクリックすると、現在の表示モードがフェードアウトし、選択した表示モードがフェードインします。

可能であれば、ユーザーの好みを記憶するために Cookie も追加したいのですが、その方法がわかりません。私は jQuery にかなり慣れていないので、質問が基本的すぎないことを願っています。

4

1 に答える 1