SQLの窓

2015年07月22日


jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )

プラグインとしては、一応 IE8、IE9、Chrome、Firefox、Opera、Safari で動作はしていますが、入力制限でうまく行かない場合があると洒落にならないので、実用としては考えていないコードです。

ただ、プラグインの考え方としては良く解りやすいと思います。対象となる入力フィールドに対して一括で jQuery で入力制限を行った上に、CSS で色とサイズと最大入力数も同時設定しています。

try 〜 catch が入って変な事になっているのは、IE8 に対応する為です。returnValue = false では、特にエラーになる事は無かったのですが(実際ではIEのみ実行にしたほうがよさそうです)、一応念のため。preventDefault は、IE8 以前ではエラーになるはずです。
<!-- 古いIE用に 1.9.1 を使用しています -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="numField" type="text">
<input class="numField" type="text">
<input class="numField" type="text">
<script>

// プラグインの作成( fn.extend )
$.fn.extend({ 
	numField: function(){
		$(this).on('keydown', function(evt) {
			// *********************************
			// 以下入力を受け付けるキーの処理
			// *********************************
			// 数字( 0〜9 )
			if ( 48 <= evt.keyCode && evt.keyCode <= 57 ) {
				return;
			}
			// テンキー( 0〜9 )
			if ( 96 <= evt.keyCode && evt.keyCode <= 105 ) {
				return;
			}
			// 矢印
			if ( 37 <= evt.keyCode && evt.keyCode <= 40 ) {
				return;
			}
			// DEL
			if ( evt.keyCode == 46 ) {
				return;
			}
			// タブ
			if ( evt.keyCode == 9 ) {
				return;
			}
			// バックスペース
			if ( evt.keyCode == 8 ) {
				return;
			}
			// *********************************
			// 以下入力を受け付けないキーの処理
			// *********************************
			// 古い IE 用
			if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
				try{
					evt.returnValue = false;
				}catch(ex){}
			}
			try{
				// イベントがキャンセル可能である場合、
				// 上位ノードへのイベントの 伝播 (propagation) を止めずに、
				// そのイベントをキャンセルします。
				evt.preventDefault();
			}catch(ex){}
		});
		// プラグインの標準仕様として実行後は自分自身を返す
		return this;
	}  
});

// プラグインの実行
$(".numField").numField()
	.css({
		"background-color":"pink",
		"width":"70px"
	})
	.attr("maxlength",6);

</script>



タグ:javascript jquery
posted by lightbox at 2015-07-22 13:22 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2014年11月21日


INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン

INPUT type="number" の振る舞いをブラウザ間で調整する でテストした結果を元に、jQuery のプラグインを作成しました。

対応するに値するのは、Chrome と Firefox と IE11(10) だけです

ブラウザは、Google Chrome と Firefox と IE だけです。さらに、Google Chrome のスピンボタンを非表示にする為に、INPUT 要素には id が必須となっています。その場合は、後から表示するような実装はしていません。IE の場合は、スピンボタンが最初から無いので、JQuery UI の spinner を使うようにしています。ただ、IE の入力チェックが type="number" に対して他のブラウザのように動作しないので、type="text" に変更した上で、pattern 属性でチェックさせている為、0〜9 の文字しか入らない実装になっています。

※ IE9 以前で、autoNumber.js を実装するようにしました。

Opera と Safari for Windows をテストしました

どちらも問題あるので、結局 IE9 以前と同じ対応になっています。
( Safari for Windows は Apple で長い間バージョンアップされていません )


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/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">
$.fn.extend({ 
	type_number: function(option){

		// オプションが省略された場合の対応
		option = option || {};
		// INPUT 要素のみ対象
		if ( $(this).prop("tagName").toUpperCase() != 'INPUT' ) {
			return;
		}

		var userAgent = window.navigator.userAgent.toLowerCase();
		var appVersion = window.navigator.appVersion.toLowerCase();

		if ( userAgent.indexOf("msie") > -1 ) {
			if (appVersion.indexOf("msie 10.0") > -1) {
				// 'on' と 'jquery', で spinner を使う, それ以外はスピンボタン無し
				if ( option.spin == 'on' || option.spin == 'jquery' ) {
					$(this).spinner(option);
					$(this).attr( "type", "text" );
					$(this).attr( "pattern", "^[0-9]+$" );
				}
				else {
					$(this).attr( "type", "text" );
					$(this).attr( "pattern", "^[0-9]+$" );
				}
			}
			else {
				// IE9 以前で autoNumeric で数値以外を入力不可にする
				var el = this;
				var s = document.createElement("script");
				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
				if(s.addEventListener) {
					s.addEventListener("load",callback,false);
				} 
				else if(s.readyState) {
					s.onreadystatechange = callback;
				}
				document.body.appendChild(s);
				function callback() { 
					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
				}
				if ( option.spin == 'on' || option.spin == 'jquery' ) {
					$(this).spinner(option);
				}
			}
		}
		else {
			if ( userAgent.indexOf("trident/7.0") > -1 ) {
				// ※ IE11
				// 'on' と 'jquery', で spinner を使う, それ以外はスピンボタン無し
				if ( option.spin == 'on' || option.spin == 'jquery' ) {
					$(this).spinner(option);
					$(this).attr( "type", "text" );
					$(this).attr( "pattern", "^[0-9]+$" );
				}
				else {
					$(this).attr( "type", "text" );
					$(this).attr( "pattern", "^[0-9]+$" );
				}

			}
			else if (userAgent.indexOf("firefox") > -1) {
				// 標準スピンボタンは 'on', spinner を使う場合は 'jquery', それ以外はスピンボタン無し
				if ( option.spin != 'on' ) {
					// spinner を使う
					if ( option.spin == 'jquery' ) {
						$(this).each(function(){
							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
								$(this).css({ "-moz-appearance": "textfield" });
								$(this).spinner(option);
							}
						});
					}
					else {
						$(this).css({ "-moz-appearance": "textfield" });
					}
				}

			}
			else if (userAgent.indexOf("opera") > -1) {
				// スピンボタンが表示されますが、消す方法が見つからないので
				// IE と同じく jQuery で対応したほうがよさそうです。また、
				// FORM の送信で数字以外の文字のチェックがされないので、
				// 数字のみ入力させるプラグインをさらに実装する必要があります
				// ※ autoNumeric.js は type="text" でのみ有効です
				$(this).attr( "type", "text" );

				var el = this;
				var s = document.createElement("script");
				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
				if(s.addEventListener) {
					s.addEventListener("load",callback,false);
				} 
				else if(s.readyState) {
					s.onreadystatechange = callback;
				}
				document.body.appendChild(s);
				function callback() { 
					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
				}

				if ( option.spin == 'on' || option.spin == 'jquery' ) {
					$(this).spinner(option);
				}
			}
			else if (userAgent.indexOf("chrome") > -1) {
				// 標準スピンボタンは 'on', spinner を使う場合は 'jquery', それ以外はスピンボタン無し
				if ( option.spin != 'on' ) {
					// spinner を使う
					if ( option.spin == 'jquery' ) {
						$(this).each(function(){
							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
								$('head').append('<style>#'+$(this).attr('id')+'::-webkit-outer-spin-button,#'+$(this).attr('id')+'::-webkit-inner-spin-button{-webkit-appearance:none;}</style>');
								$(this).spinner(option);
							}
						});
					}
					// スピンボタンを非表示にする為に、スタイル要素を追加
					// ( id があるという前提と、後から表示に切り替える事は考えていない )
					else {
						$(this).each(function(){
							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
								$('head').append('<style>#'+$(this).attr('id')+'::-webkit-outer-spin-button,#'+$(this).attr('id')+'::-webkit-inner-spin-button{-webkit-appearance:none;}</style>');
							}
						});
					}
				}
			}
			else if (userAgent.indexOf("safari") > -1) {
				// Google Chrome の劣化版でした。そもそも最近に
				// バージョンアップされていない気がします。コード
				// 自体は Google Chrome と同じで見た目は同様の
				// 結果になりますが、FORM の送信で数字以外の文字
				// のチェックがされないので、数字のみ入力させる
				// プラグインをさらに実装する必要がありますが、
				// autoNumeric.js は type="text" でのみ有効なの
				// で、Opera と同じコードになります

				$(this).attr( "type", "text" );

				var el = this;
				var s = document.createElement("script");
				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
				if(s.addEventListener) {
					s.addEventListener("load",callback,false);
				} 
				else if(s.readyState) {
					s.onreadystatechange = callback;
				}
				document.body.appendChild(s);
				function callback() { 
					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
				}

				if ( option.spin == 'on' || option.spin == 'jquery' ) {
					$(this).spinner(option);
				}

			}
			else {
			}
		}

	}
});

