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

TOP / jQuery

2014年08月03日

CSS transition : jQuery の addClass と removeClass で変化を付ければいい。いや、これが一番よさそうだ。

『CSS transition : 1) 最初の状態、2) マウスカーソルが上に乗った時の状態、3) 変化の定義』では、スクリプトを使わずにマウスが画像の上に乗った時、と言うイベントを CSS で表現していましたが、要するに transition さえ設定されておれば、単純に前の状態から後の状態にアニメーションするというのが仕様なので。

以下のように、jQuery で、変化後の状態を定義したクラスを追加するのが最も直感的かつ解りやすいです。当然 remove しても状態は変化するので(元にもどる)、単純なアニメーションならば、CSS で設定するより、jQuery は明確に解りやすい気がします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#action")
		.attr( { "type": "button" })
		.val( "アニメーション1" )
		.click(function(){
			$("#target").addClass("set_image2");
		});
	$("#action2")
		.attr( { "type": "button" })
		.val( "アニメーション2" )
		.click(function(){
			$("#target").removeClass("set_image2");
		});
});
</script>
<style type="text/css">
/**************************************/
/* 変化前の状態 */
/**************************************/
.set_image {
	width: 526px;
	height: 526px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
	background-color: #000000;
}
/**************************************/
/* 変化後の状態 */
/**************************************/
.set_image2    {  
	width: 300px;
	height: 300px;
	background-position: -90px 0px;
	background-color: #4DBDB5;
	transform: rotate(360deg);
}  
/**************************************/
/* 変化の定義 */
/**************************************/
.box_transition {
	transition: all 1.3s ease-out 0s;
}
</style>
<input id="action"><input id="action2">
<div id="target" class="box_transition set_image"></div>

posted by at 2014-08-03 01:21 | jQuery |

2014年07月05日

jQuery プラグイン : GoogleVisualization : PieChart : ループ処理を使ったテーブルと円グラフの作成

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/gv.js"></script>

<script type="text/javascript">
$(function(){

	$("#pie_chart_area")
	// テーブルオブジェクトを #pie_chart_area 内に作成
	.gvt()
	// 文字列を 0 番目として作成
	.gvt_addColumn('分類')
	// 数値列を 1 番目として作成
	.gvt_addNumColumn('データ');

	// 適当な円グラフ用のデータ
	testData = {
		"因果応報": 12543,
		"慇懃無礼": 326,
		"天真爛漫": 2890,
		"一期一会": 1112,
		"色即是空": 200,
		"満身創痍": 8891,
		"大器晩成": 6333
	};

	for( key in testData ) {
		$("#pie_chart_area")
		// 空の行を作成
		.gvt_addRow()
		// タイトル列の値をセット
		.gvt_setCell(0,key)
		// データ列の値をセット
		.gvt_setNumCell(1,testData[key]);
	}

	// 円グラフを描画
	$("#pie_chart_area").gvt_pie(600,400,'よく検索される四字熟語');

});

</script>
<div id="pie_chart_area"></div>

JS : Google Visualization : 円グラフ(Pie Chart) : 配列データを使ったテーブルと円グラフの作成 

リンク先は JavaSacript でこまめに書いたものですが、以下は jQuery で面倒な部分をプラグイン化して表示しています。


プラグインの gv.js は、Google ドライブにあります。

google.load('visualization', '1', { packages: ['table','piechart'] });

$.fn.extend({
    gvt: function() {
		$(this).data("DataTable", new google.visualization.DataTable());
		return this;
	},
	gvt_addColumn: function(title){
		$(this).data("DataTable").addColumn('string', title);
		return this;
	},
	gvt_addNumColumn: function(title){
		$(this).data("DataTable").addColumn('number', title);
		return this;
	},
	gvt_addRow: function(){
		$(this).data("CurRow", $(this).data("DataTable").addRow() );
		return this;
	},
	gvt_setCell: function(col, data){
		$(this).data("DataTable").setCell($(this).data("CurRow"), col, data+"" );
		return this;
	},
	gvt_setNumCell: function(col, data){
		$(this).data("DataTable").setCell($(this).data("CurRow"), col, data );
		return this;
	},
	gvt_setRowCell: function(row, col, data){
		$(this).data("DataTable").setCell(row, col, data+"" );
		return this;
	},
	gvt_draw: function(width){
		var visualization = new google.visualization.Table($(this)[0]);
		visualization.draw($(this).data("DataTable"), {
			cssClassNames: {
				tableCell: 'myCell',
				headerCell: 'myHeader'
			},
			width: width+"px"
		});
		return this;
	},
	gvt_pie: function(width,height,title){
		var visualization = new google.visualization.PieChart($(this)[0]);
		visualization.draw($(this).data("DataTable"), {
			width: width,
			height: height,
			is3D: true,
			title: title,
			legend: 'right'
		});
		return this;
	}
});

もともとは、テーブル用なので、円グラフ用には最適化はされていません。

posted by at 2014-07-05 21:54 | jQuery |

2014年06月23日

jQuery/JavaScript : 新しく開かれたウインドウのウインドウコントロール

新しいウインドウを開く方法としては、アンカーから開く場合と window.open から開く場合に大きく分かれますが、前者のほうは開かれたほうから親ウインドウを参照可能(window.opener)ですが、親ウインドウから子ウインドウの参照ができないので、子ウインドウ側で、親ウインドウにウインドウを引き渡す必要があります。

※ Window を閉じる場合、IE だけ確認ダイアログが出るのでそれを回避するコードを実装しています

▼ 親ウインドウ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リンクから開いたウインドウのアクセス(親)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ▼ この変数に、開いたウインドウから値をセットします
var childWindow = null;
var userAgent = window.navigator.userAgent.toLowerCase();
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	$("#closeButton")
		.attr("type","button")
		.val("閉じる")
		.click(function(){
			if (userAgent.indexOf("msie") > -1 || userAgent.indexOf("trident/7.0") > -1 ) {
				(childWindow.open("","_self")).close();
			}
			else {
				childWindow.close();
			}
		});

});
</script>

</head>
<body>

<input id="closeButton">
<br><br>

<a href="link2winChild.php?id=childWindow" target="_blank">新しいウインドウを開く</a>

</body>
</html>


▼ 子ウインドウ( php です )

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リンクから開いたウインドウのアクセス(子)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	window.opener.<?= $_GET['id'] ?> = window;

	$("#closeButton")
		.attr("type","button")
		.val("閉じる")
		.click(function(){
			if (window.opener.userAgent.indexOf("msie") > -1 || window.opener.userAgent.indexOf("trident/7.0") > -1 ) {
				(window.open("","_self")).close();
			}
			else {
				window.close();
			}
		});

});
</script>

</head>
<body>

<input id="closeButton">

</body>
</html>


これに対して、window.open の場合は、相互に参照する事ができます。

▼ 親ウインドウ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window.open から開いたウインドウのアクセス(親)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ▼ この変数に、window.open の戻り値をセットします
var childWindow = null;
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	$("#closeButton")
		.attr("type","button")
		.val("閉じる")
		.click(function(){
			childWindow.close();
		});

	$("#openContent")
		.attr("href","#")
		.click(function( event ) {
			// メソッドでウインドウを開く
			// status 以降はブラウザによって違います
			childWindow = window.open(
				"open2winChild.php",
				null,
				"height=400"+
				",width=400"+
				",top=0"+
				",left="+(screen.width-400-20)+
				",status=yes"+
				",toolbar=no"+
				",menubar=no"+
				",location=no"
			);
			event.preventDefault();
		});

});
</script>

</head>
<body>

<input id="closeButton">
<br><br>

<a id="openContent">新しいウインドウを開く</a>

</body>
</html>


▼ 子ウインドウ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window.open から開いたウインドウのアクセス(子)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	$("#closeButton")
		.attr("type","button")
		.val("閉じる")
		.click(function(){
			window.close();
		});

});
</script>

