페이지 콘텐츠 정렬 플러그인 jSort_jquery를 사용하는 방법

페이지 목록에 콘텐츠가 많으면 알파벳이나 크기 등 특정 방식으로 콘텐츠를 정렬해야 할 수도 있습니다. 이 기사에서는 정렬 플러그인 jSort를 사용하여 페이지 콘텐츠를 정렬합니다.
jSort 플러그인은 페이지의 모든 콘텐츠(테이블, 목록, div 요소)를 정렬할 수 있고 브라우저 간 호환되며 매우 가볍습니다.

작업 렌더링:

XHTML
먼저 헤드 부분에 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> 

그런 다음 본문에 다음 코드를 직접 추가하세요.

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

HTML 구조는 두 개의 컨트롤 버튼과 콘텐츠 렌더링 영역 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
컨트롤 버튼을 클릭하면 jSort 플러그인이 호출되어 콘텐츠를 정렬합니다.
코드를 참조하세요.

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

jSort 플러그인은 구성 가능한 여러 매개변수를 제공합니다.
item: 은 정렬해야 하는 html 콘텐츠 요소를 가리킵니다. 기본값은 div입니다.
sort_by: 는 정렬해야 하는 항목 내의 요소를 가리킵니다. 기본값은 p입니다. 이 예에서 정렬할 요소는 h3.title입니다.
order: 정렬 방식, asc-order, desc-reverse order, 기본값은 asc입니다.
is_num: 숫자 크기로 정렬할지 여부는 기본값이 false입니다.
sort_by_attr: html 요소 속성에 따라 정렬할지 여부, 기본값은 false입니다.
attr_name: 속성 이름. sort_by_attr을 true로 설정하면 해당 요소의 속성에 따라 정렬할 수 있습니다. 중국어 문자열을 정렬해야 하는 경우 속성별로 정렬하는 것이 가장 좋습니다. 속성 값은 문자 또는 숫자일 수 있습니다.

jSort 플러그인 사용법에 대한 소개입니다. 한번 사용해 보세요!