29分でできる！ あのサイトの“技”を盗め ― 第26回
普通のtableタグを1行で動く表にするJSライブラリ
2009年06月02日 14時00分更新
スクリプトを組み込めば完成
最後に、スクリプトを読み込ませましょう。TablesorterはjQueryライブラリを使っているので、scriptタグを使ってjQuery、Tablesorterの順に読み込ませます。jQuery以外の他のライブラリの読み込み順は気にしなくて大丈夫です。
<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/booklist.js"></script>
これで完成です。テーブルの見出し部分をクリックするごとに昇順、降順でソートされるか、動作を確認しましょう。もし、ヘッダー部分に▼ボタンが表示されていない場合はCSSフォルダ内にthemes/blueフォルダがあるか、読み込むテーマファイルがあるCSSファイルのパスが正しいかどうかチェックしてください。
 |  | |
|---|---|---|
 | テーブルの見出し行をクリックすると昇順／降順でソートされれば完成です | |
さて、これまで8回に渡って紹介してきた「東京ブックマニア」を作例とするシリーズは今回でおしまいです。次週はお休みをいただき、また新たな作例サイトをもとに、サイトをブラッシュアップするテクニックを紹介していきます。どうぞお楽しみに。
（作例デザイン：wataru）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
この連載の記事
- 第25回 Googleマップ＋jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo！の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド！ページ切換法
- 第16回 jQueryアニメ＆エフェクト合わせ技で画像を拡大
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
