如何制作左右面板，以及如何在它们之间滑动分隔板？

Question

I have a page that has a left div and a right div. 我有一个页面，其中包含一个左div和一个右div。 The divs are organized using display:table and associated tags. div使用display：table和相关标签进行组织。 The right div is resizable using jquery-ui's resizable facility. 使用jQuery-ui的可调整大小功能可调整右div的大小。 I would like to be able to drag the divider to the left and right, and change the relative size of the panes. 我希望能够将分隔线向左和向右拖动，并更改窗格的相对大小。

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

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/ http://jsfiddle.net/xhaxme4c/4/

A better way to do it is to hook the resize function. 更好的方法是挂钩调整大小功能。

http://jsfiddle.net/dorzb3kn/ 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 个解决方案

解决方案1
2 已采纳 2015-01-12 13:58:41

如何制作左右面板，以及如何在它们之间滑动分隔板？

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-01-12 13:58:41

解决方案1
2 已采纳 2015-01-12 13:58:41