$(function(){
	$("#num1").type_number( { spin: "off" } );
	$("#num2").type_number( { spin: "on" } );
	$("#num3").type_number( { spin: "jquery" } );
});

</script>

<style type="text/css">
* {
	font-family: "メイリオ", Meiryo, "MS Pゴシック";
	font-size: 16px;
}

</style>
<form 
	method="get" 
	id="target_form" 
	target="my_ferame" 
	action="http://winofsql.jp/php_get.php" 
	accept-charset="utf-8">
<pre>
<input 
	id="send_check" 
	class="num"
	type="submit" 
	name="send" 
	value="送信">
▼ type="number" でスピンボタンなし
<input
	id="num1"
	class="num"
	type="number" 
	name="num[]">

▼ type="number" でスピンボタンあり
<input 
	id="num2"
	class="num" 
	type="number" 
	id="ie9" name="num[]">

▼ jQuery spinner
<input 
	id="num3"
	class="num" 
	type="number" 
	id="ie9" name="num[]">
</pre>
</form>
<iframe name="my_ferame" frameborder="1" scrolling="yes" width="400" height="200"></iframe>

以下の3種類の実行でそれぞれの表現が変化します。( spinner へのオプションが必要な場合は、追加で設定します。
$(function(){
	$("#num1").type_number( { spin: "off" } );
	$("#num2").type_number( { spin: "on" } );
	$("#num3").type_number( { spin: "jquery" } );
});



posted by lightbox at 2014-11-21 11:33 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2014年03月28日


jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する

ウインドウは、画像がデスクトップの解像度を超える場合の動作は、ブラウザによって違うので、確実に表示できる大きさの画像を指定するのがいいです。いずれにしても、一旦画像をロードしてサイズを取得するので、無駄に大きいものは良くありません。

ウインドウは、計算でデスクトップ中央に表示されます。そのあたりの位置はプラグイン内で変更できます。また、要素に data- で属性として目的の画像をセットするような仕様にするのは簡単ですが、IE の古いブラウザの場合は、コードで対応する必要があります。しかし、現在ではその対応はあまり意味が無いので具体的な記述はしていません。( この記事の最後に、IE 全てに対応し、セレクタで一括指定できるようにしたコードを掲載しました )

IE の場合は、仕様の為か、周りに余白ができます。もうちょっと作りこめば、それもどうにかできますが、画像を表示したいだけなのでこれで十分だと思います。
画像は、Picasa の画像を使用しているので URL が長くなっています。Picasa の画像は、サーバー側でサムネイルを作成できるので、このような場合に便利ですが、長い URL を避けたい場合、Google の URL 短縮を 画像の URL に対して行うといいです。

関連する記事

Picasa のサムネイルの使い方
イメージユニット作成サービス / window.open と Lightbox2 と Shadowbox

<script>
// jQuery ロード部分
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({ 
	setOpenImage: function(url){
		var jq = this;
		var obj = new Image();
		$( obj ).load(function(){
			var __h = this.naturalHeight || this.height;
			var __w = this.naturalWidth || this.width;
			jq.css("cursor", "pointer").click(function(){
				window.open( url,
					"",
					"width="+__w+",height="+__h+",resizable=1,left="+(screen.width-__w)/2+",top="+(screen.height-(__h+100))/2)
			});
		});
		$( obj ).prop( "src", url );
	}
});
</script>

<script>
// ロード後の実装部分
$(function(){
	$("#open_target_1").setOpenImage("https://lh4.googleusercontent.com/-1hrl6J4BkAI/UmfOlBCk8VI/AAAAAAAAQ08/2QbL_BEtAjA/s900/UrbanFuture3_1.jpg");
	$("#open_target_2").setOpenImage("https://lh4.googleusercontent.com/-ivV-h9giVL0/Ul7TtLhF37I/AAAAAAAAQvk/AQJamcu3-mc/s640/ub3_lights.jpg");
});
</script>

<img id="open_target_1" src="https://lh4.googleusercontent.com/-1hrl6J4BkAI/UmfOlBCk8VI/AAAAAAAAQ08/2QbL_BEtAjA/s400/UrbanFuture3_1.jpg">
<img id="open_target_2" src="https://lh4.googleusercontent.com/-ivV-h9giVL0/Ul7TtLhF37I/AAAAAAAAQvk/AQJamcu3-mc/s200/ub3_lights.jpg">

カスタム属性とクラスで一括指定

IE に対する対応は、かなり特殊なので省いてもいいのですが、IE9 と IE10 の時代で outerHTML から属性を取得する処理が必要で、この処理はひょっとすると、他の実装にも役立つかもしれません。

それより何より、HTML の要素に記述する事によって、each 処理で、セレクタによる全ての要素に一括対応ができるようになります。これが一番実質的に意味があるので作成してみました。( 最初のコードでもセレクタによる一括指定はできますが、一つの指定で指定できる画像は一つです )

さらに読みやすくする為に、Google の URL短縮 を実際に使用しています。
<script>
// jQuery ロード部分
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({ 
	setOpenImageAll: function(url){
		this.each(function(idx,elm){

			var jq = $(elm);
			var img_url = url;
			if ( typeof jq[0].dataset !== 'undefined' ) {
				img_url = jq[0].dataset.image;
			}
			if ( typeof jq[0]["data-image"] !== 'undefined' ) {
				img_url = jq[0]["data-image"];
			}
			if ( typeof img_url === 'undefined' ) {
				var wk = jq[0].outerHTML;
				var wk2 = wk.match(/data-image=\"([^"]+)\"/);
				img_url = wk2[1];
			}
			var obj = new Image();
			$( obj ).load(function(){
				var __h = this.naturalHeight || this.height;
				var __w = this.naturalWidth || this.width;
				jq.css("cursor", "pointer").click(function(){
					window.open( img_url,
						"",
						"width="+__w+",height="+__h+",resizable=1,left="+(screen.width-__w)/2+",top="+(screen.height-(__h+100))/2)
				});
			});
			$( obj ).prop( "src", img_url );

		});
	}
});
</script>