</head>
<body>

<input id="closeButton">

</body>
</html>

また、window.open の拡張形として showModalDialog というメソッドに関していろいろ情報がありますが、結論として WEB ではいろいろ無理があるようです。今後は jQuert UI のメソッドを使うのが一番簡単な代替だと思いますが、ダイアログ内を別ウインドウとして管理したい場合は、IFRAME を使う事になると思います

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery ダイアログ</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {


	$("#dialog1")
		.attr("type","button")
		.val("モーダルダイアログ")
		.click(function(){

			$( "#text-message" ).text("ダイアログ内部のメッセージです");
			$( "#dialog-message" ).dialog({
				modal: true,
				title: "ダイアログのタイトルです",
				close: function() {
					console.log("x ボタンがクリックされました");
				},
				buttons: [
					{ 
						text: "確認",
						click: function() {
							$( this ).dialog( "close" );
							console.log("確認 ボタンがクリックされました");
						}
					},
					{
						text: "キャンセル",
						click: function() {
							$( this ).dialog( "close" );
							console.log("キャンセル ボタンがクリックされました");
						}
					}
				]
			});

		});

	$("#dialog2")
		.attr("type","button")
		.val("モーダルダイアログ(IFRAME 利用)")
		.click(function(){

			$( "#dialog-iframe" ).dialog({
				modal: true,
				title: "ダイアログのタイトルです",
				width: 720,
				close: function() {
					console.log("x ボタンがクリックされました");
				},
				buttons: [
					{ 
						text: "確認",
						click: function() {
							$( this ).dialog( "close" );
							console.log("確認 ボタンがクリックされました");
						}
					},
					{
						text: "キャンセル",
						click: function() {
							$( this ).dialog( "close" );
							console.log("キャンセル ボタンがクリックされました");
						}
					}
				]
			});

		});


});
</script>


</head>
<body>

<input id="dialog1">
<br><br>
<input id="dialog2">


<div id="dialog-message" title="" style='display:none;'>
<p id="text-message" style="font-weight:bold;color:#CB3232;">
</p>
</div>

<div id="dialog-iframe" title="" style='display:none;'>
<iframe
	src="range.php"
	name="iframe_win"
	id="iframe_win"
	frameborder="0"
	scrolling="no"
	width="680"
	height="380"
	style=''
></iframe>
</div>



</body>
</html>

一つ目のダイアログは、単純に DIV を使用したものです。



二つ目は、その DIV の中に IFRAME で別のウインドウの情報を表示しています。

posted by at 2014-06-23 14:34 | jQuery |

2014年06月12日

jQuery のアナログ時計

元々は、CSS3Clock からいただいたものですが、そこで紹介されているコードの効率が悪く、実際には使いづらいものだったので改良しました。( そもそも、IE 対応になっていなかった )

元の画像サイズが大きいので、CSS 部分で定比率で縮小すると小さくして使えるようにしました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<style type="text/css">
#clock {
	position: relative;
	width: 200px;
	height: 200px;
	background-image: url(http://winofsql.jp/image/clockface.jpg);
	background-size:contain;
	list-style: none;
	background-repeat:no-repeat;
	display:none;
}

#sec, #min, #hour {
	position: absolute;
	width: 10px;
	height: 200px;
	top: 0px;
	left: 95px;
	background-size:contain;
}

#sec {
	background-image: url(http://winofsql.jp/image/sechand.png);
	z-index: 3;
}

#min {
	background-image: url(http://winofsql.jp/image/minhand.png);
	z-index: 2;
}

#hour {
	background-image: url(http://winofsql.jp/image/hourhand.png);
	z-index: 1;
}

</style>

