SQLの窓

2015年07月17日


jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方

オンラインで実行



画像を背景画像に使用する応用編もありますが、まずは title 属性 で試した後、contents オプションでバルーンをカスタマイズする方法から入るといいと思います。

※ サンプルの contents には、Google Chrome で動作する HTML5 のコンテンツを使用しています
※ ここでは、inline 要素の span に対して行っていますが、複数行になる場合は block 要素を使用すべきです( line-height が大きい場合、行間がイベントから外れます )

jquery.balloon.js ダウンロードページ

上のページにも使用説明があるのですが、英文で書かれているので、オプションは以下のページを参照するといいと思います。

日本語による詳しいオプションの説明があります

設置サンプルコード
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://winofsql.jp/js/jquery.balloon.min.051.js"></script>

<script>
$(function(){

	$('#target1').balloon({
		// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
		position: "right",
		// 吹き出しの CSS 設定です
		css: {
			"color": "#0000ff",
			"font-size": "20px",
			"font-weight": "bold",
			"padding": "20px"
		}
	});

	$('#target2').balloon({
		// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
		position: "right",
		// 吹き出し端に付く正三角形のサイズ(高さ)
		tipSize: 20,
		// 吹き出しの CSS 設定です
		css: {
			"height": "270px",
			"opacity": "1",
			"color": "#000",
			"font-size": "16px",
			"border-radius": "10px",
			"border": "solid 2px #A63814",
			"padding": "10px"
		},
		// CSS の対象となる、吹き出しの内部コンテンツを定義します
		contents: '<img src="http://winofsql.jp/image/sab.gif"> ここには HTML を記述できます<br>▼ Google Chrome だと日付コントロール<br><input type="date">'
	});

});
</script>
<pre>


▼ HTML の title 属性内を使用するシンプルなバルーン

<span
	id="target1"
	 title="日本語表示あいうえお"
>この要素内の title 属性を使う</span>

▼ プラグイン側で、HTML の コンテンツを文字列を作成する応用編

<span
	id="target2"
>contents オプションで HTML をバルーン内に表示</span>


</pre>



▼ HTML の title 属性内を使用するシンプルなバルーン

この要素内の title 属性を使う

▼ プラグイン側で、HTML の コンテンツを文字列で作成する応用編

contents オプションで HTML をバルーン内に表示

関連する記事



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

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり