[JS]表示サイズに合わせてレイアウトやフォントのサイズ・ポジションを変更するスクリプト -jFL

表示サイズに合わせて、divのサイズ、fontのサイズ、divのポジションなどを変更するjQueryのプラグインを紹介します。

jFL - Fluid Adaptive Layout

[ad#ad-2]

jFLのデモ

3つのデモがあります。

3カラムレイアウトのデモ

左(20%)、中央(60%)、右(20%）の3カラムで、全体の最小幅は500pxです。
中央に配置された画像は中央のカラムの40%で最小幅100px、フォントは600px～1600pxに対して0.65em～1.25emに変更されます。

デモ1：幅1200pxで表示

デモ1：幅800pxで表示

デモ1：幅600pxで表示

divの仕様を見るシンプルなデモ

2カラムのレイアウトで、右カラムには中央にdiv要素が配置されています。サイズが変更されても常に中央に配置されます。

デモ2：幅1200pxで表示

デモ2：幅800pxで表示

divを中央に配置したデモ

div要素を表示エリアの中央に配置したものです。

デモ3：幅1200pxで表示

デモ3：幅800pxで表示

[ad#ad-2]

jFLの実装

現在、開発者バージョンが公開されており、それを参考に実装方法を紹介します。

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jFL.min.js"></script>

HTML

3カラムのデモのHTMLです。
※シンプルにしています。

<div id="container">
	<div id="left"><p>カラム：左</p></div>
	<div id="center">
		<img src="gnu.png" id="the_img" style="float:left">
		<p>カラム：中央</p>
	</div>
	<div id="right"><p>カラム：右</p></div>
	<div style="clear:both"></div>
</div>

JavaScript：カラムの設定

カラムはカラムの幅指定(%)と最小幅の値を設定します。

$('#container').layout('width',{"percent":100,"min":500,"adjust":0});
$('#left').layout('width',{"percent":20,"min":100});
$('#center').layout('width',{"percent":60,"min":300});
$('#right').layout('width',{"percent":20,"min":100});

JavaScript：フォントの設定

ここではp要素に、サイズの最小から最大までそれぞれを設定します。

$('p').layout('newresize',{"property":"font-size","min":0.65,"min_at":600,"max":1.25,"max_at":1600, "udm":"em"});

JavaScript：画像の設定

画像もカラムと同様に幅指定(%)と最小幅の値を設定します。

$('#the_img').layout('width',{"percent":40,"relativeTo":"#center","min":100});