読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryプラグインballoon.jsを使って吹き出し表示したり非表示にする方法。入力値をチェックして、注意書きを吹き出しで表示するサンプルを作ってみる。

<スポンサーリンク>

balloon.jsの使い方。

以下の公式サイトからballoon.jsをダウンロードする。
「The latest version of jquery.balloon.js」のところにあるリンクをクリックすればいい。
http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
で、適当なjsフォルダにダウンロードしたJavaScriptを配置して、

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

のようにして読み込むだけ。

balloon.jsの使い方

たとえば、苗字と名前を入力するテキストフィールドがあるとする。

<label>苗字:<input type="text" id="lastName" class="lastName"><span id="lastNameSpan" class="lastNameSpan"></span></label><br />
<label>名前:<input type="text" id="firstName" class="firstName"><span id="firstNameSpan" class="firstNameSpan"></span></label><br />

このようなテキストフィールドの横に吹き出しを表示したい場合は、

$(".lastNameSpan").showBalloon({contents : "苗字を入力してください",
								position : "right"});

こんな感じで、クラス属性を指定→showBalloonメソッドで、吹き出しを表示することができる。
balloon.jsの吹き出しの中のコメントは、「contents : "吹き出しのメッセージ"」のように、引数(オプション)として指定する。
オプションにどのようなものがあるかは、冒頭のDemoページを見てもいいが、こちらのサイトなども詳しい。

さて、今回は入力チェックして、値が入力されていなかったら吹き出しで注意書き(というかnotice)を表示させるという使い方をした。

ボタンクリック時のイベントとして入力値をチェックして、値が入力されていなかったら吹き出しを表示するには、こんな感じで作る。

$(function() {
    $("#regist_btn").click(function() {
    	var member = {
    		firstName: null,
    		lastName: null,
    	};
    	member.firstName = $("#firstName").val();
    	member.lastName = $("#lastName").val();

    	//入力値チェック
    	if (member.lastName == null || member.lastName == "") {
    		$(".lastNameSpan").showBalloon({contents : "苗字を入力してください",
    										position : "right"});
    		return false;
    	} else if (member.firstName == null || member.firstName == "") {
    		$("#firstNameSpan").showBalloon({ contents : "名前を入力してください",
    							              position : "right" });
    		return false;
    	}
    });
});

あえてオブジェクトに突っ込んでいるのは、後でJSONにして送信するためであり、普通に

var firstName = $("#firstName").val();

で値を取得してチェックするでもいいと思う。

これで、値が入力されていなかったら吹き出し表示ができる。
ただ、これだと吹き出しが表示されっぱなしでカッコ悪い。

吹き出しを出しておいて、テキストボックスにフォーカスが当たったら、balloon.jsの吹き出しを消したいとき

上記のスクリプトに加え、こんな感じの処理を追加することで、balloon.jsで表示された吹き出しを隠すことができる。

/**フォーカスが当たったら吹き出し非表示 */
$(".lastName").focus(function() {
	$(".lastNameSpan").showBalloon().hideBalloon();
});
$(".firstName").focus(function() {
	$(".firstNameSpan").showBalloon().hideBalloon();
});