要素を手軽にソートできる「jSort - jQury sorting plugin」

要素を手軽にソートできる「jSort - jQury sorting plugin」サンプル リストがずらっと並んだ時、ソートができると目的のものに到達しやすくなり、使いやすくなります。
jQury sorting plugin - jSortを使用すれば、簡単に要素をソートできるようになります。

使用方法 jQury sorting plugin - jSortからファイル一式をダウンロード。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.jsort.0.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("#id名").click(function(){
$(".class名").jSort({
sort_by: 'h2', //ソート元
item: 'div', //ソートの親要素
order: 'desc' //順番デフォルトはasc
});
});
});
</script>

上記のようにJavaScriptを記述したら、ソートさせたい要素を以下のルールで記述すれば完成です。
<p id="id名">ソートボタン</p>
<div class="class名">
<div>
<h2>aaa</h2>
<p>テキストテキストテキストテキスト</p>
</div>
<div>
<h2>aaa</h2>
<p>テキストテキストテキストテキスト</p>
</div>
以下要素分
</div>

要素を手軽にソートできる「jSort - jQury sorting plugin」サンプル

sponsors

「要素を手軽にソートできる「jSort - jQury sorting plugin」」をシェアする

記事作成:
記事URL:

TOP > > 要素を手軽にソートできる「jSort - jQury sorting plugin」