GINPRO / SQLの窓と銀プログラマ

<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.ui ) {
	document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css\">");
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\"></"+"script>");
}
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<style>
.balloon_animate {
	cursor: pointer;
}
</style>
<script>
var contents_text_animate = {
	fade_swing: "fade_swing",
	slide_right_150: "右からスライドしますが、右からの指定は追加オプション指定です。さらに、スライドの開始位置も指定しています",
	pulsate_easeOutElastic: "点滅",
	blind_easeInExpo: "窓のブラインド"
}
var animate_func = {
	fade_swing: function(d) {
		this.show( {
			effect: "fade",
			duration: d,
			easing: "swing" 
		}); 
	},
	slide_right_150: function(d) {
		this.show( {
			effect: "slide", direction: "right", distance: 150,
			duration: d,
			easing: "swing" 
		}); 
	},
	pulsate_easeOutElastic: function(d) {
		this.show( {
			effect: "pulsate",
			duration: d,
			easing: "easeOutElastic" 
		}); 
	},
	blind_easeInExpo: function(d) {
		this.show( {
			effect: "blind",
			duration: d,
			easing: "easeInExpo" 
		}); 
	}
}
$(function() {
	$( ".balloon_animate" ).each( function() {
		$( this ).balloon(
			{
				showDuration: 400,
				showAnimation: animate_func[this.id],
				contents: contents_text_animate[this.id],
				position: "right",
				tipSize: 20,
				offsetY: 0,
				offsetX: 30,
				css: {			
					width: "200px",
					height: "150px",
					opacity: "1",
					color: "#333",
					fontSize: "16px",
					borderRadius: "10px",
					border: "solid 2px #A63814",
					padding: "10px"
				}
			}
		);
	});

});
</script>
<pre>






<span class="balloon_animate" id="fade_swing">▼ マウスカーソルを上に重ねて下さい
● fade_swing</span>



<span class="balloon_animate" id="slide_right_150">▼ 右からスライド
● slide_right_150</span>



<span class="balloon_animate" id="pulsate_easeOutElastic">▼ 点滅
● pulsate_easeOutElastic</span>



<span class="balloon_animate" id="blind_easeInExpo">▼ 窓のブラインドを開けるように
● blind_easeInExpo</span>
</pre>

<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>

title="<b style='cursor:pointer' onclick='alert("OK")'>ここをクリック</b>"

<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>

<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>
<style type="text/css">
.orange_balloon {
	background: url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
	width: 323px;
	height: 278px;
	line-height:290px;
	font-size: 45px;
	font-weight: bold;
	text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
	$('#matanaisun').balloon(
		{
			position: "right",
			tipSize: 20,
			css: {
				opacity: "1",
				color: "#000",
				fontSize: "80px",
				borderRadius: "30px",
				border: "solid 5px #222",
			}
		}
	);
	$('#matanaisun2').balloon(
		{
			tipSize: 0,
			offsetY: -290,
			offsetX: 100,
			classname: "orange_balloon",
			css: null
		}
	);
});
</script>
<pre>
<span id="matanaisun" title="またないすん">
jQuery のキー位置をかな入力すると
</span>
■ <a id="matanaisun2" title="こんな感じ" href="http://urin.github.io/jquery.balloon.js/" target="_blank">画像を使った自由なふきだし(Excelで簡単)作って、背景画像に指定しました</a>
</pre>

<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="後から変更">

<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="後から変更">

<script type="text/javascript">
if ( !parent.jQuery ) {
	(function() {
		var x = parent.document.createElement("script");
		x.setAttribute( "src", "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" );
		parent.document.body.appendChild( x );
	})();
}
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

var class_set = ["wallet_outer","cash_behind","cash_behind_left","cash_behind_cover","cash_front","cash_front_left","cash_front_right","cash_front_cover","leftshade","leftshadecover","rightshade","rightshadecover","cover","cover2","cover3","buckle","buckleshade","buckleshadecover","buckledropshade","clip"];

$(function(){

	for( i=0; i<class_set.length; i++ ) { 
		$("#button"+(i+1))
			.attr("type", "button")
			.val(class_set[i])
			.click(function(){
				$(this).css(
					 {
						"background-color":"#404040",
						"color":"#FFFFFF",
					}				
				);
				$("#"+this.value).addClass(this.value);
			});
	}

});


for( i=0; i<class_set.length; i++ ) { 
	document.write("<input id=\"button"+(i+1)+"\"> \n" );
}


</script>

<!-- wallet -->
<div class="container">
    <div id="wallet_outer">
      <div id="leftshade"></div>
      <div id="leftshadecover"></div>
      <div id="rightshade"></div>
      <div id="rightshadecover"></div>
      <div id="cover"></div>
      <div id="cover2"></div>
      <div id="cover3"></div>
      <div id="cash_behind"></div>
      <div id="cash_behind_left"></div>
      <div id="cash_behind_cover"></div>
      <div id="cash_front"></div>
      <div id="cash_front_left"></div>
      <div id="cash_front_right"></div>
      <div id="cash_front_cover"></div>
      <div id="buckledropshade"></div>
      <div id="buckle">
        <div id="buckleshade"></div>
        <div id="buckleshadecover"></div>    
        <div id="clip"></div>
      </div>
    </div> 
</div>
<style>
.container {
  margin-top:55px;
}

