上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

かなり前に作成していた擬似フレームですが、この度、大いにやる気が出たので作成しなおしてみることにします。

前回は特にJavaScriptのライブラリを使わず実装しましたが、今回はjQueryを使用してみたいと思います。
以下の3点を実現することを目標とした擬似フレームを作成します
  • jQueryを使うことでコードを簡単にする。
  • ヘッダー、フッター、メニューが指定可能。
  • JavaScriptのみで制御しているため、実装が簡単(別途のCSSファイル不要)。


1.どうすれば擬似フレームとなるか

擬似フレームそのものはJavaScriptを使えば特に難しいことはなく、body要素の箱にヘッダーなどのdiv要素を適切なサイズにして置いていくだけです。
その際、positionはabsoluteで各divを絶対座標で配置します。また、メニュー(menu)と本文(main)はスクロール可能(overflow:atuo)にし、その他はスクロール不可(overflow:hidden)にします。


2.各部のサイズと配置を決める

図で各部の配置と、サイズを示すと以下の通りです。
top、leftはposition:absoluteでの各divの絶対座標です。また、「0」は「オー」ではなく、「ゼロ」です。
cssframe_design_drawing.png

設計書ができましたので、この図の通り位置・サイズを設定していきます。
まずは基準となる値を決定します。
x と y はbody要素の外寸ですので、これはいずれも100%です。
その他の l, m, n の値を適当に決めます。今回は以下の通りとします。
l = 156px
m = 30px
n = 70px


3.HTMLを作成する

値が決まったところで、ベースとなるHTML文章を作成します。
といっても、ヘッダー、フッター等、載せるべきものは決まっているので、特に迷うこともありません。せっかくなので、HTML5にします(HTML5独自の機能は使いませんが)。

ついでに、「擬似フレームはちょっと…」というユーザの方向けに、自由に擬似フレーム設定を外したり、再設定できる機能もつけておきます。
ということで、HTMLは以下の通りです。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>擬似フレーム</title>
<link rel="stylesheet" href="./csf.css">
<script language="JavaScript" type="text/javascript" src="./jquery-1.5.min.js"></script>
<script language="JavaScript" type="text/javascript" src="./cssframe.js"></script>
</head>
<body id="body">
<div id="header_wrapper">
<div id="header">
<span>Header</span>
</div>
</div>
<div id="main_wrapper">
<div id="main">
<span>Main</span>
<br><br>
<span id="csf-remove"><a href="#">擬似フレームを無効化</a></span>
<br><br>
<span id="csf-start"><a href="#">擬似フレームを起動</a></span>
</div>
</div>
<div id="menu_wrapper">
<div id="menu">
<span>Menu</span>
</div>
</div>
<div id="footer_wrapper">
<div id="copyright">
<span>Footer</span>
</div>
</div>
</body>
</html>



4.スクリプト(JavaScript)を作成する

それでは、各部分をフレームに見えるよう、サイズと場所をJavaScriptで決めていきます。
先述のとおり、jQueryを使って作成します。

まず、各オブジェクトを入れる箱を作ります。
グローバル変数を無駄に作らないための方法ですね。
var CSF = {};


ヘッダーやフッターなどのIDを変数に入れておきます。
上記HTMLのID値が気に入らなくて変更した場合は、この値も変更してください。
//header
CSF.headerId = '#header_wrapper';
//main
CSF.mainId = '#main_wrapper';
//footer
CSF.footerId = '#footer_wrapper';
//menu
CSF.menuId = '#menu_wrapper';
//擬似フレームの削除を起動させるID
CSF.csfRemoverId = '#csf-remove';
//擬似フレームの削除後、再起動させるID
CSF.csfStarterId = '#csf-start';


ヘッダーの高さなどの、各サイズを指定します。
上記 l, m, n の値です。
CSF.headerHeight = 70;
CSF.menuWidth = 156;
CSF.footerHeight = 30;


ヘッダーなどのスタイルを設定します。
後から見て分かりやすいように、ハッシュ形式にしています。また、jQueryの.css()関数がハッシュ形式に対応している、ということもあります。
/* html element css */
CSF.htmlElementCss = {
'overflow' : 'hidden',
'margin' : '0px',
'border' : '0px',
'padding' : '0px',
'width' : '100%',
'height' : '100%'
};

