jQuery實(shí)現(xiàn)切換頁面布局使用介紹

更新時(shí)間：2011年10月09日 00:01:41 作者：

在很多網(wǎng)站尤其在一些購物網(wǎng)站上，展示商品的列表頁提供了許多商品，用戶可以選擇商品的展示方式如列表方式展示和櫥窗方式展示等。在本例中，將給您講述如何實(shí)現(xiàn)這種效果

查看實(shí)例：DEMO 演示打包下載

XHTML

 
<a href="#" id="switch">切換布局</a> 
<div id="demo" class="showlist"> 
<div class="list"> 
<h3><a href="#">文章標(biāo)題</a></h3> 
<p>文章摘要</p> 
</div> 
... 
</div> 

XHTML結(jié)構(gòu)中，在#demo中放入了多個(gè).list，用于顯示文章標(biāo)題和摘要。通過下面的CSS來控制外觀。

CSS

復(fù)制代碼代碼如下:

 
#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} 

我們要設(shè)置最外層的#demo樣式，使其具有統(tǒng)一外觀，包括背景色和邊框樣式。注意，我們?cè)谧詈笠O(shè)置一個(gè)樣式.showblock .list，控制#demo里的.list樣式，使其向左浮動(dòng)，并設(shè)置高度和寬度，設(shè)置.showblock其實(shí)就是設(shè)置#demo的樣式，在接下來的jQuery代碼中，你就會(huì)明白了。當(dāng)然您可以根據(jù)需求自行設(shè)計(jì)CSS和XHTML，本文只是為了演示簡單的構(gòu)建了樣式和HTML結(jié)構(gòu)。

jQuery
實(shí)現(xiàn)切換布局的原理其實(shí)就是，用javascript來控制頁面顯示的樣式，當(dāng)用戶點(diǎn)擊切換時(shí)，引用不同的CSSy樣式。請(qǐng)看下面的jQuery代碼。

復(fù)制代碼代碼如下:

 
$(function(){ 
$("#switch").toggle(function(){ 
$("#demo").fadeOut("fast",function(){ 
$(this).fadeIn("fast").addClass("showblock"); 
}); 
},function(){ 
$("#demo").fadeOut("fast",function(){ 
$(this).fadeIn("fast").removeClass("showblock"); 
}); 
}); 
}); 

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

問題：如何實(shí)現(xiàn)分頁后，切換了布局方式，進(jìn)入下一頁和上一頁的布局方式一樣呢？

思路：可以采用cookie記錄用戶所選的布局方式，然后進(jìn)入下一頁時(shí)讀取cookie值，分配布局方式等。關(guān)于cookie的使用，可以參照本站文章：使用jQuery操作Cookies

您可能感興趣的文章: