javascript - 如何制作左右面板,并能够在它们之间滑动分隔线?

标签 javascript jquery css jquery-ui splitter

我有一个页面有一个左边的 div 和一个右边的 div。 div 是使用 display:table 和相关标签组织的。右侧的 div 可以使用 jquery-ui 的可调整大小工具调整大小。我希望能够左右拖动分隔线,并更改 Pane 的相对大小。

但这并不完全正确。一方面,右 Pane 只能通过其右边缘和右下角调整大小,而不能通过左边缘调整。如何在这个 js/html/css 世界中真正成为一个分离器?

http://jsfiddle.net/rhedin/xhaxme4c/

<!DOCTYPE html>
<html lang="en" style="height:100%;width:100%;border:3px solid red">
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
        <style>
            * {
                box-sizing: border-box
            }
        </style>
    </head>
    <body style="height:100%;width:100%;border:3px solid blue;margin:0;padding:8px">
        <div id="allBodyDiv" style="width:100%;height:100%;border:3px solid black;display:table">
            <div id="leftWithinBodyDiv" style="border:3px solid blue;display:table-cell">
            </div>
            <div id="rightWithinBodyDiv" style="width:100px;border:3px solid red;display:table-cell">
            </div>
        </div>
        <script>
            $(function() {
                $("#rightWithinBodyDiv").resizable({});
            });
        </script>
    </body>
</html>

最佳答案

也将可调整大小的功能添加到左侧。检查我的 fiddle ,看看这是否是您的意思。

http://jsfiddle.net/xhaxme4c/4/

更好的方法是 Hook 调整大小函数。

http://jsfiddle.net/dorzb3kn/

$(function () 
{
    $(".leftcolumn").resizable(
    {
        autoHide: true,
        handles: 'e',
        resize: function(e, ui) 
        {
            var parent = ui.element.parent();
            var greenboxspace = parent.width() - ui.element.outerWidth(),
                redbox = ui.element.next(),
                redboxwidth = (greenboxspace - (redbox.outerWidth() - redbox.width()))/parent.width()*100+"%";
                redbox.width(redboxwidth);
        },
        stop: function(e, ui) 
        {
            var parent = ui.element.parent();
            ui.element.css(
            {
                width: ui.element.width()/parent.width()*100+"%",
            });
        }
    });
});

关于javascript - 如何制作左右面板,并能够在它们之间滑动分隔线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27903491/

相关文章:

javascript - Bootstrap 不向右拉

javascript - 如何在 AngularJS 中正确设置多个 Controller ?

asp.net - 如何验证 Web 服务调用者是否是我的网站?

jquery - Three.js TranslateX 或 Y 导致旋转,但我只希望它沿轴直线移动

jquery - 添加公共(public)方法的 jQuery 插件模式的缺点

css - transform rotate3d parent 中的元素看起来仍然平坦

javascript - 将 api 响应数组转换为另一个数组以传递给 Vue prop

javascript - JavaScript 中奇怪的意外标记非法

javascript - 在 Codepen 中检测 CSS-only 更新

php - 表格标签和输入文本框之间的表宽空间