.wallet_outer {
  width:375px;
  height:300px;
  border:8px solid #111;
  border-radius:30px;
  background:#74593D;
}

.cash_behind {
  border:8px solid #111;
  border-radius:40px 40px 0px 0px;
  background:#5D7D51;
  height:88px;
  width:240px;
  position:absolute;
  margin-top:-35px;
  margin-left:58px;
}

.cash_behind_left {
  border-radius:30px 0px 0px 0px;
  background:#739866;
  height:87px;
  width:40px;
  position:absolute;
  margin-top:-26px;
  margin-left:67px;
}

.cash_behind_cover {
  border-radius:30px 0px 0px 0px;
  background:#5D7D51;
  height:87px;
  width:40px;
  position:absolute;
  margin-top:-26px;
  margin-left:75px;
}


.cash_front {
  border:8px solid #111;
  border-radius:40px 40px 0px 0px;
  background:#739866;
  height:61px;
  width:240px;
  position:absolute;
  margin-top:-8px;
  margin-left:90px;
}

.cash_front_left {
  background:#91B185;
  height:61px;
  width:30px;
  position:absolute;
  margin-left:98px;
  border-radius:35px 0px 0px 0px;
}

.cash_front_right {
  background:#5D7D51;
  height:61px;
  width:30px;
  position:absolute;
  margin-left:307px;
  border-radius:0px 35px 0px 0px;
}

.cash_front_cover {
  border-radius:30px 30px 0px 0px;
  background:#739866;
  height:61px;
  width:222px;
  position:absolute;
  margin-left:107px;
}

.leftshade {
  position:absolute;
  height:300px;
  width:30px;
  background:#806346;
  border-radius:26px 0px 0px 26px;
}

.leftshadecover {
  position:absolute;
  margin-left:13px;
  height:300px;
  width:30px;
  background:#74593D;
  border-radius:26px 0px 0px 26px;
}

.rightshade {
  position:absolute;
  height:300px;
  width:44px;
  margin-left:331px;
  background:#695037;
  border-radius:0px 26px 26px 0px;
}

.rightshadecover {
  position:absolute;
  height:240px;
  width:32px;
  margin-left:331px;
  margin-top:60px;
  background:#74593D;
  border-radius:0px 26px 26px 0px;
}

.cover {
  position:absolute;
  margin-top:-7px;
  margin-left:20px;
  height:60px;
  width:30px;
  background:#695037;
  z-index:3;
  border-radius:40px 0px 0px 40px;
  border:8px solid #111;
}

.cover2 {
  position:absolute;
  margin-top:61px;
  margin-left:307px;
  height:60px;
  width:60px;
  background:#74593D;
  z-index:1;
  border-radius:0px 40px 0px 0px;
  border:8px solid #111;
}

.cover3 {
  position:absolute;
  margin-top:69px;
  margin-left:300px;
  height:31px;
  width:30px;
  background:#74593D;
  z-index:4;
}

.buckle {
  margin-top:100px;
  margin-left:220px;
  width:180px;
  height:100px;
  background:#957657;
  border:8px solid #111;
  border-radius:35px 10px 35px 35px;
  position:absolute;
  z-index:3;
}

.buckleshade {
  background:#AE8F71;
  height:100px;
  width:25px;
  position:absolute;
  margin-left:0px;
  border-radius:40px 0px 0px 40px;
    z-index:1;
}

.buckleshadecover {
  background:#957657;
  height:100px;
  width:35px;
  position:absolute;
  margin-left:10px;
  border-radius:20px 0px 0px 20px;
  z-index:1;
}

.buckledropshade {
  background:#695037;
  height:30px;
  width:140px;
  position:absolute;
  margin-left:225px;
  margin-top:195px;
  border-radius:0px 0px 0px 30px;
  z-index:0;
}

.clip {
  z-index:2;
  border:8px solid #111;
  border-radius:55px;
  position:absolute;
  width:55px;
  height:55px;
  margin-left:20px;
  margin-top:14px;
  background: rgba(255,187,0,1);
background: -moz-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,187,0,1)), color-stop(49%, rgba(255,187,0,1)), color-stop(54%, rgba(240,176,0,1)), color-stop(100%, rgba(240,176,0,1)));
background: -webkit-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: -o-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: linear-gradient(135deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbb00', endColorstr='#f0b000', GradientType=1 );
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<style>
body:-ms-fullscreen::-ms-backdrop {
	background-color: #ffffff;
}
</style>
<script type="text/javascript">

$(function(){

	// ボタン
	$("#button_control")
		.attr("type", "button")
		.val("フルスクリーン(Chrome or Firefox IE11)")
		.click(function(){

			if ( document.body.msRequestFullscreen ) {
				document.body.msRequestFullscreen();
			}
			else if (document.body.webkitRequestFullScreen) {
				$("body").css({
					"width": window.screen.width + "px",
					"height": window.screen.height + "px"
				});
				document.body.webkitRequestFullScreen();
			}
			else if (document.body.mozRequestFullScreen) {
				document.body.mozRequestFullScreen();
			}
		});

});

</script>

<input id="button_control"><br>
<img src="https://lh4.googleusercontent.com/-fRZlV-c6OiY/U9Mn1YqLK0I/AAAAAAAAVjk/MvWELOPssrs/s600/b17geoff_vane016.jpg" style="border: solid 0px #000000" />