<script>
// ロード後の実装部分
$(function(){
	$(".open_image").setOpenImageAll();
});


</script>
<img class="open_image" src="http://goo.gl/kbi8oV" data-image="http://goo.gl/7vItxm">
<img class="open_image" src="http://goo.gl/Dl1Lrv" data-image="http://goo.gl/ZYx6VC">
img_url = jq[0]["data-image"]; は、IE8 以前の対応です。昔の IE は、HTML で書いた属性がそのままプロパティとして実装される仕様でした。ですから、obj.data-image というプロパティが実際に作成されています。しかし、参照する場合、プロパティに -( ハイフン ) は使え無いので、jq[0]["data-image"] という文字列での表現で利用します。

さらに、IE9 と IE10 で、この仕様が無くなったのですが、IE11 でやっと、カスタム属性が利用可能になります。そこで、IE9 と IE10 のみ、outerHTML から文字列を取得して、正規表現で書かれている URL を取得しています。

関連する記事

IE11 から利用可能になったカスタムデータ属性(datasetプロパティ)


タグ:IE jquery dataset
posted by lightbox at 2014-03-28 15:21 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2014年03月18日


jQuery の回転アニメーションでくるくる回る『実行中アイコン』

常にループする必要があるので、それなりに CPU 負荷がかかります。しかし、CSS だけのアニメーションと比べて、JavaScript だから特別負荷がかかるようでは無いようです。開始と停止があれば使えるので、後は対象を何にするかだけです。これだと画像を使ったほうがよさそうな気はします。
(2014/03/18 テスト)

※ グラデーションを使った最初の DIV のほうがやや負荷が大きいようでした。
※ 最初の DIV のグラデーション指定は、IEでは IE10 以上でないとできません(IE9以前だと filter)





<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = 'https//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = 'https//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<style type="text/css">
#target {
	width:20px;
	height:20px;
	border:0px solid #000;
	border-radius: 50px;
	background: linear-gradient(to top, #ffffff, #999999);
	background: -webkit-linear-gradient(top, #fff, #999);
	position: relative;
}
#in_target {
	position: absolute;
	left: 5px;
	top: 5px;
	width:10px;
	height:10px;
	border:0px solid #000;
	border-radius: 10px;
	background-color: #ffffff;
}
#target2 {
	margin-left: 10px;

	border-radius: 50%;	/* 元の形状を丸くする為 */

	font-size: 18px;	/* 位置指定を em でしているので、ここを変更すると半径変更 */
	width: 5px;		/* サイズ変更 */
	height: 5px;

	/* em を使うと、font-size にサイズを連動させる事ができる */
	/* width: .25em; height: .25em; */

	/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
	box-shadow:
		0 -.4em       0 0 rgba(50,50,50,1),
		-.28em -.28em 0 0 rgba(50,50,50,.75),
		-.4em 0       0 0 rgba(50,50,50,.50),
		-.28em .28em  0 0 rgba(50,50,50,.25)
	; 
}
</style>
<div class="loop" id="target"><div id="in_target"></div></div>
<br><br>
<div class="loop" id="target2"></div>
<br><br>

