Top > 開発ガイド > Spinelzリファレンス > Baloon

Balloon

概要

  • ツールチップを表示します。（説明文などを表示するポップアップです。）

利用方法

<script src="../src/javascripts/spinelz_lib/prototype.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz_lib/scriptaculous.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz_lib/resize.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz_lib/spinelz_util.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz/balloon.js" type="text/javascript"></script>
<link rel="stylesheet" href="../src/stylesheets/spinelz/balloon.css" type="text/css">
<body>
  <input type="button" id="target" value="target">
  <script type="text/javascript">
    var balloon1 = new Balloon('target', 'Hello Balloon!', {width: 500, height: 500});
  </script>
</body>

API

コンストラクタ(target, message)

引数説明
targetHTML要素のID。この要素のそばにツールチップを表示します。
messageツールチップを表示するメッセージ。

オプション 第3引数として以下のオプションを指定することができます。 オプションを指定するかどうかは任意です。

オプション名デフォルト値説明
trigger引数targetと同じバルーンを表示するためのトリガーとなるHTML要素のID。
tipId引数target + '_balloon'ツールチップにはつけるID。
events['click']triggerオプションに関連付けるイベント。指定されたイベントによりバルーンが表示されます。
width300ツールチップの幅
height200ツールチップの高さ
cssPrefix'custom_'カスタムスタイルシートのプレフィックス文字列

open()

ツールチップを表示します。

close()

ツールチップを非表示にします。