181 lines
6.9 KiB
HTML
181 lines
6.9 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=utf-8">
|
|
<title>Creating 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;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.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" />
|
|
<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
|
|
<script type="text/javascript" src="../../build/container/container.js"></script>
|
|
<script type="text/javascript" src="../../build/resize/resize-beta.js"></script>
|
|
|
|
<style type="text/css">
|
|
#examplecontainer {
|
|
padding:10px;
|
|
}
|
|
|
|
#resizablepanel .bd {
|
|
overflow:auto;
|
|
height:10em;
|
|
background-color:#fff;
|
|
padding:10px;
|
|
}
|
|
|
|
#resizablepanel .ft {
|
|
height:15px;
|
|
padding:0;
|
|
}
|
|
|
|
#resizablepanel .yui-resize-handle-br {
|
|
right:0;
|
|
bottom:0;
|
|
height: 8px;
|
|
width: 8px;
|
|
position:absolute;
|
|
}
|
|
|
|
/*
|
|
The following CSS is added to prevent scrollbar bleedthrough on
|
|
Gecko browsers (e.g. Firefox) on MacOS.
|
|
*/
|
|
|
|
/*
|
|
PLEASE NOTE: It is necessary to toggle the "overflow" property
|
|
of the body element between "hidden" and "auto" in order to
|
|
prevent the scrollbars from remaining visible after the the
|
|
Resizable Panel is hidden. For more information on this issue,
|
|
read the comments in the "container-core.css" file.
|
|
|
|
We use the #reziablepanel_c id based specifier, so that the rule
|
|
is specific enough to over-ride the .bd overflow rule above.
|
|
*/
|
|
|
|
#resizablepanel_c.hide-scrollbars .yui-resize .bd {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#resizablepanel_c.show-scrollbars .yui-resize .bd {
|
|
overflow: auto;
|
|
}
|
|
|
|
/*
|
|
PLEASE NOTE: It is necessary to set the "overflow" property of
|
|
the underlay element to "visible" in order for the
|
|
scrollbars on the body of a Resizable Panel instance to be
|
|
visible. By default the "overflow" property of the underlay
|
|
element is set to "auto" when a Panel is made visible on
|
|
Gecko for Mac OS X to prevent scrollbars from poking through
|
|
it on that browser + platform combintation. For more
|
|
information on this issue, read the comments in the
|
|
"container-core.css" file.
|
|
*/
|
|
|
|
#resizablepanel_c.show-scrollbars .underlay {
|
|
overflow: visible;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
YAHOO.util.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
|
|
|
|
// Create a panel Instance, from the 'resizablepanel' DIV standard module markup
|
|
var panel = new YAHOO.widget.Panel('resizablepanel', {
|
|
draggable: true,
|
|
width: '500px',
|
|
context: ["showbtn", "tl", "bl"]
|
|
});
|
|
panel.render();
|
|
|
|
// Create Resize instance, binding it to the 'resizablepanel' DIV
|
|
var resize = new YAHOO.util.Resize('resizablepanel', {
|
|
handles: ['br'],
|
|
autoRatio: false,
|
|
minWidth: 300,
|
|
minHeight: 100,
|
|
status: true
|
|
});
|
|
|
|
// Setup resize handler to update the size of the Panel's body element
|
|
// whenever the size of the 'resizablepanel' DIV changes
|
|
resize.on('resize', function(args) {
|
|
|
|
var panelHeight = args.height;
|
|
|
|
var headerHeight = this.header.offsetHeight; // Content + Padding + Border
|
|
var footerHeight = this.footer.offsetHeight; // Content + Padding + Border
|
|
|
|
var bodyHeight = (panelHeight - headerHeight - footerHeight);
|
|
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();
|
|
}
|
|
}, panel, true);
|
|
|
|
YAHOO.util.Event.on("showbtn", "click", panel.show, panel, true);
|
|
}
|
|
);
|
|
</script>
|
|
</head>
|
|
<body class=" yui-skin-sam">
|
|
<h1>Creating a Resizable Panel</h1>
|
|
<div class="exampleIntro">
|
|
<p>Operating systems offer windows that can be resized, often by dragging from the lower right-hand corner (and, on Microsoft Windows, from the window edges). This example of the Panel Control implements resizability by leveraging YAHOO.util.Resize to introduce a resize handle to the bottom-right corner of the footer. Resize events are listened for, and the size of the body element is modified to fill out the new dimensions of the Panel.</p>
|
|
</div>
|
|
|
|
<div id="examplecontainer">
|
|
<button id="showbtn">Show Resizable Panel</button>
|
|
<div id="resizablepanel">
|
|
<div class="hd">Resizable Panel</div>
|
|
<div class="bd">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nulla. Fusce mauris massa, rutrum eu, imperdiet ut, placerat at, nunc. Vestibulum consequat ligula ut lacus. Nulla nec pede. Fusce consequat, augue et eleifend ornare, nibh mi dapibus lorem, ut lacinia turpis eros at eros. Proin laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla velit. Fusce id sem sit amet felis porta mollis. Aliquam erat volutpat. Etiam tortor. Donec dui felis, pretium quis, vulputate et, molestie non, nisi.</p>
|
|
</div>
|
|
<div class="ft"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|