Question

大家好，有没有办法让2个div占据屏幕的50％并且在中间有一个条，所以你可以拖动它，使左边40％和右边60％，反之亦然。

我希望能够做到这个jquery。

Answer 1

我没有完整的答案，但有一点可能值得一看的是来自jQuery UI的Resizable交互：http://jqueryui.com/demos/resizable/#synchronous-resize

这在很大程度上取决于您希望最终产品如何运作。你可以设置它，这样一个DIV可以调整大小，而相邻的DIV只是填补空白。

Answer 2

这是我快速编写的方法，但这并不使用jQuery。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Slider</title>
<style type="text/css">
    #bar1 {
        position: absolute;
        background: red;
        height: 250px;
        width: 400px;
        z-index: 1;
    }

    #bar2 {
        position: absolute;
        background: green;
        height: 250px;
        width: 800px;
    }

    #slider {
        position: relative;
        background: blue;
        height: 100%;
        width: 10px;
        float: right;
    }
</style>

<script type="text/javascript">
    var down = false;
    var mouse_x;
    var interval;
    var IE = document.all?true:false

    if (!IE) document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove = get_mouse_x;

    function get_mouse_x(e) {
        if (IE)
            mouse_x = event.clientX;
        else
            mouse_x = e.pageX;
    }

    function drag() {
        interval = setInterval("update()", 1);
    }

    function release() {
        clearInterval(interval);
    }

    function update() {
        if ((mouse_x - document.getElementById('bar1').offsetLeft) >= document.getElementById('bar2').offsetWidth) {
            release();
            document.getElementById('bar1').style.width = document.getElementById('bar2').offsetWidth + "px";
        } else if (mouse_x <= document.getElementById('bar1').offsetLeft) {
            release();
            document.getElementById('bar1').style.width = document.getElementById('bar1').offsetLeft + "px";
        } else {
            document.getElementById('bar1').style.width = (mouse_x - document.getElementById('bar1').offsetLeft) + "px";
    }
    }
</script>
</head>

<body onmouseup="javascript:release();">
    <div id="bar1">
        <div id="slider" onmousedown="javascript:drag();"> </div>
    </div>

    <div id="bar2"></div>
</body>
</html>

我不建议您在网站上使用它，而是从中学习或改进以使其完全稳定。但希望这可以让您了解如何解决这个问题。

IE中还有一个错误，在滑动之后，它不会失去滑块div的焦点。因此，这意味着当您重新滑动它时，它无法正常释放。为避免这种情况：在初始滑动后，将其他东西聚焦，然后再次滑动。除此之外它工作正常。

希望这在某种程度上有所帮助：）

Answer 3

您所描述的通常被称为拆分器。从the demo来看，这jQuery plugin看起来就像你想要的那样。

Answer 4

不是做css百分比，而是找到窗口的宽度，将其分成两半（减去条宽），并设置像素宽度。这样可以在移动条形图时更容易更改。

Answer 5

根据您的应用程序UI需要的其他内容，这可能是过度杀伤，但ExtJS做得非常好。

应该提到的另一个非常规选项：框架集。框架是90年代中期的宠儿，但它们仍然得到了几乎所有浏览器的支持而没有太大的麻烦。

两个div各占50％。使中间拖拽更大或更小

5 个答案: