jQueryを使った擬似フレーム（高機能版） | HOME ＞ 2011年の記事

以前から作成していた擬似フレームページ (frame-like pages, Cssframe)を、フレームを使わずに、スタイルシート (CSS)とJavaScriptライブラリであるjQueryを使用して実現する方法の紹介します。

今回は、その機能追加版です。
jQueryを使った基本的な擬似フレームで基本的な解説をしています。まずはそちらからご覧ください。

今回正式に追加した機能は以下の通りです。

左側にあるメニューのサイズ（横幅）を変更できる機能を追加しました（メニューのリサイズ）。
"jQuery UI resizable"を使用しています。
擬似フレームを無効化、有効化をする機能を追加しました。
擬似フレーム有効時は印刷した際に表示が不正となるので、印刷専用画面へのリンクを出力する機能を追加しました。

以下にファイルと、簡単な解説を添えます。
詳しくはスクリプトファイルのコメントを参照してください。

ダウンロード
メニューのリサイズについて
擬似フレームの切り替えについて
印刷専用画面について

# ダウンロード

_^_

# メニューのリサイズについて

マウスオーバー時、メニュー部分の右側（縦スクロールバーが表示される場合は、その左側）にドラッグできる領域が追加されます。

$(CSF.resizerId).resizable({
	handles: "e",
	autoHide: true,
	alsoResize : CSF.menuId,
	resize: function(){//Content in the resize operation
		//get the inside dimension of the browser
		CSF.browserWidth = $('body').outerWidth(true);
		CSF.browserHeight = $('body').outerHeight(true);
		//get the "menu" width when this function is called because it can be resized.
		CSF.menuWidth = $(CSF.menuId).outerWidth(true);
		//change the width of "main" element, and its left position.
		$(CSF.mainId).width(CSF.browserWidth-CSF.menuWidth).css("left",CSF.menuWidth);
	}
});

_^_

# 擬似フレームの切り替えについて

擬似フレームの有効・無効を切り替える機能を追加しました。
指定のIDに有効・無効のクリックイベントを追加します。

ただし、インターネットエクスプローラー(IE)は不正な動きとなるため、動的な切り替えではなく、画面の再読込とクッキーを組み合わせた方法を採っています。
詳しくは、スクリプトファイルとそこに記述したコメントを参照ください。

"CSF.csfRemoverId"で設定したIDをもつ要素に無効化イベント、"CSF.csfStarterId"で設定したIDをもつ要素に有効化イベントが設定されます。

$(CSF.csfRemoverId).click(function(){
	if($(CSF.targetRisizeBar).size() > 0){
		//IE6-8 behaves improperly so in IE this function sets required values to the cookie and figures a screen again.
		var exp = new Date();
		exp.setMonth(exp.getMonth() + 2);
		CSF.setCookie('csf', '0', exp, undefined, undefined);
		if(jQuery.support.opacity){ 
			$(CSF.resizerId).resizable('destroy').removeAttr('style');
			$(CSF.headerId).removeAttr('style');
			$(CSF.mainId).removeAttr('style');
			$(CSF.footerId).removeAttr('style');
			$(CSF.menuId).removeAttr('style');
			$(CSF.targetRisizeBar).remove();
			$('body').removeAttr('style');
			$('html').removeAttr('style');
			if (typeof removeFunc == 'function'){
				removeFunc();
			}
			$(this).unbind();
		} else {
			location.reload();
		}
	}
});

$(CSF.csfStarterId).click(function(){
	if($(CSF.targetRisizeBar).size() < 1){
		var exp = new Date();
		exp.setMonth(exp.getMonth() + 2);
		CSF.setCookie('csf', '1', exp, undefined, undefined);
		CSF.main(restartFunc,removeFunc);
		if (typeof restartFunc == 'function'){
			restartFunc();
		}
	}
});

_^_

# 印刷専用画面について

擬似フレームをそのまま印刷しようとすると、画面表示が崩れます。
印刷用画面を出力する（というよりも、一時的に擬似フレームを無効化した画面を出力する、ですが…）リンクを自動生成します。

"CSF.csfPrintCls"で設定したクラスを持つ要素に出力されます。
例えば、"<span class="cframe-print">Print Page</span>"などです。

if ($(CSF.csfPrintCls).size() > 0){
	var printString = $(CSF.csfPrintCls).html();
	if(!(printString)){
		printString = 'Print Page';
	}
	if (location.search){
		$(CSF.csfPrintCls).html( '<a href="' + location.pathname + location.search + '&cflame=print" target="_blank">' + printString + '</a>' );
	}else{
		$(CSF.csfPrintCls).html( '<a href="' + location.pathname + '?cflame=print" target="_blank">' + printString + '</a>' );
	}
}

実際に動作している例としては、擬似フレームサンプル（http://labo.ek-pro.com/exp/2011-05-01/csf-rich/）を参照してください。

_^_

# Related Page(s)

タグ：JavaScript

HOME ＞ 2011年の記事＞ jQueryを使った擬似フレーム（高機能版）