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

I have a page that has a left div and a right div. The divs are organized using display:table and associated tags. The right div is resizable using jquery-ui's resizable facility. I would like to be able to drag the divider to the left and right, and change the relative size of the panes.

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

But it's not quite right. For one thing, the right pane can only be resized by its right edge and by the bottom right corner, not by the left edge. How does one really make a splitter in this js/html/css world?

但这不太对劲。首先,右侧窗格只能通过其右边缘和右下角调整大小,而不能通过左边缘调整大小。如何在这个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>

1 个解决方案

#1

Add the resizeable function to the left one as well. Check my fiddle to see if that's what you meant.

将可调整大小的函数添加到左侧。检查我的小提琴,看看这是不是你的意思。

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

A better way to do it is to hook the resize function.

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

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