ＳＱＬの窓 イラストAC フリー素材
<< Android アプリ作成の基礎 : PDF で問題 | TOP | jQuery プラグイン jquery.balloon.js を… >>

2015年07月17日

jQuery プラグイン jquery.balloon.js の外部からのコントロール

 
吹き出しを CSS や jQuery で作ってみて、結局このプラグインが良くできている事が解りました。しかし、操作系のメソッドが無いので、jQuery として外部からアクセスして『後から内容を変更する』処理方法です。

jquery.balloon.js のダウンロードと使い方のページ
オプションの日本語説明ページ

但し、吹き出し内の CSS オプションは内部の DIV に持ってしまっていたので、css メソッドで変更しています。( 最初に変更しておくと、いろいろ問題が出ません )


  


<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>

<script>
$(function() {
	$('#baloon_test').showBalloon(
		{
			contents: "後から変えるには、<br>data(\"options\") のプロパティを変更して showBalloon します",
			position: "right",
			tipSize: 6,
			showDuration: 0,
			css: {			
				opacity: "1",
				color: "#000",
				fontSize: "14px",
				borderRadius: "10px",
				border: "solid 1px #222",
				padding: "10px"
			}
		}
	);

	$('#change_test').click( function() {
		$('#baloon_test').data("balloon").css("color", "#f00");
		$('#baloon_test').data("options").contents = "このようになります";
		$('#baloon_test').data("options").offsetX = 100;
		$('#baloon_test').showBalloon();
	} );
});
</script>
<br><br>
<span id="baloon_test">&nbsp;</span>
<br><br><br>
<input type="button" id="change_test" value="後から変更">


jquery.balloon.js は、本来非表示の状態から特定の位置にマウスカーソルが合わされた時に『吹き出しが出現する』という使い方をします。こういうコンテンツは『バルーン(風船)』と呼ばれていて、その理由から jQuery のプラグインとしての名称も balloon で、定義用のメソッドが balloon です。

しかし、showBalloon というメソッドを使って最初から表示状態にする事ができます(つまり吹き出しの作成)。これは、CSS で作成するよりも、吹き出し口の位置調整が簡単なのでとても便利です。

たとえば文章の途中の文字列に対してもこのように吹き出しを作成する事ができます





※ 吹き出しは、position: absolute で表示されるので、吹き出しを表示する場所は空けておく必要があります。

CSS で実際吹き出しを作成して思ったのは、吹き出し口のサイズや位置や輪郭線の調整が面倒だと言う事です。CSS では、吹き出し口を作るのに :after や :before を良く使われるようですが、基本は輪郭線が線と線と結合する場所での表示特性を利用して、強引に三角形を作成します。しかし、そのために吹き出し口の輪郭を作成するのにもう一つ三角形を作成して色を指定してそれを元の三角形の下からはみ出させる事によって線として表現します。

意図的に一つ作るぶんにはいいですが、これのサイズ調整等はとても普通では無理です。その点、このプラグインは、:after や :before は使いませんが、原理は同じ事を二つの DIV で行っているようなので、そもそも CSS でやる理由は無いわけです。

jQuery は比較的少ないプログラミングの知識で CSS での表現を効率的に代替してくれるものです。というか、そもそも、ブラウザで行われる結果は、CSS で あろうが jQuery であろうが同じものなので、できれば商業的に効率と生産性の良い方法を選ぶべきで、一見凄い CSS でも、それはテクノロジーの象徴であって選択するものであるとは限らないと思います。

ただ、いかんせん個人の作った jQuery のプラグインは、問題が出た場合の対応に、殆ど作成者以外が手を出さない(出せない)ところにあります。このプラグインもとても優秀なのですが、いくつか問題を抱えていました。直接の内部の変更は作者でないと無理ですが、対症療法は作者以外のプログラマでもなんとかなるものです。

あと、プログラマの書いた説明はたいていにおいて『省略されていて解りにくい』というのも問題ですね。(自分で言いながらとても耳の痛い事実です)
ここを中心 
上のサンプルは具体的な変更手順のテストです。固定サイズで向きを変えたので、最初に吹き出しの CSS を変更する必要がありました。その後、プラグインのメインオプションを変更して最後に showBalloon を実行します。

<script>
var b_counter = 0;
$(function() {
	$('#center_sample').showBalloon(
		{
			contents: "CSSの指定は全て balloon の DIV に対して実行されます",
			position: "top",
			tipSize: 20,
			showDuration: 0,
			offsetY: 30,
			css: {
				width: "200px",
				height: "80px",
				opacity: "1",
				color: "#000",
				fontSize: "14px",
				borderRadius: "20px",
				border: "solid 2px #f00",
				padding: "20px",
				backgroundColor: "#ffffff",
				boxShadow: "none"
			}
		}
	);


	$('#change_position').click( function() {
		if ( b_counter == 0 ) {
			b_counter++;
			$('#center_sample').data("balloon").css({
				width: "80px",
				height: "200px",
				border: "solid 2px #0f0"
			})
			$('#center_sample').data("options").position = "right";
			$('#center_sample').data("options").offsetY = 0;
			$('#center_sample').data("options").offsetX = 30;
			$('#center_sample').showBalloon();
			return;
		}
		if ( b_counter == 1 ) {
			b_counter++;
			$('#center_sample').data("balloon").css({
				width: "200px",
				height: "80px",
				border: "solid 2px #00f"
			});
			$('#center_sample').data("options").position = "bottom";
			$('#center_sample').data("options").offsetY = -30;
			$('#center_sample').data("options").offsetX = 0;
			$('#center_sample').showBalloon();
			return;
		}
		if ( b_counter == 2 ) {
			b_counter++;
			$('#center_sample').data("balloon").css({
				width: "80px",
				height: "200px",
				border: "solid 2px #000"
			});
			$('#center_sample').data("options").position = "left";
			$('#center_sample').data("options").offsetY = 0;
			$('#center_sample').data("options").offsetX = -30;
			$('#center_sample').showBalloon()
			return;
		}
		if ( b_counter == 3 ) {
			b_counter = 0;
			$('#center_sample').data("balloon").css({
				width: "200px",
				height: "80px",
				border: "solid 2px #f00"
			});
			$('#center_sample').data("options").position = "top";
			$('#center_sample').data("options").offsetY = 30;
			$('#center_sample').data("options").offsetX = 0;
			$('#center_sample').showBalloon()
			return;
		}

	} );
});
</script>
<div style='width:600px;height:400px;border:solid 1px #000;text-align:center;vertical-align:middle;display:table-cell;'>
<span id="center_sample">ここを中心</span>
</div>
<input type="button" id="change_position" value="後から変更">


関連する記事
【jQueryの最新記事】
posted by at 2015-07-17 18:15 | jQuery | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa