アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 連載 » もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き) » 第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう

もっと便利に!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();

著者プロフィール

長谷川広武(はせがわひろむ;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/

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス