Comment utiliser le plug-in de tri du contenu des pages jSort_jquery

Lorsque la liste des pages contient beaucoup de contenu, nous devrons peut-être trier le contenu d'une certaine manière, par exemple par alphabet ou par taille. Cet article utilisera le plug-in de tri jSort pour trier le contenu des pages.
Le plug-in jSort peut trier n'importe quel contenu de la page (tableaux, listes, éléments div), est compatible avec tous les navigateurs et est très léger.

Opération de rendu :

XHTML
Présentez d’abord la bibliothèque jquery et le plug-in jSort dans la partie head.

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

Ajoutez ensuite le code suivant directement dans le corps :

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

On peut voir que la structure HTML se compose de deux boutons de contrôle et de la zone de rendu du contenu div#divs.
CSS
Utilisez le CSS pour embellir les pages 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
Lorsque vous cliquez sur le bouton de contrôle, le plug-in jSort est appelé pour trier le contenu. Veuillez consulter le code :
.

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

Le plugin jSort fournit plusieurs paramètres configurables :
item : pointe vers l'élément de contenu html qui doit être trié. La valeur par défaut est div. Dans cet exemple, le contenu du div est trié.
sort_by : pointe vers l'élément de l'élément qui doit être trié. La valeur par défaut est p. Dans cet exemple, l'élément à trier est h3.title.
ordre : méthode de tri, ordre asc, ordre desc-inverse, la valeur par défaut est asc.
is_num : S'il faut trier par taille numérique, la valeur par défaut est false.
sort_by_attr : Que ce soit pour trier selon les attributs des éléments HTML, la valeur par défaut est false.
attr_name : Nom de l'attribut. Si sort_by_attr est défini sur true, vous pouvez trier selon les attributs des éléments correspondants. Si vous devez trier les chaînes chinoises, il est préférable de trier par attributs. La valeur de l'attribut peut être constituée de lettres ou de chiffres.

Voici l'introduction à l'utilisation du plug-in jSort, essayons-le !