ＳＱＬの窓 イラストAC フリー素材
<< jQuery プラグイン jquery.balloon.js を… | TOP | jquery.balloon.js で、balloon をメッセ… >>

2015年07月17日

jQuery プラグイン jquery.balloon.js で複数バルーンにそれぞれ別のコンテンツを設定する為には、.each を使う

 
jquery.balloon.js のダウンロードと使い方のページ

jQuery の .data で保存されるデータは、ロード時に利用しようとするとうまく行かなかったので、外部のオブジェクトとして設定データの一覧を作りました。前提としては、後で変更する事のない詳細説明としてカーソルを合わせる事によって表示されるイベント処理用です。

ポイントは、関係付けるために、id の文字列を利用しています。id 文字列をプロパティとして持つ一般オブシェクトを作成しておいて、変数名["プロパティ名"] で参照する為に、balloon メソッドの引数部分と同じスコープにそれぞれの jQuery オブジェクトが必要になります。

なので、.each を使用していますが、jquery.balloon.js は、そのような場合にもっと簡易的にデータほ設定する方法として、対象オブジェクトの title 属性に HTML レベルで直書きするようになっています。ただ、この場合は HTML 内なので、特殊な文字列は &#nnnn; 形式のエンコードが必要になります。

▼ 例えば以下は、HTML 内に HTML と JavaScript を記述する例です。

title="&lt;b style='cursor:pointer' onclick='alert(&#34;OK&#34;)'&gt;ここをクリック&lt;/b&gt;"








▼ この下にある画像の上にマウスカーソルを持っていって下さい。











<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>
var contents_text = {
	jiyunotsubasa: "TVアニメ『進撃の巨人』第二期オープニングテーマで使用されている書体を真似て作られたフォントです。",
	cp_font: "カタカナが、タイトルロゴ「ウルトラクイズ」風"
}
$(function() {
	$( ".font_img" ).each( function() {
		$( this ).balloon(
			{
				contents: contents_text[this.id],
				position: "top",
				tipSize: 20,
				offsetY: 18,
				offsetX: -10,
				css: {			
					width: "180px",
					opacity: "1",
					color: "#333",
					fontSize: "16px",
					borderRadius: "10px",
					border: "solid 2px #A63814",
					padding: "10px"
				}
			}
		);
	});

});
</script>
<pre>









<img class="font_img" id="jiyunotsubasa" src="https://lh6.googleusercontent.com/-ubSOwpnHv_4/Uun7RpSmViI/AAAAAAAASVQ/vx0ucJQoIxw/s280/freefont_logo_jiyunotsubasa.png" style="border: solid 1px #000000" /><img class="font_img" id="cp_font" src="https://lh3.googleusercontent.com/-mHGhQVAlntk/Uun7RvhvkSI/AAAAAAAASVM/Hz3Tsx5suw0/s280/freefont_logo_cp_font.png" style="border: solid 1px #000000" />

<br>
<img class="font_img" title="&lt;b style='cursor:pointer' onclick='alert(&#34;OK&#34;)'&gt;ここをクリック&lt;/b&gt;" src="https://lh6.googleusercontent.com/-ubSOwpnHv_4/Uun7RpSmViI/AAAAAAAASVQ/vx0ucJQoIxw/s280/freefont_logo_jiyunotsubasa.png" style="border: solid 1px #000000" /><img class="font_img" title="普通の直接文字列" src="https://lh3.googleusercontent.com/-mHGhQVAlntk/Uun7RvhvkSI/AAAAAAAASVM/Hz3Tsx5suw0/s280/freefont_logo_cp_font.png" style="border: solid 1px #000000" />




</pre>



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


Powered by Seesaa