HTMLリストをアニメーションでソート「Animated Sort」
当ページのリンクには広告が含まれています。
スポンサーリンク
HTMLのリスト（<li>タグ）をアニメーション効果付きでソートするjQueryプラグイン「Animated Sort」を紹介します。
jQueryプラグイン「Animated Sort」
このプラグインは、ソート方法・時間・アニメーション効果などのオプションを指定するだけで、簡単にソート機能が作成できます。動きもなかなかおもしろいので、デモで確認してみてください。
スポンサーリンク
デモでは、「ソート開始」ボタンをクリックすると、HTMLのリストタグ内の数字がソートされ、「リセット」ボタンを押すと元の状態に戻ります。それでは、アニメーション付きのソートを楽しんでみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated Sort - jQueryプラグインまとめのカルマ</title>
<style>
ul {
list-style-type: none;
margin-top: 20px;
}
li {
font-size: 2em;
line-height: 1.5em;
}
#num-list{
margin: 20px auto;
width: 400px;
border: 1px solid blue;
padding: 20px;
}
</style>
</head>
<body>
<h1>Animated Sortのデモでーす。</h1>
<div id="num-list">
<button type="button" id="num-sort">ソート開始</button>
<button type="button" id="nume-reset">リセット</button>
<ul>
<li>87</li>
<li>1</li>
<li>26</li>
<li>7</li>
<li>8</li>
<li>3</li>
<li>11</li>
</ul>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js" ></script>
<script src="http://codeorigin.jquery.com/color/jquery.color.plus-names-2.1.2.min.js" ></script>
<script src="jquery.animatedsort.js"></script>
<script>
$("#num-list").animatedSort({
stepTime: 300,
sortAlgorithm: "selection",
animationTrigger: {event: "click", selector: "#num-sort"},
resetTrigger: {event: "click", selector: "#num-reset"}
});
</script>
</body>
</html>
jsファイルのダウンロード、その他オプションの詳細はこちらからどうぞ。
» Animated Sort
スポンサーリンク