jQuery UI逆引きリファレンス
ツールチップへの表示内容をカスタマイズするには？
画像を含んだツールチップを表示したり、Ajax経由でツールチップの内容を取得したりできるTooltipウィジェットのパラメーターの指定方法を紹介。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザーインターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
別稿「jQuery UI逆引きリファレンス： Tooltipウィジェットでツールチップを表示するには？」では、Tooltipウィジェットを使って基本的なツールチップを作成する方法について紹介しました。本稿では、引き続きTooltipウィジェットのパラメーターを利用しながら、画像を含んだツールチップを表示したり、Ajax経由でツールチップの内容を取得したりする方法について紹介していきます。
画像付きのツールチップを生成する
tooltipメソッドのitems／contentパラメーターを利用することで、ツールチップの内容は自作することもできます。例えば以下は、（title属性ではなく）data-isbn／data-price／data-publishなどの属性をもとに、ツールチップの内容を動的に組み立てる例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tooltipウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// 2data-xxxxx属性をもとに、ツールチップを生成
$('#list').tooltip({
items: '[data-isbn]',
content: function() {
// 3data-xxxxx属性からコンテンツを組み立て
var isbn = $(this).data('isbn');
var price = $(this).data('price');
var publish = $(this).data('publish');
return '<img src="http://www.wings.msn.to/books/' + isbn + '/' + isbn + '.jpg" /><br />出版社：' + publish + '<br />価格：' + price + '円';
}
});
});
</script>
</head>
<body>
<!--1ツールチップ組み立てのためのdata-xxxxx属性を準備-->
<ul id="list">
<li><a href="#" data-isbn="978-4-7981-3332-4" data-price="2940"
data-publish="翔泳社">10日でおぼえるjQuery入門教室 第2版</a></li>
<li><a href="#" data-isbn="978-4-7741-5878-5" data-price="3360"
data-publish="技術評論社">AndroidエンジニアのためのモダンJava</a></li>
<li><a href="#" data-isbn="978-4-7981-3257-0" data-price="3990"
data-publish="翔泳社">独習ASP.NET 第4版</a></li>
<li><a href="#" data-isbn="978-4-8222-9621-6" data-price="2310"
data-publish="日経BP社">書き込み式SQLのドリル 改訂新版</a></li>
<li><a href="#" data-isbn="978-4-7981-3049-1" data-price="3780"
data-publish="翔泳社">独習Java サーバサイド編 第2版</a></li>
<li><a href="#" data-isbn="978-4-7980-3585-7" data-price="3150"
data-publish="秀和システム">はじめてのAndroidアプリ開発</a></li>
</ul>
</body>
</html
|
まず、ツールチップに表示すべき内容を、ターゲット要素のdata-xxxxx属性として準備しておきます（1）。サンプルであれば、data-isbn／data-price／data-publish属性がそれです。data-xxxxx属性は「独自データ属性」と呼ばれ、JavaScriptなどで利用するためのパラメーター情報を表します。
マークアップ側の準備ができたら、2のようにtooltipメソッドを呼び出します。itemsパラメーターは、ツールチップとして表示する要素／属性を宣言します。デフォルトは「[title]」となっており、Tooltipウィジェットはtitle属性をキーにツールチップを生成します。
ただし、itemsパラメーターはツールチップを生成するトリガーとなるだけなので（この場合であれば、data-isbn属性を持つ要素についてツールチップを生成）、実際に表示されるべきコンテンツは、contentパラメーターの側で指定しなければなりません。
contentパラメーターは、ツールチップを生成する際に呼び出されるコールバック関数を表します。戻り値として、ツールチップに表示されるべきテキストを返します。テキストにはHTMLのタグを含めることもできますので、ツールチップに画像を埋め込むならば、戻り値に<img>要素を埋め込むだけです。
コールバック関数の中では、「$(this)」でターゲット要素にアクセスできます。そこで3では、そのdataメソッドにアクセスし、data-xxxxx属性の値を取得、その値を基にHTML文字列を組み立てているわけです。
Web API経由でツールチップの情報を取得する
同じ要領で、Web API経由でツールチップに表示すべき情報を生成することもできます。例えば以下は、リンクリストに対してマウス・ポインターを当てると、対応するはてなブックマークの件数を表示する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tooltipウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// 1はてなブックマーク APIにアクセス
$('#list a').each(function() {
var target = $(this);
var url = target.attr('href');
$.getJSON(
'http://b.hatena.ne.jp/entry/jsonlite/?callback=?',
{ url: url }
)
.done(function(data) {
target.data('count', data.count);
});
});
// 2ツールチップを初期化
$('#list').tooltip({
items: '[href]',
content: function() {
return 'ブックマーク件数：' + $(this).data('count');
}
});
});
</script>
</head>
<body>
<ul id="list">
<li><a href="http://www.wings.msn.to/">サーバーサイド技術の学び舎</a></li>
<li><a href="/">Build Insider</a></li>
<li><a href="http://codezine.jp/">CodeZine</a></li>
</ul>
</body>
</html>
|
ページロード時に、アンカータグ（＝<a>タグ）のhref属性を順に読み込み、その内容でブックマーク件数を問い合わせます（1）。はてなブックマークAPIについては、Hatena Developer Centerを参照してください。また、$.getJSONメソッドについては、別稿「非同期でJSON形式のデータを取得するには？」を参照してください。
問い合わせの結果、取得したブックマーク件数はdataメソッドでそれぞれのアンカータグにひも付け、キャッシュしておきます。
あとは、先ほどと同じようにitems／contentパラメーターの組み合わせで、ツールチップを生成するだけです（2）。dataメソッドでキャッシュしたデータは、同じくdataメソッドで取得できます。
※以下では、本稿の前後を合わせて5回分（第20回～第24回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
20. Selectableウィジェットで選択可能なリストを作成するには？
マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。
21. Draggable／Droppableウィジェットでドラッグ＆ドロップ機能を実装するには？
ページ上の指定された要素をマウスでドラッグ＆ドロップできるようにするDraggable／Droppableウィジェットの基本的な使い方を解説。
24. 【現在、表示中】≫ ツールチップへの表示内容をカスタマイズするには？
画像を含んだツールチップを表示したり、Ajax経由でツールチップの内容を取得したりできるTooltipウィジェットのパラメーターの指定方法を紹介。
