便利なjQueryプラグイン

Web UI をかっこ良く仕上げようとすると,JavaScriptでいろいろと作り込むことになります.

このような場合,jQueryのようなライブラリを使うのですが,
最近は,さらに便利なプラグインがいろいろと出回っています.

いろいろとあり過ぎて,逆に,選ぶのに困るような状況です.
数多く存在するjQueryプラグインの中から、目的にあったプラグインを見つけるには,
公式のjQueryプラグイン紹介ページを使います.

解説はすべて英文ですが、比較的簡単な文章で書かれている上、
解説を読まなくてもサンプルコードとデモなどで大まかな利用方法は理解できます.

公式のjQueryプラグイン紹介ページから,1つ取り上げて紹介しましょう.


Table Sorterは,テーブルに簡単にソート機能か付けられるJavaScriptライブラリです.


まず,利用したいページのhead要素内で,以下のようにプラグインを読み込み,適当にCSSの設定などをします.

《 プラグイン等の読み込み 》
<style type="text/css" id="css" >
<!--
table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .header {
    cursor: pointer;
}
-->
</style>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>

そして,以下のようなテーブに対して,

《 サンプルのテーブル 》
<table id="myTable" class="tablesorter"> 
    <thead> 
        <tr> 
            <th>No</th> 
            <th>名前</th> 
            <th>Email</th> 
            <th>電話番号</th> 
            <th>住所</th>
        </tr>
    </thead>
    <tbody>
        <tr> 
            <td>1</td> 
            <td>Biz Taro</td> 
            <td>taro@brainsellers.com</td> 
            <td>090-777-7777</td> 
            <td>Saitama</td> 
        </tr> 
        <tr> 
            <td>2</td> 
            <td>Biz Hanako</td> 
            <td>hana@brainsellers.com</td> 
            <td>090-888-5555</td> 
            <td>Otaru</td> 
        </tr>
        <tr> 
            <td>3</td> 
            <td>Biz Ichiro</td> 
            <td>bich@brainsellers.com</td> 
            <td>090-333-3333</td> 
            <td>Kobe</td> 
        </tr>
    </tbody>
</table>

以下のJavaScriptをページ内で実行することで,

《 サンプルのスクリプト 》
<script type="text/javascript">
$(function(){
     $("#myTable").tablesorter(); 
})
</script>

テーブルにソート機能が追加できます.

《 ソート機能付きテーブル 》

No 名前 Email 電話番号 住所
1 Biz Taro taro@brainsellers.com 090-777-7777 Saitama
2 Biz Hanako hana@brainsellers.com 090-888-5555 Otaru
3 Biz Ichiro bich@brainsellers.com 090-333-3333 Kobe

簡単ですね.しかし,注意点があります.
Table Sorter はテキストを文字コード順に並び替える方法でソートするので,
漢字が使われているテーブルをよみがな順にはソートできません.
この場合,漢字の列だけソート機能をオフにして,
アルファベットで記載した読み仮名の列を設けるなどの工夫が必要になります.

みなさんも,いろいろと探して遊んでみてはいかがでしょうか.

biz-Stream詳細情報  biz-Stream資料請求

超高速!!高機能!! Web帳票ソリューション biz-Stream

オンデマンドかつリアルタイムにビジネスドキュメントを生成する帳票ソリューション