highlightプラグイン
最後はhighlightプラグインです。これは、指定したテキストをハイライト表示するプラグインです。身近な例だと、ブラウザを起動して、ブラウザ内のテキストを検索した際に、検索文字列がハイライトされるなどが挙げられます。
図7にhighlightプラグイン適用後を、図8にハイライト解除後を示します。
図7 highlightプラグイン使用後
また、ハイライトを解除すると図8のようになります。
図8 ハイライト解除後
highlightプラグインのサイトからjquery.highlight-3.jsとjquery.highlight-3.yui.jsをダウンロードし、pluginフォルダにhighlightフォルダを作成し、配置します。
リスト4にhighlightプラグインの使用例を示します。
［リスト4］highlightプラグインの使用例（jQueryPlugin_effect_Sample_after_searchGroup_Tokyo_Akiruno-shi.html）
<!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>jQuery effectサンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="Scripts/jquery-1.5.2.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/highlight/jquery.highlight-3.js"></script>
<script type="text/javascript" src="plugins/highlight/jquery.highlight-3.yui.js"></script>
<!--3.CSSの設定-->
<style type="text/css">
.highlight { background-color: red }
.style1
{
text-align: center;
}
</style>
</head>
<body>
<h1>jQueryプラグイン（effect）サンプル</h1>
<h1 class="style1">住所によるグループ検索（あきる野市）</h1>
<a href="jQueryPlugin_effect_Sample_after_searchGroup_Tokyo.html">戻る</a><br />
<p>
町名・大字名を選択してください。</p>
<div id="highlight-plugin">
<ul>
<!--4.プラグインの設定-->
<li><a href="javascript:void($('#highlight-plugin').highlight('秋留'));">リンククリックで『秋留』をハイライト</a></li>
<li><a href="javascript:void($('#highlight-plugin').removeHighlight());">リンククリックでハイライトをクリア</a></li>
</ul>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>町名・大字名</td>
<td>グループ</td>
</tr>
（中略）
<tr>
<td>
秋留１丁目</td>
<td>
3-B</td>
</tr>
（中略）
</table>
</div>
</body>
</html>
highlightプラグインの使用方法は、jquery.highlight-3.jsとjquery.highlight-3.yui.jsを読み込み、「3.CSSの設定」でハイライトする色を指定します。表示領域のli要素にhighlightメソッドを用い、引数にハイライトしたい文字列を指定します。また、ハイライトを解除したい場合はremoveHighlightメソッドを用います。
まとめ
第8回では、ハイライト、マウスオーバーでの変化などエフェクトをテーマにしたプラグインを紹介しました。次回はテーブルや、グラフのプロットなど、データをテーマにしたプラグインを取り上げる予定です。
