當頁面列表內(nèi)容很(hěn)多(duō)的時(shí)候，我們可(kě)能需要将內(nèi)容按照某個(gè)方式進行(xíng)排序，比如按照字母或者大(dà)小(xiǎo)等排序。本文将使用排序插件jSort來(lái)對頁面內(nèi)容進行(xíng)排序。

jSort插件可(kě)以對頁面任何內(nèi)容進行(xíng)排序（tables, lists, div elements），跨浏覽器(qì)兼容且非常輕巧。

XHTML

首先在head部分引入jquery庫和(hé)jSort插件。

然後再body直接加入如下代碼：

     
按标題↑
     
按标題↓



      

         
         
1.北京利比亞駐華大(dà)使館升起反對派國旗
         
8月22日，北京利比亞駐華大(dà)使館，門(mén)前的國旗已經更換成了反對派的國旗。22日上(shàng)午11點左右，
記者電(diàn)話(huà)采訪了利比亞駐華使館，一位中方工作(zuò)人(rén)員告訴記者，目前未接到閉館和(hé)工作(zuò)調整的通(tōng)知，使館人(rén)員
應該會(huì)照常上(shàng)班。
         
查看詳情
      
      ....多(duō)個(gè)div

可(kě)以看出HTML結構由兩個(gè)控制(zhì)按鈕，和(hé)內(nèi)容呈現區(qū)div#divs組成。

CSS

使用css将html頁面美化。

#nav{width:100%;margin:10px auto;}
#nav li{float:left; width:80px; height:24px; line-height:24px; margin-right:10px; 
border:1px solid #d3d3d3; background:#f7f7f7; text-align:center; cursor:pointer}
#divs div{height:180px; margin:10px 0px; padding:15px; background:#f7f7f7; 
border-bottom:1px solid #ddd}
#divs div img{float:left; width:240px; height:160px; margin:10px}
#divs div h3{line-height:24px; margin:10px 5px; font-size:16px; color:#456}
#divs div p{line-height:22px; margin:6px 5px}

jQuery

當單擊控制(zhì)按鈕的時(shí)候，調用jSort插件将內(nèi)容進行(xíng)排序，請(qǐng)看代碼：

$("#asc_btn").click(function(){
	$("#divs").jSort({
		sort_by: "h3.title",
		item: "div",
		order: "asc"
	});
});

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

item：指向需要排序的html內(nèi)容元素，默認為(wèi)div，本例中是排序div中的內(nèi)容。

sort_by：指向item內(nèi)需要排序的元素，默認為(wèi)p，本例中要排序的是h3.title。

order：排序方式，asc-順序，desc-倒序，默認為(wèi)asc。

is_num：是否按按數(shù)字大(dà)小(xiǎo)排序，默認是false。

sort_by_attr：是否按照html元素屬性進行(xíng)排序，默認為(wèi)false。

attr_name：屬性名稱，如果sort_by_attr設置為(wèi)true，則可(kě)以按照對應元素的屬性進行(xíng)排序。如果需要排序的是中文字符串，最好設置按照屬性進行(xíng)排序，屬性的值可(kě)以是字母或者數(shù)字之類的。

關于jSort插件的更多(duō)信息請(qǐng)訪問：http://do-web.com/jsort/overview