もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)
第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう
jQueryプラグインの魅力は,JavaScriptの知識がなくても簡単に色々な機能を実装できることですね。今回は「誰でも簡単に実装できるツールチッププラグイン」を作成してみましょう。
ツールチッププラグインの要件は以下の通りです。
- titleまたはalt属性がある要素を対象
- titleとalt属性両方を持っている場合はtitleを優先
- 対象要素にマウスオーバーでツールチップをフェードイン
- 対象要素からマウスアウトでツールチップをフェードアウト
- 対象要素上ではツールチップはカーソルに追従
まずは完成サンプルとソースコードを見てみましょう。
完成ソースコード
// ここからツールチッププラグイン
$.fn.easyToolTip = function(options){
// toolTipを生成してbodyに追加しておく
var toolTip = $('<div id="toolTip"></div>').hide();
$('body').append(toolTip);
$(this).filter(function(){
// titleかaltを持っているものだけに絞る
return this.title || this.alt;
}).each(function(){
var self = $(this);
// titleがあればtitleを,なければaltをターゲットにする
var target = this.title ? 'title' : 'alt';
// ターゲットにした属性の値を保存する
var tipText = self.attr(target);
self.hover(function(e){
// ブラウザのツールチップが表示されるのを防ぐために一時的にtitle(alt)を削除
self.attr(target,'');
// toolTipにテキストを入れて表示
toolTip
.stop(true,true)
.fadeIn('fast')
.text(tipText)
.css({
position: 'absolute',
top: e.pageY - 20,
left: e.pageX + 20
})
},function(){
// title(alt)を元に戻す
self.attr(target,tipText);
// toolTipを非表示にする
toolTip.fadeOut('fast');
}).mousemove(function(e){
// カーソルに追従させる
toolTip.css({
top: e.pageY - 20,
left: e.pageX + 20
});
});
});
}
})(jQuery);
jQuery(function($){
// ツールチップの実行
$('img,a,span').easyToolTip();
});
今回使うメソッドの紹介
まずは今回使うメソッドを復習の分も兼ねて紹介しておきます。
filter
filterで指定した要素に絞ります。今回使っている方法は,filterの中のfunctionで絞り込みの条件を返しています。return this.title;とした場合,div要素の中でtitle属性を持っているものに絞ります。
$('div').filter(function(){
return this.title; // ここに条件文
});
stop
jQueryではfadeInやslideDownなど,要素を簡単にアニメーションさせるメソッドがありますが,これらは実行された際に一度アニメーションキューに保存され,順番に実行されていきます。stopメソッドは,現在実行されているアニメーションを中断するためのメソッドです。
ただしマウスの動きによって連続してアニメーションを実行するなど,使い方によっては,中途半端にアニメーションを止めてしまい,次回の実行に支障が出たりします。
stop(true,true)というように実行すれば便利に使うことができますので,使う場合は,(true,true)も併せて覚えておくとよいでしょう。
stopを使わない場合
$('a').hover(function(){
$(this).next().fadeIn('fast');
},function(){
$(this).next().fadeOut('fast');
});
stopを使った場合
$('a').hover(function(){
$(this).next().stop(true,true).fadeIn('fast');
},function(){
$(this).next().fadeOut('fast');
});
2つのサンプルの動作を見比べると,アニメーションのキューが残っているか残っていないかがはっきり分かると思います。
プラグインの枠組み
まずはプラグインの枠組みを作っておきます。これから書いていくコードはこれの中に書きます。
$.fn.easyToolTip = function(){
}
プラグインは以下のように実行できます。
$('a,span,img').easyToolTip();
もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)
- 第19回 jQueryでAJAX入門:JSONを使いサイトにTwitterを表示
- 第18回 jQueryでAJAX入門:RSSをAJAXで取得してリストに表示する
- 第17回 「その場編集」を実装する
- 第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう
- 第15回 チェックする項目の選択・未選択を画像でわかりやすくする
- 第14回 入力した/入力するパスワードを見えるようにする
- 第13回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(5)デザインされたチェックボックスを実装する
- 第12回 jQueryでセレクトボックスをデザインする
- 第11回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(3)
- 第10回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(2):プラグインを使わずにバリデーションを実装



