Question

我有一个设计，涉及html中的拆分面板视图，类似于winforms拆分面板。我一直在用jQuery UI - Resizable进行表达，我喜欢这个函数，我似乎无法协调调整两个div的大小。当前代码的问题在于两个div彼此调整大小，而不是一个跟随另一个调整。如何让两个div一起工作？

<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="css/custom.css" />
        <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
        <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen">
        <script type="text/javascript" src="script/jquery-1.5.1.js"></script>
        <script type="text/javascript" src="script/superfish.js"></script>
        <script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"></script>
        <script type="text/javascript">


        // initialise plugins
        $(function(){
            try {
                $('ul.sf-menu').superfish();

                //set up divs
                $('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')});

            }catch(ex){
                alert(ex.message);
            }
        });

        </script>
    </head>
    <body>
       <div id="Header">
            <div id="Menu">
                <ul class="sf-menu" id="nav">
                    <!-- Snip menu -->
                </ul>
            </div>
        </div>
        <div id="Middle">
            <div id="Content" class="ui-widget-content">This is where the view is.<br/>
            Imagine an image here ...
            <br/>
            <br/>
            <br/>
            </div>
            <div id="Attributes" class="ui-widget-content">
                <ul>
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>
            </div>
        </div>
        <div id="FootBreak"/>
        <div id="Footer">
            <a href="#">Help</a>
        </div>
    </body>
</html>

Answer 1

我使用resize事件制定了一个合理的黑客。

<script type="text/javascript">

    var WIDTH_ATTR = 'initWidth';

    // initialise plugins
    $(function(){
        try {
            $('#Content').resizable({ handles: 'e', resize: resizeAttr }); 
            $('#Content').attr(WIDTH_ATTR, $('#Content').width());
            $('#InfoPanel').attr(WIDTH_ATTR, $('#InfoPanel').width());
        }catch(ex){
            alert(ex.message);
        }
    });

    function resizeAttr(event, ui){
        var change = ui.size.width - $('#Content').attr(WIDTH_ATTR);
        $('#InfoPanel').width($('#InfoPanel').attr(WIDTH_ATTR) - change);
    };

</script>

_{我仍然愿意接受其他人更清晰的答案......}

Answer 2

我不确定这是否符合要求，但是ExtJS可以轻松处理拆分窗格并且可以跨浏览器工作。例如，请参阅此RSS feed client in ExtJS。请注意，如果您打算销售产品，ExtJS有商业许可限制。

Answer 3

下面是一个水平拆分的示例（一个顶部div，一个底部div），也许稍微简化了一点：

HTML：

<html>
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
    <div id="div1">1st</div> 
    <div id="div2">2nd</div>
  </body>
</html>

CSS：

#div1, #div2 {
  position: absolute;
  left: 0;
  right: 0;
  outline: solid 1px #ccc; /* just for making the divs visible */
  margin: 5px; /* just for making the divs visible */
}
#div1 {
  height: 100px;
  top: 0;
}
#div2 {
  top: 110px;
  bottom: 0;
}

JavaScript：

$('#div1').resizable({
  handles: 's',
  resize: resizeEventHandler
});
function resizeEventHandler(event, ui){
  var new_height = ui.size.height;
  $('#div2').css('top', new_height + 10);
}

See demo here。

使用jquery UI的可调整大小的分屏幕div

3 个答案: