SQLの窓

2015年07月17日

jquery.balloon.js で、balloon をメッセージ表示に使う( ゲーム等で使う為 )

やはり、offsetXやoffsetYに負の値を使うと、tipSize が無効になるので、offsetXとoffsetYは、0 のままで、対象物を動かすようにしました。
<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 message_balloon(str) {
	$("#target_base").showBalloon({
		contents: str+"<br /><br /><input type='button' value='閉じる' onclick='b_2()'/>",
		position: "right",
		offsetX: 0,
		offsetY: 0,
		tipSize: 20,
		css: {
			border: "solid 5px #000",
			color: "#000",
			fontWeight: "bold",
			fontSize: "20px",
			background: "url(https://lh5.googleusercontent.com/-vTfpmoECckg/T0odv9K_VbI/AAAAAAAAE4w/Mv9xb2tGomo/s200/_img.png) no-repeat",
			width: "160px",
			height: "120px",
			borderRadius: "20px",
			opacity: "1",
			padding: "10px 20px 10px 20px"
		}
	});
}
function b_2( ) {
	try{$("#target_base").hideBalloon();}catch(e){}
}
</script>
<input type="button" value="show1" onclick='message_balloon("こんにちは")'/>
<input type="button" value="show2" onclick='message_balloon("さようなら")'/>
<input type="button" value="hide" onclick='b_2()'/>
<div style='position:relative;height:200px;'>
<div id="target_base" style='position:absolute;width:20px;height:20px;top:100px;left:150px;background-color:#ccc;'></div>
</div>




関連する記事



タグ:jquery javascript
【jQueryの最新記事】
posted by at 2015-07-17 18:20 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX