JQuery Balloonプラグイン: balloonの消し方

追記:2012/02/17

jquery.balloon.jsはバージョンアップされているようですのでそちらをお使いください。

追記ココマデ

ツールチップを表示するこちらのJQueryプラグイン「jquery.balloon.js」について動的に消したいのになかなか消せなかったのでメモ。

経緯:

削除ボタンがあって、そのボタンにマウスをあわせると「削除する」とツールチップを表示するために上記のプラグインを用いていたのですが、クリック時にボタン自体を消したら、ツールチップだけ画面に残ってしまった。

解決:

Balloonにはballoonを設定したオブジェクトに対し、data(“balloon”)で取得できる模様。

[javascript]
deleteBtn.click(function(){
$(this).data(“balloon”).remove();
});
deleteBtn.balloon();
[/javascript]

 

追記2011/11/11

 

上記の方法では不十分。消した後、ブラウザの画面サイズを変更するjavascriptエラーがでる。
理由はツールチップを表示したときに$.balloon.instancesに配列を追加していて、window.resizeイベントでそれらの配列の要素にアクセスしているため。

本当は拡張したかったのだが、面倒だったので直接プラグインに変更を加えた。

1:$.balloonにメソッドを二つ追加。

2:配列に常に突っ込むのをやめて、重複していないかのチェックをするように変更。

 

追記2 2011/11/11

と思ったが、adjustBalloonで位置が設定できない現象が。理由はこのメソッドが呼ばれたときに要素が表示されていないこと。表示する瞬間に位置情報を計算したほうがよいのではないかと思い、再び改造。

showメソッドの中で計算した。それによって$.balloon.instances関連のものが必要なくなった。

誰の助けになるかわかりませんが一応ソースを張っておきます。

 

2 thoughts on “JQuery Balloonプラグイン: balloonの消し方

  1. うりん

    jquery.balloon.js作者のうりんです。はじめまして。
    色々とお手数をお掛けしてしまったみたいで、すみませんでした。
    時既に遅し、かもしれませんが、
    最近ほぼ同様の改造+バグフィックスを行ったので、よかったらどうぞ 🙂

  2. dyo 投稿作成者

    ありがとうございます。さっそく使わせていただきますw

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です