Javascript 使用jquery UI调整可拆分屏幕div的大小_Javascript_Html_Jquery Ui

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

javascript html jquery-ui

Javascript 使用jquery UI调整可拆分屏幕div的大小,javascript,html,jquery-ui,Javascript,Html,Jquery Ui,我有一个设计，涉及html中的分割面板视图，类似于winforms分割面板。我一直在使用，而且我喜欢这个函数，我似乎无法协调两个divs的大小调整。当前代码的问题是，两个divs的大小相互偏离，而不是一个接着一个。如何使这两个divs一起工作 <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="cs

我有一个设计，涉及html中的分割面板视图，类似于winforms分割面板。我一直在使用，而且我喜欢这个函数，我似乎无法协调两个

div

s的大小调整。当前代码的问题是，两个

div

s的大小相互偏离，而不是一个接着一个。如何使这两个

div

s一起工作

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


试验
//初始化插件
$（函数（）{
试一试{
$（'ul.sf menu'）.superfish（）；
//设置分区
$（'Content'）。可调整大小（{handles:'e'，alsoResize:$（'Attributes'））；
}捕获（ex）{
警报（例如消息）；
}
});


这就是视图所在的位置。

想象一下这里的图像。。。







A
B
C

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

我已经利用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>


var WIDTH_ATTR='initWidth'；
//初始化插件
$（函数（）{
试一试{
$（'#Content'）。可调整大小（{handles:'e'，resize:resizeAttr}）；
$（'#Content'）.attr（WIDTH#attr，$（'#Content'）.WIDTH（））；
$（'InfoPanel'）.attr（WIDTH_attr，$（'InfoPanel'）.WIDTH（））；
}捕获（ex）{
警报（例如消息）；
}
});
函数resizeAttr（事件、用户界面）{
var change=ui.size.width-$（'#Content'）.attr（width#attr）；
$（'InfoPanel'）.width（$（'InfoPanel'）.attr（width\u attr）-更改）；
};

我仍然愿意从其他人那里得到更清晰的答案…

这里有一个水平分割的例子（一个顶部分割，一个底部分割），可能稍微简单一些：

HTML:

JavaScript:

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

您是否尝试过放置类似style=“display:inline；float:left/（right for the other）”？asawyer，是的。它们粘在屏幕的两侧，但div2没有调整大小…相关：，效果相同，只是我需要它在IE中工作。我会接受jQuery以外的解决方案，我只是认为最好是b/c，它已经独立于浏览器（大部分）。

#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;
}

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