レイアウトを形成する

書式

layoutObj = YAHOO.widget.Layout(option)

layoutObj : レイアウトオブジェクト
option : オプション

説明

Layout Manager（レイアウトマネージャー）を使うとフレームタグを使わなくても同等の処理を行うことができます。レイアウトを設定するにはYAHOO.widget.Layout()を使い、生成されたオブジェクトのrender()メソッドを呼び出します。どのようにレイアウト表示するのかは、YAHOO.widget.Layout()のパラメータで指定します。このパラメータは複数のオプションがあります。表示位置を示すpositionにはtop, bottom, left, centerが指定できます。このうちcenterだけは必須となります。幅はwidth, heightで指定します。分割された領域をリサイズ可能にする場合にはresizeでtrueを指定します。表示する内容を示す場合にはbodyを使って内包したいタグのID名を指定します。
Ajaxライブラリ リファレンス

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="assets/skins/sam/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/skins/sam/resize.css" type="text/css" media="all">
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="yui/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/dragdrop.js"></script>
<script type="text/javascript" src="yui/element-beta.js"></script>
<script type="text/javascript" src="yui/animation.js"></script>
<script type="text/javascript" src="yui/resize-beta.js"></script>
<script type="text/javascript" src="yui/layout-beta.js"></script>
<script type="text/javascript"><!--
window.onload = function(){
var layout = new YAHOO.widget.Layout({
units: [
{ position: "left", width:300, body: "content1", resize: true },
{ position: "center", body:"content2", resize : true }
]
});
layout.render();
}
// --></script>
</head>
<body class="yui-skin-sam">
<div id="content1">ここは左の部分です。</div>
<div id="content2">ここは右の部分です。</div>
</body>
</html>