个人中心
gpt4 book ai didi

javascript - AlloyUI 中可调整大小的面板

转载 作者：行者123 更新时间：2023-11-28 12:43:22 25 4
gpt4 key购买 nike

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

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

http://jsfiddle.net/vLeve252/

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

ma​​in.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>

ma​​in.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

最佳答案

要使 div(或任何类型的 Node)可调整大小，您需要 plug() Plugin.Resize类到您的 Node 中。

没有必要使用Overlay。相反，您可以获得 div 作为 Node使用 YUI.one() .然后就可以在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');
    });
});

解释:

  1. 将一个 Node 插入一个 Resize 插件，以使其可调整大小。
  2. 用 ResizeConstrianed 插入 Resize 插件插件，以便只允许在外部 div 的宽度内调整大小。

  3. 在 resize:resize 事件中:

    • 以 Integer 的形式获取 graph div 的高度。
    • 从总高度中减去它以确定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>

关于javascript - AlloyUI 中可调整大小的面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25900012/

25 4 0
文章推荐： CSS交替基于行的 float
文章推荐： css - 我可以从 SASS 文件中导入一个或多个子部分吗？
文章推荐： css - 元素 <header> 或
在结构上是否与
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com