您好,登錄后才能下訂單哦!
這篇文章給大家介紹如何進(jìn)行頁面內(nèi)容排序插件jSort的使用,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
當(dāng)頁面列表內(nèi)容很多的時(shí)候,我們可能需要將內(nèi)容按照某個(gè)方式進(jìn)行排序,比如按照字母或者大小等排序。小編將使用排序插件jSort來對(duì)頁面內(nèi)容進(jìn)行排序。
jSort插件可以對(duì)頁面任何內(nèi)容進(jìn)行排序(tables, lists, p elements),跨瀏覽器兼容且非常輕巧。
首先在head部分引入jquery庫和jSort插件。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.min.js"></script>
<script type="text/javascript" src="jquery.jsort.0.4.js"></script>
然后再body直接加入如下代碼:
<ul id="nav">
<li id="asc_btn">按標(biāo)題↑</li>
<li id="desc_btn">按標(biāo)題↓</li>
</ul>
<p id="ps">
<p>
<img src="images/s1.jpg" alt="" />
<h4 class="title">1.北京利比亞駐華大使館升起反對(duì)派國(guó)旗</h4>
<p>8月22日,北京利比亞駐華大使館,門前的國(guó)旗已經(jīng)更換成了反對(duì)派的國(guó)旗。22日上午11點(diǎn)左右,
記者電話采訪了利比亞駐華使館,一位中方工作人員告訴記者,目前未接到閉館和工作調(diào)整的通知,使館人員
應(yīng)該會(huì)照常上班。</p>
<p><a href="#">查看詳情</a></p>
</p>
....多個(gè)p
</p>
可以看出HTML結(jié)構(gòu)由兩個(gè)控制按鈕,和內(nèi)容呈現(xiàn)區(qū)p#ps組成。
使用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}
#ps p{height:180px; margin:10px 0px; padding:15px; background:#f7f7f7;
border-bottom:1px solid #ddd}
#ps p img{float:left; width:240px; height:160px; margin:10px}
#ps p h4{line-height:24px; margin:10px 5px; font-size:16px; color:#456}
#ps p p{line-height:22px; margin:6px 5px}
當(dāng)單擊控制按鈕的時(shí)候,調(diào)用jSort插件將內(nèi)容進(jìn)行排序,請(qǐng)看代碼:
$("#asc_btn").click(function(){
$("#ps").jSort({
sort_by: "h4.title",
item: "p",
order: "asc"
});
});
jSort插件提供幾個(gè)參數(shù)可配置:
item:指向需要排序的html內(nèi)容元素,默認(rèn)為p,本例中是排序p中的內(nèi)容。
sort_by:指向item內(nèi)需要排序的元素,默認(rèn)為p,本例中要排序的是h4.title。
order:排序方式,asc-順序,desc-倒序,默認(rèn)為asc。
is_num:是否按按數(shù)字大小排序,默認(rèn)是false。
sort_by_attr:是否按照html元素屬性進(jìn)行排序,默認(rèn)為false。
attr_name:屬性名稱,如果sort_by_attr設(shè)置為true,則可以按照對(duì)應(yīng)元素的屬性進(jìn)行排序。如果需要排序的是中文字符串,最好設(shè)置按照屬性進(jìn)行排序,屬性的值可以是字母或者數(shù)字之類的。
關(guān)于如何進(jìn)行頁面內(nèi)容排序插件jSort的使用就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。