Yahoo!UI YUI Layout Managerの使い方入れ子にする

YUIライブラリのYUI Layout Manager(レイアウトマネージャ)の使い方。
今回は、Layout Managerの中で入れ子にする例です。

サンプルコード

YAHOO.widget.Layoutでlayoutを作成し、さらにlayoutを作成します。

<html>
	<head>
		<title>yahoo yui layout manager</title>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
<!-- Skin CSS files resize.css must load before layout.css -->
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/resize.css">
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/layout.css">

</head>
<body class="yui-skin-sam"> 

	<div id="top">top</div>
	<div id="right">right</div>
	<div id="buttom">buttom</div>
	<div id="left">left</div>
	<div id="center">center

		<div id="center1">1<div>
		<div id="center2">2<div>
	
	</div>


</body>
<!-- Utility Dependencies -->
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script src="http://yui.yahooapis.com/2.5.2/build/dragdrop/dragdrop-min.js"></script> 
<script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script> 
<!-- Optional Animation Support-->
<script src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script> 
<!-- Optional Resize Support -->
<script src="http://yui.yahooapis.com/2.5.2/build/resize/resize-beta-min.js"></script>
<!-- Source file for the Layout Manager -->
<script src="http://yui.yahooapis.com/2.5.2/build/layout/layout-beta-min.js"></script>
<script>
	YAHOO.util.Event.onDOMReady(function() {
	var layout = new YAHOO.widget.Layout( {
		units: [
		{ position: 'top', body:'top',header:'top',height: 50 },
		{ position: 'right', body:'right',width: 50 },
		{ position: 'bottom', body:'buttom',height: 50 },
		{ position: 'left', body:'left',width: 50 },
		{ position: 'center', body:'center'},
		]
	});
	layout.on('render', function(){
		var el = layout.getUnitByPosition('center').get('wrap');
		var layout2 = new YAHOO.widget.Layout(el, {
			parent: layout,
			units: [
				{ position: 'top', body: 'center1', height: '150px' },
				{ position: 'center', body: 'center2' }
			]
		});
		layout2.render();
	});
	layout.render();
});
</script>
</html>

関連
[2008-07-14-1] Yahoo!UI YUI Layout Managerの使い方とりあえず動かす[yahoo]:

参照しているページ (サイト内): [2008-08-12-2] [2008-08-12-1] [2008-08-09-1] [2008-08-06-1] [2008-07-31-2] [2008-07-25-1] [2008-07-14-1]

いつもシェア、ありがとうございます！

もっと情報を探しませんか？

yahoo

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12