jQueryを使った擬似フレーム(高機能版)


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

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

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


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

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

# ダウンロード


_^_

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

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

$(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


HOME2011年の記事jQueryを使った擬似フレーム(高機能版)

HOMEHOME CategoryCategory HistoryHistory

Site Search :

[HTML link code]
[PR]セール品のみ検索もできるAmazon検索