129 lines
4.7 KiB
HTML
129 lines
4.7 KiB
HTML
<!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>Layout inside a resizable Panel</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;
|
|
}
|
|
#demo .yui-resize-handle-br {
|
|
height: 11px;
|
|
width: 11px;
|
|
background-position: -20px -60px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
</style>
|
|
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/resize/assets/skins/sam/resize.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/layout/assets/skins/sam/layout.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
|
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
|
|
<script type="text/javascript" src="../../build/event/event-min.js"></script>
|
|
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
|
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
|
|
<script type="text/javascript" src="../../build/container/container-min.js"></script>
|
|
<script type="text/javascript" src="../../build/resize/resize-beta-min.js"></script>
|
|
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
|
<script type="text/javascript" src="../../build/layout/layout-beta-min.js"></script>
|
|
</head>
|
|
<body class=" yui-skin-sam">
|
|
|
|
<div id="demo"></div>
|
|
|
|
<script>
|
|
(function() {
|
|
var Dom = YAHOO.util.Dom,
|
|
Event = YAHOO.util.Event,
|
|
layout = null,
|
|
resize = null;
|
|
|
|
Event.onDOMReady(function() {
|
|
// Setup constants
|
|
|
|
// QUIRKS FLAG, FOR BOX MODEL
|
|
var IE_QUIRKS = (YAHOO.env.ua.ie && document.compatMode == "BackCompat");
|
|
|
|
// UNDERLAY/IFRAME SYNC REQUIRED
|
|
var IE_SYNC = (YAHOO.env.ua.ie == 6 || (YAHOO.env.ua.ie == 7 && IE_QUIRKS));
|
|
|
|
// PADDING USED FOR BODY ELEMENT (Hardcoded for example)
|
|
var PANEL_BODY_PADDING = (10*2) // 10px top/bottom padding applied to Panel body element. The top/bottom border width is 0
|
|
|
|
var panel = new YAHOO.widget.Panel('demo', {
|
|
draggable: true,
|
|
close: false,
|
|
underlay: 'none',
|
|
width: '500px',
|
|
xy: [100, 100]
|
|
});
|
|
panel.setHeader('Test Panel');
|
|
panel.setBody('<div id="layout"></div>');
|
|
panel.beforeRenderEvent.subscribe(function() {
|
|
Event.onAvailable('layout', function() {
|
|
layout = new YAHOO.widget.Layout('layout', {
|
|
height: 400,
|
|
width: 480,
|
|
units: [
|
|
{ position: 'top', height: 25, resize: false, body: 'Top', gutter: '2' },
|
|
{ position: 'left', width: 150, resize: true, body: 'Left', gutter: '0 5 0 2', minWidth: 150, maxWidth: 300 },
|
|
{ position: 'bottom', height: 25, body: 'Bottom', gutter: '2' },
|
|
{ position: 'center', body: 'Center Unit', gutter: '0 2 0 0' }
|
|
]
|
|
});
|
|
|
|
layout.render();
|
|
});
|
|
});
|
|
panel.render();
|
|
resize = new YAHOO.util.Resize('demo', {
|
|
handles: ['br'],
|
|
autoRatio: true,
|
|
status: true,
|
|
minWidth: 380,
|
|
minHeight: 400
|
|
});
|
|
resize.on('resize', function(args) {
|
|
var panelHeight = args.height;
|
|
var headerHeight = this.header.offsetHeight; // Content + Padding + Border
|
|
var bodyHeight = (panelHeight - headerHeight);
|
|
var bodyContentHeight = (IE_QUIRKS) ? bodyHeight : bodyHeight - PANEL_BODY_PADDING;
|
|
|
|
YAHOO.util.Dom.setStyle(this.body, 'height', bodyContentHeight + 'px');
|
|
|
|
if (IE_SYNC) {
|
|
|
|
// Keep the underlay and iframe size in sync.
|
|
|
|
// You could also set the width property, to achieve the
|
|
// same results, if you wanted to keep the panel's internal
|
|
// width property in sync with the DOM width.
|
|
|
|
this.sizeUnderlay();
|
|
|
|
// Syncing the iframe can be expensive. Disable iframe if you
|
|
// don't need it.
|
|
|
|
this.syncIframe();
|
|
}
|
|
|
|
layout.set('height', bodyContentHeight);
|
|
layout.set('width', (args.width - PANEL_BODY_PADDING));
|
|
layout.resize();
|
|
|
|
}, panel, true);
|
|
});
|
|
})();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|