<script type="text/javascript">
function set_time() {
	var hours = new Date().getHours();
	var mins = new Date().getMinutes();
	var seconds = new Date().getSeconds();

	var hdegree = hours * 30 + (mins / 2);
	var hrotate = "rotate(" + hdegree + "deg)";
	$("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate, "transform" : hrotate});

	var mdegree = mins * 6;
	var mrotate = "rotate(" + mdegree + "deg)";
	$("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate, "transform" : mrotate});

	var sdegree = seconds * 6;
	var srotate = "rotate(" + sdegree + "deg)";
	$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "transform" : srotate});

}

$(function() {
	set_time();
	$("#clock").show();
	setInterval( function() {set_time();}, 1000 );
}); 
    
</script>

<ul id="clock">	
	<li id="hour"></li>
	<li id="min"></li>
	<li id="sec"></li>
</ul>


関連する記事

jQuery のアナログ時計( 2個 )

posted by at 2014-06-12 03:30 | jQuery |

2014年03月04日

JavaScript(jQuery 自家製プラグイン) によるIFRAMEの動的実装

これ自体はたいした内容ではありませんが、用途や需要は結構あるのでは無いかと思っています。DOM で書くと簡単でも、あらためて jQuery で書くと新鮮だったりします。

<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({ 
	iframe: function(url,w,h){
		this.html("");

		// IFRAME 作成
		var obj = document.createElement("iframe");
		obj.setAttribute("frameBorder", "1");
		obj.setAttribute("scrolling", "no");
		obj.style.position = "relative";
		obj.style.width = w+"px";
		obj.style.height = h+"px";
		obj.src = url
		this.append(obj);
	}  
});

