Google
 
jQuery
たぶねこ @ 2013年2月25日 1:54 PM

Bubble Popupは、フキダシをいろいろなdom要素にマウスオーバーすることで表示するプラグインですが、余りいろいろなイベントを使用したサンプルがありません。
マウスクリックやフォーカスにも対応できます。
テキストボックスのフォーカスに対応した使い方をネット検索したところ、英語ページでプラグイン自体の改造を要する対応以外見つからなかったので、メモっておきます。

参照
 Bubble Popup:Max Vergelli.
 マウスクリックでツールチップを行う。JAVAdomain

現在Bubble PopupはV3.0です。
ダウンロードしたBubble Popupに付属されているサンプル「test-jquery-bubble-popup.html」の以下で指定する部分のロジックを変更・追加します。

※30行目を変更
$(‘.button’).CreateBubblePopup({

$(‘.button’).focus(function() {
$(‘.button’).CreateBubblePopup();
var focus_get = $(this);
focus_get.ShowBubblePopup({

 
※43行目に追加
manageMouseEvents: ‘fales’,

 
※48行目に追加
$(‘.button’).blur(function() {
$(focus_get).HideBubblePopup();
});

 
※65行目のdivをinputに変更
<div class=”button”\>mouse over here!</div>

<input class=”button” type=”text” />

 
以上

サンプル(thtmlのみ。拡張子をtxt→htmlに変更して、Bubble Popupのダウンロードフォルダにコピーして実行してみてください)
・・・噴出しの色や文面をちょっと変えてます(~~)

コメントはまだありません »

コメントはまだありません。

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

*

Copyright (c) 2007 njcFactory All rights reserved.
HTML convert time: 0.796 sec
Images is enhanced with WordPress Lightbox JS by Zeo
Powered by WordPress.