Balloon.js

Google マップや Google カレンダー風の吹き出し型 (バルーン) ダイアログを表示する JavaScript ライブラリ。

ダウンロード

下記 2 つのファイルが必要です。

ライセンスは クリエイティブ・コモンズ 表示 2.1 日本 と MIT License のデュアルライセンスの下で自由に使用できます。ライセンスは好きな方を選ぶことができます。ソース内のリンクは残してください。

試してみる

Mozilla Firefox 2.0/3.0, Internet Explorer 6.0/7.0, Safari 3.1 (Windows) で表示確認済みです。

使い方

HTML のヘッダーに次のコードを挿入します

<script type="text/javascript" src="./balloon.js"></script>

表示したいところに、下記のようなコードを表示します。

<a href="#" onclick="balloon.popup('ID','表示したい文字列');return false;">バルーンを表示</a>

ID は、バルーンを識別するために使用します。balloon1, balloon2 など適当な名前を設定してください。
表示したい文字列 には、HTML を記述することができます。

オプション

カッコ () 内の数字はデフォルトの値。

balloon.setBalloonWidth(240);
バルーンの幅 (px)。
balloon.setBalloonHeight(120);
バルーンの高さ (px)。
balloon.setBalloonLadder(35);
バルーンの足の長さ (px)。10～100 の値を指定。
balloon.setBalloonLadderStyle(0);
バルーンの足のスタイル。0,1,2 の 3 種類から指定。
balloon.setFontSize(12);
バルーンの中のフォントサイズ (px)。
balloon.clear();
デフォルトの設定に戻す。

オプションを指定する場合は、下記のようにヘッダー内に記述または、表示させたい場所に記述します。

<script type="text/javascript"><!--
balloon.setBalloonWidth(300);
balloon.setBalloonHeight(200);
//--></script>

<a href="#" onclick="balloon.setBalloonLadderStyle(1);balloon.popup('ID','表示したい文字列');return false;">バルーンを表示</a>

リンク