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

Question

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

但这不对ui。一方面，右窗格只能通过其右边缘和右下角调整大小，而不能通过左边缘调整。如何在这个 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>

Answer 1

在左侧也添加可调整大小的功能。检查我的 fiddle 看看是不是你的意思。

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

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

How to make a left and right panel, and be able to slide a divider between them?

javascript

css

jquery

jquery-ui

splitter