有没有用过yui的resize功能的？

这是一个仿照yui的resize的例子，在panel里用一个layout能不能实现4个部分的其中一个的resize?

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.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" />
<style type="text/css">
.yui-panel-container {
    visibility:hidden;
    position:absolute;
    z-index: 2;
}</style><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-min.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/container/container.js"></script>
<script type="text/javascript" src="../../build/resize/resize-min.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/layout/layout.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() {
        var panel = new YAHOO.widget.Panel('demo', {
            draggable: false,
            close: false,
           // autofillheight: "bottom", // default value, specified here to highlight its use in the example
            underlay: 'none',
            width: '500px',
            height: '300px',
            xy: [100, 100]
        });
        panel.setBody('<div id="layout"></div>');
        panel.renderEvent.subscribe(function() {
            Event.onAvailable('layout', function() {
                layout = new YAHOO.widget.Layout('layout', {
                    height: (panel.body.offsetHeight - 20),
                    width: 480,
                    units: [
                        { position: 'top', height: 25, body: 'Top', gutter: '2', resize: true },
                        { position: 'center', body: 'Center Unit',  gutter: '2',  height:'100' },
                        { position: 'bottom', body: 'Footer', height:'50', gutter: '2', resize: true}
                    ]
                });                layout.render();
            });
        });
        panel.render();

    });
})();</script>
</body>
</html>