Cara menggunakan pemalam pengisihan kandungan halaman jSort_jquery

Apabila senarai halaman mempunyai banyak kandungan, kita mungkin perlu mengisih kandungan dengan cara tertentu, seperti mengikut abjad atau saiz. Artikel ini akan menggunakan jSort pemalam pengisihan untuk mengisih kandungan halaman.
Pemalam jSort boleh mengisih sebarang kandungan pada halaman (jadual, senarai, elemen div), serasi silang penyemak imbas dan sangat ringan.

Pemarahan operasi:

XHTML
Mula-mula memperkenalkan perpustakaan jquery dan pemalam jSort di bahagian kepala.

<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> 

Kemudian tambah kod berikut terus ke badan:

<ul id="nav"> 
   <li id="asc_btn">按标题↑</li> 
   <li id="desc_btn">按标题↓</li> 
</ul> 
 
<div id="divs"> 
   <div> 
     <img src="images/s1.jpg" alt="" /> 
     <h3 class="title">1.北京利比亚驻华大使馆升起反对派国旗</h3> 
     <p>8月22日，北京利比亚驻华大使馆，门前的国旗已经更换成了反对派的国旗。22日上午11点左右， 
记者电话采访了利比亚驻华使馆，一位中方工作人员告诉记者，目前未接到闭馆和工作调整的通知，使馆人员 
应该会照常上班。</p> 
     <p><a href="#">查看详情</a></p> 
   </div> 
   ....多个div 
</div> 

Ia boleh dilihat bahawa struktur HTML terdiri daripada dua butang kawalan dan kawasan pemaparan kandungan div#divs.
CSS
Gunakan css untuk mencantikkan halaman 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
Apabila butang kawalan diklik, pemalam jSort dipanggil untuk mengisih kandungan Sila lihat kod:

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

Pemalam jSort menyediakan beberapa parameter boleh dikonfigurasikan:
item: menunjuk kepada elemen kandungan html yang perlu diisih. Lalai ialah div.
isih_mengikut: menunjuk kepada elemen dalam item yang perlu diisih. lalainya ialah p.
tertib: kaedah pengisihan, tertib-asc, tertib-terbalikkan-desc, lalainya ialah asc.
is_num: Sama ada untuk mengisih mengikut saiz berangka, lalainya adalah palsu.
sort_by_attr: Sama ada untuk mengisih mengikut atribut elemen html, lalainya adalah palsu.
attr_name: Nama atribut Jika sort_by_attr ditetapkan kepada benar, anda boleh mengisih mengikut atribut elemen yang sepadan. Jika anda perlu mengisih rentetan bahasa Cina, sebaiknya isih mengikut atribut Nilai atribut boleh berupa huruf atau nombor.

Ini adalah pengenalan kepada cara menggunakan jSort pemalam, mari cuba!