もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう

この記事を読むのに必要な時間:およそ 6 分

画像

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();

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入