<script>
$.fn.extend({ 
	rotateStop: function(){
		this.data("stop", true);
	},
	rotateAction: function(deg, duration, easing){
		var target = this;
		$({kakudo: 0}).animate(
			{kakudo: deg},
			{
				duration: duration,
				easing: easing,
				step: function(now) {
					target.css({
						transform: 'rotate(' + now + 'deg)'
					});
				},
				done: function() {
					if ( typeof target.data("stop") === 'undefined' || target.data("stop") === false ) {
						setTimeout(function(){target.rotateAction(deg, duration, easing)},0);
					}
					else {
						target.data("stop", false );
					}
				}
			}
		);
	}  
});

</script>

<input type="button" value="DIV回転" onclick='$(".loop").rotateAction(360,1000,"linear");'>
<input type="button" value="回転停止" onclick='$(".loop").rotateStop();'>


関連する記事


posted by lightbox at 2014-03-18 13:15 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2014年03月17日


jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )



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({ 
	miscAnimate: function(deg, duration, easing){
		var target = this;
		$({kakudo: 0, kado: 0, shadow: 0}).animate(
			{kakudo: 360, kado: 30, shadow: 40},
			{
				duration: 3000,
				easing: "swing",
				step: function(now,tween) {
					if ( tween.prop == 'kakudo' ) {
						target.css({
							transform: 'skew(' + now + 'deg) rotate(' + now + 'deg)'
						})
					}
					if ( tween.prop == 'kado' ) {
						target.css({
							borderRadius: now + 'px'
						})
					}
					if ( tween.prop == 'shadow' ) {
						target.css({
							boxShadow: now + 'px '+ now +'px '+ now + 'px '+ now + 'px rgba(0, 0, 0, 0.5)'
						})
					}
				}
			}
		);
	}  
});

</script>

<input type="button" value="開始" onclick='$("#target").miscAnimate();'>
<br><br><br>

<div id="target" style='margin-left:100px;margin-top:100px;width:100px;height:100px;border:1px solid #000;'></div>

step の第二引数の tween は、こういう時に使うものだったのがやっと解りました。ちょっと仕様として不思議なのが、step 内の this は、tween と似たような元々のプロパティの増分がセットされているオブジェクトだったのですが、tween があるのだから、this は 元々のオブジェクトのほうがいいはずです。将来仕様変更あるかもしれませんね。

関連する記事


posted by lightbox at 2014-03-17 17:22 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2014年03月16日


jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替

IFRAME を作成するプラグインです。引数は、URL と幅と高さですが、プラグイン部分に引数を追加すれば容易に変更できます。

iframe メソッド で動的に IFRAME を作成しています。一度作成すれば、中の URL の変更は、iframeChange メソッドで行います。

iframeChange メソッドでは、animation メソッドを使用して、表示の切り替えとしてフェードアウトからフェードインを行っています。

animate の連鎖は、jQuery のドキュメント通りに、jQuery のチェーンで行われます。この際、オプションの queue  がデフォルトで true なので正しく動作しますが、false にしてしまうと動作しないので注意して下さい。

最初のアニメーションの終了後、done イベントで次の URL への変更を行っています。通常の complete イベントでも動作しますが、done イベント内では、アニメーションのプロパティやオプションが参照可能です。

▼ 実装のコード
<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.src = url
		$(obj).attr("frameBorder", "0");
		$(obj).attr("scrolling", "no");
		$(obj).css("position ", "relative");
		$(obj).css("width", w+"px");
		$(obj).css("height", h+"px");
		this.append(obj);
		return this;
	},
	iframeChange: function(url,w,h){
		this.animate({ opacity: 0 },
		{
			duration: 1500, easing: "swing",
			done: function(animation) {
				console.dir(animation.props);
				console.dir(animation.opts);
				$(this).iframe(url,w,h);
			}
		})
		.animate({ opacity: 1 },		{
			duration: 3000, easing: "swing",
			done: function(animation) {
				console.dir(animation.props);
				console.dir(animation.opts);
			}
		});
	}  
});

$(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 lightbox at 2014-03-16 16:05 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



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

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり