페이지 목록에 콘텐츠가 많으면 알파벳이나 크기 등 특정 방식으로 콘텐츠를 정렬해야 할 수도 있습니다. 이 기사에서는 정렬 플러그인 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="images/s1.jpg" alt="" /> <h3 class="title">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 플러그인 사용법에 대한 소개입니다. 한번 사용해 보세요!