oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merging new yui

Browse source
This commit is contained in:
JT Smith 2008-03-15 17:21:21 +00:00
parent 214a9673f9
commit 728eccc3cb
1638 changed files with 815363 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

82
www/extras/yui/examples/layout/grids_layout_source.html Normal file
View file

@ -0,0 +1,82 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Using a Layout with Grids CSS</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
#hd, .yui-layout-unit-top {
background-color: blue;
color: white;
}
#bd, .yui-layout-unit-center {
background-color: #f2f2f2;
}
#ft, .yui-layout-unit-bottom {
background-color: red;
color: #fff;
}
#nav, .yui-layout-unit-left {
background-color: #808080;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="../../build/layout/assets/layout-core.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/selector/selector-beta-min.js"></script>
<script type="text/javascript" src="../../build/layout/layout-beta-min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="doc1" class="yui-t1">
<div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-u first">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat. </div>
<div class="yui-u">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat. </div>
</div>
</div>
</div>
<div id="nav" class="yui-b">Navigation Pane</div>
</div>
<div id="ft">Footer is here.</div>
</div>
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout('doc1', {
height: Dom.getClientHeight(), //Height of the viewport
width: Dom.get('doc1').clientWidth, //Width of the outer element
units: [
{ position: 'top', height: 45, body: 'hd' },
{ position: 'left', width: 160, body: 'nav', grids: true },
{ position: 'bottom', height: 25, id: 'ft' },
{ position: 'center', body: 'bd', grids: true }
]
});
layout.on('beforeResize', function() {
Dom.setStyle('doc1', 'height', Dom.getClientHeight() + 'px');
});
layout.render();
});
})();
</script>
</body>
</html>