$(function(){
	$("#iframe_base").iframe("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)
});

</script>
<input type="button" value="変更" onclick='$("#iframe_base").iframe("https://lh5.googleusercontent.com/-qU5uL1LvaM8/UtN7Rhtr3RI/AAAAAAAASEY/tglCi9sGuf8/s250/_img.png",250,250)'>
<div id="iframe_base"></div>

で、どうせなのでアニメーションを追加しました

<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({ 
	iframe: function(url,w,h){
		this.html("");

		// IFRAME 作成
		var obj = document.createElement("iframe");
		obj.setAttribute("frameBorder", "1");
		obj.setAttribute("scrolling", "no");
		obj.style.position = "relative";
		obj.style.width = w+"px";
		obj.style.height = h+"px";
		obj.src = url
		this.append(obj);
	},
	iframeChange: function(url,w,h){
		this.animate({ opacity: 0 }, 1500, "swing", function() {
			$(this).iframe(url,w,h);
			$(this).animate({ opacity: 1 },3000);
		});
	}  
});

$(function(){
	$("#iframe_base").iframe("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)
});

</script>
<input type="button" value="変更" onclick='$("#iframe_base").iframeChange("https://lh5.googleusercontent.com/-qU5uL1LvaM8/UtN7Rhtr3RI/AAAAAAAASEY/tglCi9sGuf8/s250/_img.png",250,250)'> <input type="button" value="戻す" onclick='$("#iframe_base").iframeChange("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)'>
<div id="iframe_base"></div>

posted by at 2014-03-04 00:05 | jQuery |

2013年12月23日

WEBで縦書きのコンテンツを作成する( jQuery プラグイン )

tate.js のダウンロード
※ 日本語が utf-8 で書かれています。
※ IE は 10以上でないと文字が回らないです(方法はありますが、実装しても意味なさそうなので )

2008年に作った当時、まだ文字を回転する事が簡単にできなかったので中途半端に終わっていたのですが、久しぶりにコードを書いてみたらあっさり実装できてしまいました。

厳密にはまだ機能アップできるところもあるでしょうが(オプションとか表示方法とか画像使うとか)、とりあえずはコンテンツとして簡単に使えるように jQuery のプラグインとして実装しています。

※ この記事では非表示の PRE 要素の中に元のテキストがあります。

関連する記事

jQuery プラグイン : 日本語を縦書きにする( 縦書きスクリプト )

posted by at 2013-12-23 03:27 | jQuery |

2013年11月15日

jQuery + Zoomooz.js + Jcrop / つまり画像の部分選択してそれを拡大表示する

Jcrop は結構面倒です。使い方が限られているわりに、実装が完成されていないので Jcrop の サンプルコードを使いまわすしか無いような気がします。

※ Google Chrome の場合、拡大しても解像度が低い場合があります。

▼ 大きい画像上をドラッグしてトリミングします( その後小さい画像をクリックして拡大 )



▼ 上の小さなサムネイルをクリックして拡大します。( 拡大した結果 )


関連する記事

使い方が微妙ですが、改造するともっと面白くなるはずの jQuery プラグイン 『Zoomooz.js』

jQuery プラグイン : Zoomooz.js の使いどころ

posted by at 2013-11-15 23:30 | jQuery |

使い方が微妙ですが、改造するともっと面白くなるはずの jQuery プラグイン『Zoomooz.js』

さて、Zoomooz.js です。画像で使うのがインパクトあると思います。

▼ クリックすると・・・



どうも、Shdowbox と相性悪いみたいです。見せ方を別々のライブラリで混合はやめたほうがよさそうです。

一番のメリットは、最大解像度の画像を縮小表示しているものを対象とした場合、拡大時にオリジナル解像度で画像が利用されるところです。ただ、JavaScript の環境は複雑怪奇なので、そのメリットが発動しない場合もあるのが・・・難点です。( 特に、Google Chrome と相性が悪く、IE が一番相性いいです )

Shadowbox の利点は、逆に小さな画像をサムネイルとして使用するので、ページ表示時には大きな画像をロードする必要が無いところです。ですが、当然大きい画像を表示しようとすると、レスポンスは悪く、ほんの少し待つ事になります。

Zoomooz.js は、うまくすれば画像の部分的な拡大でじっくり見れるようにできるかもしれません。ただ、Zoomooz.js だけでその機能はなさそうなので、トリミング等のライブラリを探す必要がありそうです。

<script type="text/javascript">
if ( window[window.location.hostname+'.loadZoomooz'] !== true ) {
	window[window.location.hostname+'.loadZoomooz'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
	document.write("<"+"script src=\"http://winofsql.jp/jquery/plugins/zoomooz/jquery.zoomooz.min.js\"></"+"script>");
}
</script>
<pre>
▼ クリックすると・・・
<img
	id="img"
	class="zoomTarget"
	src="https://lh3.googleusercontent.com/-ulnfI0dn2Sg/UiXUpNDBy3I/AAAAAAAAQE8/XDo4nrrauFc/s1200/Hitomi_Dragon_Rider2.jpg"
	style="border: solid 0px #000000;width:600px;"
	data-targetsize="1.2"
	data-closeclick="true"
>
</pre>

ライブラリのロードは、ブログの記事部分でロードする事を想定しています。これですと、二回以上実行されても最初しかロードされません。

jQuery は、Google のホスティングを使っているのでこのまま利用できますが、jquery.zoomooz.min.js はダウンロードして自サイトへ保存して使っています。サイトをお持ちで無い方は、Google ドライブの WEB ページを使えばいいと思います。

Google ドライブを使って WEB ページを公開する手順
( テストしてみました。https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery.zoomooz.min.js で使えています )

ズーム用の属性

もちろん、JavaScript で対象要素をズームできるようにはできますが、要素に書いたほうが簡単です。
1) class="zoomTarget"
2) data-targetsize="1.2"
3) data-closeclick="true"

1) は、ズーム対象とする場合にセットするクラス名です( zoomTarget は固定です)。

2) は、ズームした時に親要素( デフォルトでは document.body のようです ) の表示領域に対する倍率です。説明では、1.0 までとありますが、はみ出る事を目的とするなら 1.0 より大きくてもかまいません

3) は、zoomTarget をクリックした時に閉じるかどうかです。これをしておかないと画面いっぱいに画像を表示してしまったら閉じる事ができなくなります。( 通常は zoomTarget 以外をクリックすると閉じるようになっています )

