DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery實現切換頁面布局使用介紹
jQuery實現切換頁面布局使用介紹
編輯: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
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved