Yahoo!UI YUI Layout Managerの使い方とりあえず動かす

YUIライブラリのYUI Layout Manager(レイアウトマネージャ)の使い方。
一画面にいくつかのコンポーネントを表示し、隠したり、表示したりするのに便利です。

サンプルコード

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


</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.render();
});
</script>
</html>

headerをつけると、ヘッダが追加されます。

{ position: 'top', body:'top',header:'top',height: 50 }

関連
[2008-07-14-2] Yahoo!UI YUI Layout Managerの使い方入れ子にする

参照しているページ (サイト内): [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-2]

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

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

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