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>
|
|
【プラグイン作成(jQuery)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
