Home > Ajax | Javascript | jQuery | PHP | フレームワーク > jQueryのjTip (ツールチップ)

jQueryのjTip (ツールチップ)

DSでオープンソース。そのうち手を出してみたいですな。

ブラウザでツールチップを出したいと思い、jQueryのjTipっていうプラグインを使ってみたのでメモ。ここの「DownLoad This Example」からダウンロードしたけど、それでいいんだろうか?

1.初期化
jtip.jsを読み込めば初期化されるが、自分の初期化プロセスに組み込むときは


JT_init();

を呼べばいいと思う。たぶん。

2.使い方
ツールチップを出したい部分をaタグで囲む。表示したい内容を返すページのURLをhrefに書く。?以降は多分ウインドウ幅。
idはちゃんと指定する。このidで要素を取得して、その近くにツールチップを出すっぽい。
同封のglobal.cssを使う場合はclass=”jTip”。この場合、同封のimagesを使うとロード中の画像とか出てカッコイイ。Ajaxです。
nameで指定したものがツールチップのタイトルになる。


<a href="hogehoge.htm?300" id="foo" class="jTip" name="bar">ツールチップ</a>

3.CakePHP
CakePHPで使ってみた。まあ、別にどうということはないけど。ちょっとはまったことは、hrefのURL。CakePHPとかの場合、URLが「コントローラ名+メソッド名+引数」などになって、URL相対指定するとわけがわからないURLになってしまう。
ということで絶対指定すればいいわけだが、あるいは「$this->webroot」をビューでechoすれば、ルートからのURLが得られます。


webroot = "<?php echo $this->webroot; ?>";
$(function(){
    $("#tooltip").html('<a href="'+webroot+'hogehoge/hoge?300" id="foo" class="jTip" name="bar">ツールチップ</a>');
});

<div id="tooltip"></div>

以上

Comments:3

匿名 07-09-21 (金) 16:47

Add Your Comment

10-02-08 (月) 20:06

ひどいソースだなww

コスミー 10-02-09 (火) 2:07

ん?w

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://red-treasure.com/report/wp-trackback.php?p=70
Listed below are links to weblogs that reference
jQueryのjTip (ツールチップ) from コスミー報告書[社外秘]

Home > Ajax | Javascript | jQuery | PHP | フレームワーク > jQueryのjTip (ツールチップ)

Search
Feeds
Meta
 合計:000248
 今日:0116 昨日:0132

Return to page top