/* body element css */
CSF.bodyElementCss = {
'display' : 'block',
'margin' : '0px',
'border' : '0px',
'padding' : '0px',
'width' : '100%',
'height' : '100%'
};

/* header */
CSF.headerCss = {
'position' : 'absolute',
'top' : '0',
'left' : '0',
'margin' : '0px',
'border' : '0px',
'padding' : '0px',
'width' : '100%',
'height' : CSF.headerHeight
}

/* main */
CSF.mainCss = {
'overflow' : 'auto',
'position' : 'absolute',
'top' : CSF.headerHeight,/*same as header height*/
'left' : CSF.menuWidth,/*same as menu width*/
'bottom' : '0px',
'margin' : '0px',
'border' : '0px',
'padding' : '0px'
}

/* footer */
CSF.footerCss = {
'overflow' : 'hidden',
'position' : 'absolute',
'left' : '0px',
'margin' : '0px',
'border' : '0px',
'padding' : '0px',
'width' : '100%',
'height' : CSF.footerHeight
}

/* menu */
CSF.menuCss = {
'overflow' : 'auto',
'position' : 'absolute',
'left' : '0px',
'top' : CSF.headerHeight,/*same as header height*/
'bottom' : '0px',
'margin' : '0px',
'border' : '0px',
'padding' : '0px',
'width' : CSF.menuWidth
}


以上で値の設定は終わったので、いよいよ実際の処理を行う関数を記述します。
といっても、特に難しいことはしていないので、コードに書いたコメントを読んでもらえれば十分わかるかと思います。
1点、ポイントとしては、ブラウザがリサイズした時も各部分の大きさが変わるので、リサイズイベントにも各部分のサイズ・位置を再設定する関数を割り当てています。
CSF.main = function(){
//各要素のスタイルを反映させます
$('html').css(CSF.htmlElementCss);
$('body').css(CSF.bodyElementCss);
$(CSF.headerId).css(CSF.headerCss);
$(CSF.mainId).css(CSF.mainCss);
$(CSF.footerId).css(CSF.footerCss);
$(CSF.menuId).css(CSF.menuCss);

//サイズをあわせる
_setSeveralElementSize();

//リサイズ時にも各要素のサイズを適切なものに変更する。
$(window).resize(function(){
_setSeveralElementSize();
});

//擬似フレームを無効化するイベント
//※注意:
//style属性を一括で削除するため、擬似フレーム以外でstyle属性に追加していた値も削除されます。
$(CSF.csfRemoverId).click(function(){
$('html').removeAttr('style');
$('body').removeAttr('style');
$(CSF.headerId).removeAttr('style');
$(CSF.mainId).removeAttr('style');
$(CSF.footerId).removeAttr('style');
$(CSF.menuId).removeAttr('style');
$(this).unbind();
});

//擬似フレームを有効化するイベント
//複数実行してもリサイズ相当と動作に問題はありません
$(CSF.csfStarterId).click(function(){
CSF.main();
});

/* 内寸を元に各部分のサイズを決める内部関数 */
function _setSeveralElementSize(){
//ブラウザの内寸を取得
CSF.browserWidth = $('body').outerWidth(true);
CSF.browserHeight = $('body').outerHeight(true);

//メニューはリサイズ可能なので、呼び出されたときのサイズを取得
CSF.menuWidth = $(CSF.menuId).outerWidth(true);

//以下、値を設定
//ヘッダーのサイズ
$(CSF.headerId).width(CSF.browserWidth);

//メニューのサイズ
$(CSF.menuId).height(CSF.browserHeight-CSF.headerHeight-CSF.footerHeight);

//メイン部分のサイズ、位置
$(CSF.mainId).width(CSF.browserWidth-CSF.menuWidth).height(CSF.browserHeight-CSF.headerHeight-CSF.footerHeight).css('left',CSF.menuWidth);

//フッターの位置
$(CSF.footerId).css('top', CSF.browserHeight-CSF.footerHeight);
};
};


設定内容としては以上です。
あとは、$(function(){}の中でCSF.main();すれば動作します。

実際に動作している例としては、ek-laboベーシック擬似フレームサンプル(http://labo.ek-pro.com/exp/2011-02-25/csf-basic/)を参照してください。
Related Posts

Thoughts on スポンサーサイトjQueryで擬似フレーム

Leave a Reply

* less than 16 characters
* less than 24 characters
* less than 16 characters
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。