【问题标题】：Resizable panels in AlloyUIAlloyUI 中可调整大小的面板
【发布时间】：2014-11-12 01:07:49
【问题描述】：

我正在学习AlloyUI，但不知道如何在主布局中设置可调整大小的面板。我尝试了this 方法来调整表格大小，但它不起作用，我在控制台中没有看到任何错误。任何人都可以帮助如何在 AlloyUI 中调整 div 元素的大小吗？

这是我的基本布局，其中 3 个使用 jQuery UI 可调整大小的主面板：

http://jsfiddle.net/vLeve252/

这是我的代码，我尝试在面板中调整表格的大小：

main.html

    <!-- main css -->
    <link rel="stylesheet" type="text/css" href="resources/styles/main.css" media="all" /> 

    <script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
    <link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"/>

</head>

<body>

<div id="layout">

    <div id="filter">

    <table id="tabl" style="width:100%">
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr>
    </table>        

    </div>

    <div id="graph"></div>
    <div id="details"></div>

</div> 

<script>
    YUI().use(
  'resize',
  'overlay',
  function (Y) {
    var overlay = new Y.Overlay({
      width: "200px",
      srcNode: "#tabl",
      visible: false,
      align: {node:".example", points:["tc", "bc"]}
   });
   overlay.plug(Y.Plugin.Resize);
  }
);

    </script>

</body>

main.css

#filter{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20%;
    height: 100%;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    border-right:  solid 1px #aaa;
}

#details {
    position: absolute;
    left: 20%;
    bottom: 0;
    height: 20%;
    width: 100%;
    border-top:  solid 1px #aaa;
}

编辑

我想达到与here 相同的结果，但使用 AlloyUI 而不是 jQuery UI

【问题讨论】：

标签： javascript css layout panel alloy-ui

【解决方案1】：

要使divs（或任何类型的Node）可调整大小，您需要将plug() Plugin.Resize 类添加到您的Node 中。

不必使用Overlay。相反，您可以使用YUI.one() 将divs 设为Node。然后你可以在Resize插件中plug()。执行此操作的 javascript 如下所示：

YUI().use('resize-plugin', 'node', function (Y) {
   Y.one('#filter').plug(Y.Plugin.Resize);
   Y.one('#graph').plug(Y.Plugin.Resize);
   Y.one('#details').plug(Y.Plugin.Resize);
});

编辑：

但是，要制作类似于您在此jsFiddle 中发布的 jQuery 的布局有点难度。我的第一个建议是使用 jQuery。 jQuery 解决方案似乎很简单且经过深思熟虑，it can coexist with YUI/AlloyUI on the same page，因此使用 jQuery 进行布局，使用 YUI/AlloyUI 进行任何其他操作。

如果你绝对不能使用 jQuery，你可以这样做：

HTML

<div id="layout">
    <div id="graph"></div>
    <div id="details"></div>
</div>

CSS

#layout {
    position: absolute;
    right: 0;
    height: 300px;
    width: 300px;
}

#graph {
    position: absolute;
    height: 200px;
    width: 100%;
    background: orange;
}

#details {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: navy;
}

javascript

YUI().use('resize-constrain', 'resize-plugin', 'node', function (Y) {

    var graphNode = Y.one('#graph');
    var detailsNode = Y.one('#details');

    graphNode.plug(Y.Plugin.Resize, {
        handles: ['b']
    });

    graphNode.resize.plug(Y.Plugin.ResizeConstrained, {
        constrain: '#layout'
    });

    graphNode.resize.on('resize:resize', function (event) {
        var graphHeight = parseInt(graphNode.getStyle('height'), 10);
        detailsNode.setStyle('height', (300 - graphHeight) + 'px');
    });
});

解释：

将一个Node 插入一个Resize 插件，以使其可调整大小。
使用ResizeConstrianed 插件插入Resize 插件，以便仅允许在外部div 的宽度内调整大小。
关于resize:resize 事件：
- 获取graph div 的高度为Integer。
- 从总高度中减去它以确定detailsdiv的新高度。
- 将details div 设置为新高度。

为了完整起见，我包含了一个可运行的示例，它具有 3 面板可调整大小的布局，非常类似于 jQuery 示例：

YUI().use('resize-constrain', 'resize-plugin', 'node', function (Y) {

    var graphNode = Y.one('#graph');
    var detailsNode = Y.one('#details');

    graphNode.plug(Y.Plugin.Resize, {
        handles: ['b']
    });

    graphNode.resize.plug(Y.Plugin.ResizeConstrained, {
        constrain: '#rightPanel'
    });

    graphNode.resize.on('resize:resize', function (event) {
        var graphHeight = parseInt(graphNode.getStyle('height'), 10);
        detailsNode.setStyle('height', (300 - graphHeight) + 'px');
    });

    var filterNode = Y.one('#filter');
    var rightPanelNode = Y.one('#rightPanel');

    filterNode.plug(Y.Plugin.Resize, {
        handles: ['r']
    });

    filterNode.resize.plug(Y.Plugin.ResizeConstrained, {
        constrain: '#mainLayout'
    });

    filterNode.resize.on('resize:resize', function (event) {
        var filterWidth = parseInt(filterNode.getStyle('width'), 10);
        var rightPanelResizedWidth = (600 - filterWidth) + 'px';
        rightPanelNode.setStyle('width', rightPanelResizedWidth);
        // YUI sets the height using the `style` attribute, so it must be overwritten using `setStyle()` becuase the CSS has been overriden.
        graphNode.setStyle('width', rightPanelResizedWidth);
    });
});

#mainLayout {
    position: absolute;
    height: 300px;
    width: 600px;
}

#rightPanel {
    position: absolute;
    right: 0;
    height: 300px;
    width: 300px;
}

#graph {
    position: absolute;
    height: 200px;
    width: 100%;
    background: orange;
}

#details {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: navy;
}

#filter {
    position: absolute;
    left: 0;
    height: 100%;
    width: 300px;
    background: darkcyan;
}

<script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>
<div id="mainLayout">
    <div id="rightPanel">
        <div id="graph"></div>
        <div id="details"></div>
    </div>
    <div id="filter"></div>
</div>

【讨论】：