编辑：

Question

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

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

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

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

Answer 1

要使div（或任何类型的Node）可调整大小，您需要将plug()课程Plugin.Resize纳入Node。

没有必要使用Overlay。相反，您可以使用Node将div设为YUI.one()。然后，您可以在plug()插件中Resize。这样做的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);
});

编辑：

但是，要制作类似于jQuery的布局，您在此jsFiddle中发布的布局有点高。我的第一个建议是使用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');
    });
});

Explantion：

使用Node插件插入一个Resize以使其可调整大小。
使用ResizeConstrianed插件插入Resize插件，以便只允许在外部div的宽度范围内调整大小。
在resize:resize事件中：
- 将graph div的高度设为Integer。
- 从总高度中减去它以确定details div的新高度。
- 将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>

AlloyUI中可调整大小的面板

1 个答案:

编辑：

HTML

CSS

的JavaScript

Explantion：