今日の人気記事

まだデータがありません。

HTMLリストをアニメーションでソート「Animated Sort」

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

スポンサーリンク

HTMLのリスト(<li>タグ)をアニメーション効果付きでソートするjQueryプラグイン「Animated Sort」を紹介します。

jQueryプラグイン「Animated Sort」

このプラグインは、ソート方法・時間・アニメーション効果などのオプションを指定するだけで、簡単にソート機能が作成できます。動きもなかなかおもしろいので、デモで確認してみてください。

スポンサーリンク

デモでは、「ソート開始」ボタンをクリックすると、HTMLのリストタグ内の数字がソートされ、「リセット」ボタンを押すと元の状態に戻ります。それでは、アニメーション付きのソートを楽しんでみてください。

「Animated Sort」のデモ

デモのソース(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

スポンサーリンク

関連記事(一部広告含む)