リストやテーブルなど（li、tr、option）をソート「SortedList」

当ページのリンクには広告が含まれています。

jQuery Plugin » エフェクト » リストやテーブルなど（li、tr、option）をソート「SortedList」

リストやテーブルなど（li、tr、option）をソートするプラグイン「SortedList」を紹介します。

jQueryプラグイン「SortedList」

このプラグインを使えば、リストやテーブルのアイテムをクリックなどアクションでソートすることができます。

リストやテーブルだけではなく、DOM要素であれば何でもソートすることができるようなので、使い勝手がよさそうですね。

それではデモページのチェックボックスをクリックして、ソートしてみてください。

「SortedList」のデモ

デモのソース（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="SortedList のデモでーす。">
<title>SortedList - jQuery Plugin Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.sortedlist.js"></script>
<script>
$(function(){
  $("#demo").sortedList({
    sort : [
      { desc : { data : "moved" } },
      { asc : { data : "al-index" } }
    ]
  });
  $("#demo").find( "input[type=checkbox]" ).each(function(){
    $( this ).parent().data( "moved", 0 );
  }).change( function(){
    $( this ).parent().data( "moved", $(this).is(":checked") );
    $("#demo").sortedList( "order" )
  });
});
</script>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/sortedList/">「jQueryプラグインまとめ」に戻る</a></p>
 
<h1>SortedList のデモ。</h1>
<ul id="demo">
  <li><input type="checkbox" /> A</li>
  <li><input type="checkbox" /> B</li>
  <li><input type="checkbox" /> C</li>
  <li><input type="checkbox" /> D</li>
  <li><input type="checkbox" /> E</li>
</ul>
</body>
</html>

SortedList

jQueryプラグイン「SortedList」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）