まだデータがありません。
テーブルソート アニメ効果付きで行を並べ替え「Animated Table Sorter」
当ページのリンクには広告が含まれています。
スポンサーリンク
アニメ効果付きでテーブルの行を並べ替えるプラグイン「Animated Table Sorter」を紹介します。
jQueryプラグイン「Animated Table Sorter」
テーブルヘッダー項目をクリックするとアニメーション効果付きで、行を並べ替える(ソートする)ことができます。ソートした状態で、もう一度テーブルヘッダーをクリックすると逆順にソートしてくれます。
オプションで、アニメスピード、アニメ効果(フェイド、スライドなど)を設定することができます。
仮名文字もソートできるので、おすすめ!
スポンサーリンク
デモのテーブルヘッダーをクリックし、ソートアニメーションなどの挙動を確認してみてください。
デモのソース(HTML + jQuery)
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta name="description" content="Animated Table Sorterのデモでーす。"> <title>Animated Table Sorter - jQuery Plugin Demo</title> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <script src="tsort.js"></script> <script> $(document).ready(function() { $('table.tableSorter').tableSort( { sortBy: ['numeric', 'text', 'text', 'text'], animation: 'slideLeftAll', speed: 400, distance: '200px', delay: 50 }); }); </script> <link rel="stylesheet" href="style.css" type="text/css" /> <style> table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 10px; border-bottom: 1px #0000ff solid; } </style> </head> <body> <h1>Animated Table Sorterのデモでーす。</h1> <table class="tableSorter"> <tr><th>年</th><th>開催国</th><th>都市</th><th>てすと</th></tr> <tr><td>1992</td><td>スペイン</td><td>バルセロナ</td><td>か</td></tr> <tr><td>1996</td><td>アメリカ合衆国</td><td>アトランタ</td><td>さ</td></tr> <tr><td>2000</td><td>オーストラリア</td><td>シドニー</td><td>あ</td></tr> <tr><td>2004</td><td>ギリシャ</td><td>アテネ</td><td>や</td></tr> <tr><td>2008</td><td>中国</td><td>北京</td><td>た</td></tr> <tr><td>2012</td><td>イギリス</td><td>ロンドン</td><td>は</td></tr> <tr><td>2016</td><td>ブラジル</td><td>リオデジャネイロ</td><td>な</td></tr> <tr><td>2020</td><td>日本</td><td>東京</td><td>ま</td></tr> </table> </body> </html>
スポンサーリンク