Quicksand是一款基于jQuery的插件，能對頁面上(shàng)的元素進行(xíng)重新排序及過濾，并且有(yǒu)非常不錯的洗牌過渡動畫(huà)效果，可(kě)以應用在很(hěn)多(duō)項目中來(lái)增強用戶體(tǐ)驗。本文以實際項目應用來(lái)講解Quicksand的使用。

XHTML

	
	

		
		

			所有(yǒu)功能模塊
		

		

			應用程序
		

		

			系統管理(lǐ)
		

	




	
	

		 生(shēng)日祝福
	

	

		 節日祝福
	

	

		 積分管理(lǐ)
	
....N多(duō)li

XHTML結構由一個(gè)導航條和(hé)一個(gè)內(nèi)容列表組成。在內(nèi)容列表#list裏，我給每個(gè)li都加了一個(gè)id屬性，這個(gè)是為(wèi)了方便Quicksand插件調用。

CSS

#nav{height:36px; margin:10px auto; border-bottom:1px solid #36c}
#nav ul{list-style:none; padding-left:120px}
#nav ul li{float:left; height:34px; line-height:34px; margin-left:6px; 
padding:0px 12px; border-left:1px solid #d3d3d3; border-right:1px solid #d3d3d3; 
 border-top:1px solid #d3d3d3; background:#f7f7f7; cursor:pointer}
#nav ul li.cur{height:35px; background:#36c; color:#fff}
.image-grid{zoom:1}
.image-grid li{width: 82px; height:100px; margin: 20px 0 0 35px; float:left;
 text-align: center; line-height:18px;color: #686f74;overflow:hidden;}
.image-grid li img,.image-grid li strong{display:block;}

我給導航條#nav設置了選項卡風格，并設置選中狀态#nav ul li.cur的樣式。列表內(nèi)容區(qū)也設置了每張圖片的固定高(gāo)度和(hé)寬度。

jQuery

首先，複制(zhì)列表區(qū)的內(nèi)容:

var $data=$("#list").clone();

然後，來(lái)實現選項卡風格，當點擊導航時(shí)，給當前點擊的項加上(shàng)選中的樣式，同時(shí)其他項移除選中狀态的樣式：

$("#nav ul li").click(function(){
	$(this).addClass("cur");
	$(this).siblings().removeClass("cur");
});

接着，繼續在單擊時(shí)間(jiān)裏，獲取當前點擊選項的ID，通(tōng)過判斷ID值，獲取數(shù)據源$source，最後調用quicksand插件。完整的代碼如下：

$("#nav ul li").click(function(){
	$(this).addClass("cur");
	$(this).siblings().removeClass("cur");
    var id = $(this).attr("id");
		if(id=="all"){
			var $source=$data.find("li");
		}else{
			var $source=$data.find("li[class="+id+"]");
		}
		$("#list").quicksand($source,{
			duration: 1000,
            attribute: 'id',
            easing: 'swing'
        });
    });
});

Quicksand插件提供了幾個(gè)參數(shù)可(kě)配置：

duration：過渡動畫(huà)的時(shí)間(jiān)，以毫秒(miǎo)為(wèi)單位。

attribute：關聯數(shù)據的屬性，本例設置為(wèi)id。

easing：動畫(huà)緩沖方式。

還(hái)有(yǒu)一個(gè)方法enhancement：function(c) {}可(kě)以自定義函數(shù)調用。

順便提一下，IE6下沒有(yǒu)過渡動畫(huà)效果，IE7+，以及其他高(gāo)級浏覽器(qì)均測試通(tōng)過。