AlloyUI中的可调整大小的面板

debugcn 发表于 Dev

马特

我正在学习AlloyUI，但不知道如何在主布局中设置可调整大小的面板。我尝试了这种方法来调整表的大小，但是它没有用，并且在控制台中没有看到任何错误。有人可以帮助如何在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;
}

编辑

我想获得与此处相同的结果，但使用AlloyUI而不是jQuery UI

stiemannkj1

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

不必使用Overlay。相反，你可以得到divS作为Node使用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);
});

编辑：

但是，要使布局类似于您在此jsFiddle中发布的jQuery，布局有些困难。我的第一个建议是使用jQuery。jQuery解决方案似乎很简单并且经过了深思熟虑，它可以与YUI / AlloyUI共存于同一页面上，因此请使用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以使其可调整大小的插件。
Resize用一个ResizeConstrianed插件插入该插件以便只在外部的宽度范围内调整大小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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。