jQuery實現切換頁面配置使用介紹

查看執行個體：DEMO  示範打包下載

XHTML
複製代碼 代碼如下:
<a href="#" id="switch">切換布局</a>
<div id="demo" class="showlist">
<div class="list">
<h3><a href="#">文章標題</a></h3>
<p>文章摘要</p>
</div>
...
</div>

XHTML結構中，在#demo中放入了多個.list，用於顯示文章標題和摘要。通過下面的CSS來控制外觀。

CSS
複製代碼 代碼如下:
#demo{width:680px; margin:20px auto; padding:4px; background:#f7f7f7;
border:1px solid #d3d3d3}
.list{margin:6px}
.list h3{height:26px; line-height:26px; font-size:14px}
.list p{line-height:20px}
.showblock .list{float:left; width:325px; height:100px}

我們要設定最外層的#demo樣式，使其具有統一外觀，包括背景色和邊框樣式。注意，我們在最後要設定一個樣式.showblock .list，控制#demo裡的.list樣式，使其向左浮動，並設定高度和寬度，設定.showblock其實就是設定#demo的樣式，在接下來的jQuery代碼中，你就會明白了。當然您可以根據需求自行設計CSS和XHTML，本文只是為了示範簡單的構建了樣式和HTML結構。

jQuery
實現切換布局的原理其實就是，用javascript來控制頁面顯示的樣式，當使用者點擊切換時，引用不同的CSSy樣式。請看下面的jQuery代碼。
複製代碼 代碼如下:
$(function(){
$("#switch").toggle(function(){
$("#demo").fadeOut("fast",function(){
$(this).fadeIn("fast").addClass("showblock");
});
},function(){
$("#demo").fadeOut("fast",function(){
$(this).fadeIn("fast").removeClass("showblock");
});
});
});

我們使用toggle事件，它用來交替的執行事件，使用fadeOut讓切換有個過渡效果，不難看出，就是通過addClass()和removeClass()調用不同的樣式來實現不同的布局效果。

問題：如何?分頁後，切換了布局方式，進入下一頁和上一頁的布局方式一樣呢？

思路：可以採用cookie記錄使用者所選的布局方式，然後進入下一頁時讀取cookie值，分配布局方式等。關於cookie的使用，可以參照本站文章：使用jQuery操作Cookies