ezColumnsプラグイン
ezColumnsプラグインは新聞のコラム欄のような効果をつけることができます。文章の多いサイトなど、分割して表示させることで、見やすさが向上します。
下記サイトからjquery.ezColumns.js_.txtをダウンロードし、jquery.ezColumns.jsに修正後、pluginsフォルダに配置します。
ここでは、段落表示領域に対して、プラグイン適用前と適用後で比べてみましょう。リスト4に、ezColumnsプラグインの使用例を示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ezcolumnsサンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/jquery.ezColumns.js"></script>
<!--3.CSSの設定-->
<style type="text/css">
.col
{
float:left;
width:20%;
padding:5px;
background:#CCC;
margin-right:10px;
}
.title
{
font-size: large;
color: #0066FF;
}
</style>
<!--4.プラグインの設定-->
<script type="text/javascript">
$(function () {
// $("#samplearea").ezColumns();//デフォルト
// $("#samplearea").ezColumns({ columns: 4, colWrapper: '<div class="col" style="background: blue; color:white;"></div>' }); //オプション設定
});
</script>
</head>
<body>
<p class="title"><strong>ezColumnプラグイン適用前</strong></p>
<div id="samplearea">
<p>1 - XXXXX XXXXX XXXXX XXXXXXX 5757/5757X</p>
<p>2 - XXXXX XXXXX XXXXX XXXXXXX 5757/5757X</p>
<p>3 - XXXXX XXXXX XXXXX XXXXXXX 5757/5757X</p>
<p>4 - XXXXX XXXXX XXXXX XXXXXXX 5757/5757X</p>
<p>5 - XXXXX XXXXX XXXXX XXXXXXX 5757/5757X</p>
<p>6 - XXXXX XXXXX XXXXX XXXXXXX 5757/5757X</p>
<p>7 - XXXXX XXXXX XXXXX XXXXXXX 5757/5757X</p>
<p>8 - XXXXX XXXXX XXXXX XXXXXXX 5757/5757X</p>
</div>
</body>
</html>
今回は、ezColumnsプラグイン適用後のスタイルをプラグイン内でコラム表示のデフォルトクラス名であるcolに対して、背景色などを「3.CSSの設定」のように指定します。
プラグインの使い方は、「4.プラグインの設定」で「デフォルト」とコメントされている行のように、表示領域のid属性を指定し、ezColumnsメソッドを用います。プラグインを使用しない場合の結果を図7に、1行目のコメントアウトを外してデフォルト設定でプラグインを使用した場合の結果を図8に示します。
また、「3.CSSの設定」でcol以外の名称を用いたい場合は「4.プラグインの設定」で「オプション設定」とコメントされている行のように、オプションを使用します。「3.CSSの設定」でcolに対してスタイルを指定していた場合は、オプションで指定した値に上書きされます。ここでは背景色を青、文字色を白、コラム表示列を4に設定します。ezColumnsプラグインの引数を表3に示します。
| 引数 | 説明 | デフォルト |
| colWrapper | コラム表示のスタイルを指定する | <div class="col"></div> |
| columns | コラム表示列の最大値を指定する | 3 |
オプション設定でプラグインを使用した場合の結果を、図9に示します。
まとめ
第6回では、サイトの見せ方をひと工夫するのに役立つと思われるjQuery Pluginとして、角を丸めるなどの変化をつけるjQuery Cornersおよび、ツールチップ表記のスタイルをカスタマイズするTooltip、新聞のコラム欄のようなスタイルで表現できるezColumnsを取り上げました。些細な違いではありますが、効果的に使うことで、サイトをより魅力的に構築するのに役立つプラグインだと思います。次回は文章の折りたたみ機能、星型評価機能などインターフェースにテーマをおいたjQuery Pluginを取り上げる予定です。
