デモページデモページでは、実装コードを解りやすくする為に、IFRAME 内には大きな画像を表示していますが、本来はヘッド部分で値を入力して送信の結果を IFRAME に表示する問い合わせ系アプリケーションに利用しやすくなっています。 プラグインを実装したテンプレートページ
プラグインのコード https://lightbox.sakura.ne.jp/demo/template/static/pass1iframe/std/lboxiframe.js
$.fn.extend({ lboxiframe: function(option){ var parent = $(this); $("<iframe name=\""+ option.name +"\">").insertAfter($(this)) .attr("src",option.src) .attr("id",option.id) .attr("frameborder", "0") .css("width", "100%" ) ; function control_page_iframe(iframe,parent) { var height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight); var head_height = parent.get(0).clientHeight; // -8 は、IE と Firefox 用。Google Chrome は 0 で正しくフィットするが、 // IE と Firefox では、BODY のスクロールバーが表示されてしまうので調整 iframe.css("height", (height - parseInt(head_height)-8) + "px"); } $(window).on("resize", function(){ $("#" + option.id ).hide(); control_page_iframe( $("#" + option.id ), parent ); $("#" + option.id ).show(); }); control_page_iframe( $("#" + option.id ), parent ); } });
Google Chrome では ブラウザにきっちり収まるのですが、Firefox と IE では、下部に多少の余白が発生します。クロスブラウジングは避けたかったのと、補正値が過去変化したのでこのようになってますが、簡単で一般的なアプリケーションであれば、特に問題は出ないと思います。 呼び出し 対象とした div の下に IFRAME を埋め込みます。
$(function(){ $( "#wrapper" ).lboxiframe({ src : "simple-image.html", id : "my_iframe", name : "my_iframe" }); });
|
【プラグイン:jQueryの最新記事】
- jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する
- jQuery プラグイン : multiselect.js の使用方法とカスタマイズ
- JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする
- jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。
- テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました
- jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。
- jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方
- 使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。