jQuery實現切換頁面布局使用介紹

2019-11-20 23:38:33

字體：大中小

來源：轉載

供稿：網友

查看實例：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

上一篇：使用jQuery操作Cookies的實現代碼

下一篇：passwordStrength 基于jquery的密碼強度檢測代碼使用介紹