Question

我有一个左div和右div的页面。 div使用display：table和相关标签进行组织。使用jquery-ui的可调整大小的工具可以调整右边的div。我希望能够将分隔符向左和向右拖动，并更改窗格的相对大小。

但这不太对劲。首先，右窗格只能通过其右边缘和右下角调整大小，而不能通过左边缘调整大小。如何真正在这个js / html / css世界中成为一个分裂器？

<!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>

Answer 1

也可以将可调整大小的功能添加到左侧。检查我的小提琴，看看这是不是你的意思。

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

更好的方法是挂钩调整大小功能。

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+"%",
            });
        }
    });
});

如何制作左右面板，并能够在它们之间滑动分隔线？

1 个答案: