Javascript AlloyUI中可调整大小的面板_Javascript_Css_Layout_Panel_Alloy Ui

Javascript AlloyUI中可调整大小的面板

javascript css layout

Javascript AlloyUI中可调整大小的面板,javascript,css,layout,panel,alloy-ui,Javascript,Css,Layout,Panel,Alloy Ui,我正在学习AlloyUI，但不知道如何在主布局中设置可调整大小的面板。我尝试了这个方法来调整表的大小，但不起作用，在控制台中也并没有看到任何错误。有人能帮助我们如何在AlloyUI中调整div元素的大小吗这是我的基本布局，其中有3个主面板可以使用jQuery UI调整大小：这是我的代码，我尝试在面板中调整表的大小： main.html  <link rel="stylesheet" type="text/css" href

我正在学习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>

编辑

我希望获得与相同的结果，但使用AlloyUI而不是jQuery UI使

div

s（或任何类型的

节点

）可调整大小，需要将类放入

节点中
无需使用覆盖
。相反，您可以在使用时获取div
s。然后您可以在调整大小
插件中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);
});

编辑：
然而，要制作一个类似于您在本文中发布的jQuery的布局有点难度。我的第一个建议是使用jQuery。jQuery解决方案似乎很简单，考虑周全，因此，对于布局使用jQuery，对于任何您想要的东西使用YUI/AlloyUI
如果绝对不能使用jQuery，可以执行以下操作：
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);
});

HTML
javascript
解释：
用调整大小
插件插入一个节点
，使其可调整大小
用一个插件插入调整大小的插件，以便只允许在外部div
的宽度范围内调整大小

在resize:resize
事件中：

获取图形的高度作为整数

将其从总高度中减去，以确定详细信息div
的新高度

将details
div
设置为新高度

为了完整起见，我加入了一个可运行的示例，该示例具有3个面板的可调整布局，非常类似于jQuery示例：

YUI（）。使用（'resize-constraint'，'resize plugin'，'node'，函数（Y）{
var graphNode=Y.one（“#图”）；
var detailsNode=Y.one（“#details”）；
graphNode.plug（Y.Plugin.Resize{
句柄：['b']
});
graphNode.resize.plug（Y.Plugin.ResizeConstrained{
约束：“#右面板”
});
graphNode.resize.on（'resize:resize'，函数（事件）{
var graphHeight=parseInt（graphNode.getStyle（'height'），10）；
detailsNode.setStyle（'height'，（300-图形高度）+'px'）；
});
变量filterNode=Y.one（“#filter”）；
var rightPanelNode=Y.one（“#rightPanel”）；
filterNode.plug（Y.Plugin.Resize{
句柄：['r']
});
filterNode.resize.plug（Y.Plugin.ResizeConstrained{
约束：“#主布局”
});
filterNode.resize.on（'resize:resize'，函数（事件）{
var filterWidth=parseInt（filterNode.getStyle（'width'），10）；
var rightpanel resizedwidth=（600-filterWidth）+'px'；
rightPanelNode.setStyle（'width'，rightPanelResizedWidth）；
//YUI使用'style'属性设置高度，因此必须使用'setStyle（）`覆盖高度，因为CSS已被覆盖。
graphNode.setStyle（'width'，RightPanel ResizedWidth）；
});
});
#主布局{
位置：绝对位置；
高度：300px；
宽度：600px；
}
#右面板{
位置：绝对位置；
右：0；
高度：300px；
宽度：300px；
}
#图表{
位置：绝对位置；
高度：200px；
宽度：100%；
背景：橙色；
}
#细节{
位置：绝对位置；
底部：0；
高度：100px；
宽度：100%；
背景：海军；
}
#滤器{
位置：绝对位置；
左：0；
身高：100%；
宽度：300px；
背景：darkcyan；
}


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

#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;
}

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');
    });
});