Home » jQueryプラグイン eztip

pict-jquery.png jQueryプラグイン eztipの使い方をサンプルを使いながら説明します。


まず、前ページの一番下にあるダウンロードリンクからeztipプラグインのアーカイブをダウンロードします。ダウンロードしたものを自分のサーバーに設置します。設置場所に特に制限はありませんので、他のjavascriptやjQueryのプラグインなどと同じ場所にでもコピーしておけばよいと思います。

インストール

ダウンロードしたアーカイブに含まれるファイルのうち、インストールする必要があるのは以下のファイルです。
  • jquery.eztip.js Javascriptプログラム
  • stylesheets/jquery.eztip.css CSSファイル
  • images/balloon*.png (全6ファイル)
    balloonスタイル用イメージ

但し、balloonスタイル用イメージファイルはballoonスタイルを使わない場合は不要です。これらのファイルを自分の環境にあわせて適当な場所にコピーします。この際、balloonスタイル用イメージファイルは、jquery.eztip.cssのスタイルシートでは相対URLを使って「../images/balloonXXXX.png」のように指定されていますのでインストールする場所のURLに合わせてこの部分を変更してください。

スクリプトの組み込み

eztipを使えるようにするためにJavascriptとCSSファイルの2つを使用したいHTMLのページのヘッダー部に組み込みます。
  1. <script type="text/javascript" src="(パス)/jquery.eztip.js"></script>
  2. <style type="text/css" media="all">@import "(パス)/jquery.eztip.css";</style>

対象となるHTMLを記述

この例では全て、tooltipと言うクラスを使用しています。jQueryのセレクタになるものであれば何でも大丈夫ですので、クラスでなくてもIDでもタグ自体でも対象として指定することは可能です。

サンプル1 （タイトル＋データ）
  1. <a title="タイトル1|ここはtitleに記述したデータです(1)" class="tooltip">サンプル1</a>（タイトル＋データ）
この例にあるようにタイトルと本文は同じtitle属性に指定し、両者を「|」で区切ります（半角の縦棒です)。この区切りの前がタイトルになり、区切りの後が本文となります。

サンプル2 （タイトルのみ）
  1. <a class="tooltip" title="タイトル2">サンプル2</a>（タイトルのみ）
タイトルのみで本文が不要な場合には区切りの「|」も不要です。

サンプル3 （データのみ）
  1. <a class="tooltip" title="|ここはtitleに記述したデータです(3)">サンプル3</a>（データのみ）
タイトルが不要な場合は区切りの「|」をはじめに入れて本文を記述します。

eztipはもちろんアンカー以外のタグでも使うことができます。

サンプル8 (p要素：タイトルもデータも有り)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla turpis, malesuada vitae, congue iaculis, congue et, metus. Donec commodo lectus eu metus.

  1. <p title="タイトル8|ここはtitleに記述したデータです(8)" class="tooltip">サンプル8 (p要素：タイトルもデータも有り)<br/>
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla turpis, malesuada vitae, congue iaculis, congue et, metus. Donec commodo lectus eu metus. </p>

サンプル9 (span要素：タイトルもデータも有り)
  1. <span title="タイトル9|ここはtitleに記述したデータです(9)" class="tooltip">サンプル9(span要素：タイトルもデータも有り)</span>

サンプル10 (div要素：タイトルのみ)
  1. <div title="タイトル10" class="tooltip">サンプル10 (div要素：タイトルのみ)</div>

eztipをコールする

あとやらなければならない事は、eztipをコールすることです。これは他のjQueryプラグインと同様にページヘッダに記述するready関数部に記述します。
  1. <script type="text/language">
  2. $(function() {
  3.   $("a.tooltip").eztip();
  4. });
  5. </script>
となります。この例では、tooltipクラスのa(アンカー)タグを対象としています。

バルーンスタイルにする場合には、eztip({balloon:true});としてパラメータballoonにtrueを渡してください。

 
まだ投票はありません