この画像は、オリジナルサイズは横幅が 1200px あります。それを width:600px で縮小表示しています。通常は、うまく最大解像度の状態で拡大して表示されるはずですが、Google Chrome で時折うまくいかない時があるようです。

posted by at 2013-11-15 01:18 | jQuery |

2013年11月14日

jQuery で JSONP。なるほど、良くできてる。

jQuery を使って JSONP のテストを行いました。URL 部分に必ず callback=? の形で渡す事が重要で、他のパラメータで構成するのは不可です。( callback 部分の名前は何でもいいです 例: funcname=? )

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$.getJSON("http://localhost/jsonp.php?callback=?",function(data){
	alert(data.jsonp1 + "|" + data.jsonp2);
})
</script>


テストした jsonp.php

<?php
header( "Content-Type: text/javascript; Charset=utf-8" );
?>
<?= $_GET['callback'] ?>({
 "jsonp1": "ようするに",
 "jsonp2": "こういうこと"
})

関連する記事

JSONP の原理と、簡単な利用方法の実際のコード( 実装は jQuery が良いですが、Access-Control-Allow-Origin: * のほうが楽だし読込み先を制限できます )

jQuery : $.get と $.post の内部事情( 正しい引数の与え方 )

posted by at 2013-11-14 01:34 | jQuery |

2013年11月11日

jQuery の単純な HTTP GET request : $.get

input.php は、文字列の HTML を返します。$.ajax より気軽に使えますし、ただ呼び出すだけならば、$.get( "./text/input.php" ); で良い構文です( 戻りデータを無視する呼び出し )

とは言え、$.ajax でも大差は無いと思いますが・・・・。初心者に勧めるなら $.get じゃ無いでしょうか( 書き方パターンは限定されていますし )

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$.get("../text/input.php", { name: "field1" } )
	.done(function(data){
		$("body").append(data);
	});
});
</script>

関連する記事

jQuery : $.get と $.post の内部事情( 正しい引数の与え方 )

posted by at 2013-11-11 23:09 | jQuery |

<< 1 2 3 4 >>

Seesaa ブログ

Seesaa の各ページの表示について

Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>

この記述は、以下の場所で使用します

	写真素材足成
	ぱくたそ
	Image * After
	空フリー写真素材
	WEBデザイナーが作った超シンプル素材集
	無料イラスト/春夏秋冬/イラストわんパグ

	切絵字・モフ字・水面字・三次元切絵字・イバラ字
	武蔵システム無料フォント
	Gray Graphics
	梅フォント
	ホリデイMDJP03（Holiday-MDJP03）
	Fontopo
	たぬきフォント
	Font Foundry iAi-jp
	ALT-DESIGN@clip
	Gutenberg Labo
	:::STUDIO twoG:::
	フォーマット変換

	JavaScript : 文字列で表現された日付を論理チェック
	複数行のグループデータを1行にまとめるSQL
	jQuery プラグイン jquery.balloon.js の外部からのコントロール
	C# の delegate : メソッドの引数にメソッドを渡して使用する方法と、JavaScript の function(){} と同じ使用方法( 匿名 )
	Windows 標準の CDO.Message で(GmailまたはYahoo!メールを使って)簡単にバッチ処理からメールを送る
	VBScript : 3種のMDB(または accdb)内のテーブル一覧取得方法
	jQuery/JavaScript : 新しく開かれたウインドウのウインドウコントロール
	【VBS + Excel】シンプルな詳細設計書のフォーマットをExcelがインストールされている環境で簡単に作成する

	GIMP で星空の作り方
	GIMP で誰でも炎を簡単に作ったり使ったりする方法
	炎の画像から GIMP の炎ブラシを作成する方法
	爆炎画像作成(ブラシ)
	Imageafter の画像を加工してイラスト調背景に ( Landscape Painter )
	GIMP 効果の Landscape Illustrator
	Scripts that work in GIMP-2.8+
	GIMP FX Foundry
	GIMP 2.8にて、ステンドグラスロゴ。