2

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

我希望能够做到这个jquery。

4

5 回答 5

4

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

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

于 2009-09-03T22:13:16.483 回答
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>

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

Also there's a bug in IE where, after sliding, it does not lose focus from the slider div. So this means that when you re-slide it, it doesn't release properly. To avoid this: after initial sliding, focus something else, and then slide again. Other then that it works fine.

Hopefully this was helpful in some way :)

于 2009-09-03T23:40:58.830 回答
1

您所描述的通常称为拆分器。从演示来看，这个jQuery 插件看起来就像你想要的那样。

于 2009-09-03T22:33:37.493 回答
0

除了做 css 百分比，我会找到窗口的宽度，将其分成两半（减去条形宽度），并设置像素宽度。这使得在移动栏时更容易更改。

于 2009-09-03T22:26:10.243 回答
-1

这可能有点矫枉过正，具体取决于您的应用程序 UI 还需要什么，但 ExtJS 可以很好地完成这类事情。

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

于 2009-09-03T22:24:13.117 回答