jquery - 调整 DIV 面板的大小

Question

我正在做一个网站项目，我需要添加一个可调整大小的面板，如 jsfiddle 或 hotmail（hotmail 的左侧面板包含您的邮件，右侧的内容面板可以阅读您的邮件......）

我查看了 jQuery 并尝试了很多次，但我无法设置处理程序。我只需要制作一个可以水平调整大小的面板。

那么我该怎么做呢？你能帮我完成我的代码吗（需要在 left_panel 和内容之间调整大小。调整大小将调整 left_panel 的大小，当然内容会受到影响。）

> http://jsfiddle.net/QkZL8

score 16 · Accepted Answer

小提琴不起作用，因为不包括 jQuery UI（所以不知道 jQuery UI 可调整大小），而且你犯了语法错误，你应该这样做：

$(resize).resizable({
    handles: 'w'
});

不是这个：

$(resize).resizable({,,
    handles: 'w', 
});

正如大卫在评论中所说，您应该使面板本身可调整大小，而不是中间分隔符元素。在调整大小处理程序中，您可以调整另一个面板的大小，使其宽度与您实际调整大小的面板的宽度互补。

更新：这应该让你走上正确的轨道：

$(resize).resizable({
    // only use the eastern handle
    handles: 'e',
    // restrict the width range
    minWidth: 120,
    maxWidth: 450,
    // resize handler updates the content panel width
    resize: function(event, ui){
        var currentWidth = ui.size.width;
      
        // this accounts for padding in the panels + 
        // borders, you could calculate this using jQuery
        var padding = 12; 
      
        // this accounts for some lag in the ui.size value, if you take this away 
        // you'll get some instable behaviour
        $(this).width(currentWidth);
      
        // set the content panel width
        $("#content").width(containerWidth - currentWidth - padding);            
    }
});

更新 2：我在示例中添加了 minWidth 和 maxWidth 选项，因此您只能在这些边界内调整左列的大小。

更新的小提琴在这里

score 3 · Accepted Answer

好的，所以如果您仍然迷路，我制作了一个快速模型......所以代码是......

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".resize").resizable();           
        });
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
    <style type="text/css">
        body, html
        {
            margin: 0px;
            border: 0px;
            padding: 0px;

        }


        .resize
        {
            position: fixed;
            left: 0px;
            height: 100%;
            background: blue;
            cursor:pointer;         
            max-width: 300px;
            padding: 20px;
        }



    </style>
    </head>
    <body>
<div class="resize">
    <p>
       Nullam vitae eros sapien. Nulla sit amet ipsum sagittis felis lobortis imperdiet eget eu est. Pellentesque tincidunt dictum libero, vitae sagittis augue interdum ac. Nam cursus, ante eget consequat mollis, mauris justo consequat tellus, at rutrum justo dolor ut tellus. Curabitur interdum, augue a aliquam tempus, neque lectus rhoncus lorem, sed mattis velit purus eu nibh. Donec adipiscing condimentum eros ac convallis. Morbi purus felis, condimentum at rutrum nec, auctor quis mi. Sed odio turpis, blandit vitae sagittis a, accumsan rutrum risus. Sed ultricies congue quam, consectetur porttitor augue ultrices non. Mauris cursus quam sed eros fermentum scelerisque. Mauris nisi purus, iaculis ac pulvinar ac, rhoncus a est. Quisque vitae mollis lacu
    </p>
</div>
<div class="noneresize">
    <p> 
        This element is not the resizing one
    </p>
</div>



    </body>
</html>

这适用于水平和垂直方向。

编辑另一个示例

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".resize").resizable();           
        });
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
    <style type="text/css">
        body, html
        {
            margin: 0px;
            border: 0px;
            padding: 0px;

        }

        .holder div
        {
            float: left;            
        }

        .resize
        {
            position: relative;
            height: 100%;
            background: blue;
            cursor:pointer;         
            max-width: 300px;
            padding: 20px;
        }


        .holder
        {
            position: relative;
            width: 100%;
            height: 100%;

        }

    </style>
    </head>
    <body>
<div class="holder">
    <div class="resize">
        <p>
           Nullam vitae eros sapien. Nulla sit amet ipsum sagittis felis lobortis imperdiet eget eu est. Pellentesque tincidunt dictum libero, vitae sagittis augue interdum ac. Nam cursus, ante eget consequat mollis, mauris justo consequat tellus, at rutrum justo dolor ut tellus. Curabitur interdum, augue a aliquam tempus, neque lectus rhoncus lorem, sed mattis velit purus eu nibh. Donec adipiscing condimentum eros ac convallis. Morbi purus felis, condimentum at rutrum nec, auctor quis mi. Sed odio turpis, blandit vitae sagittis a, accumsan rutrum risus. Sed ultricies congue quam, consectetur porttitor augue ultrices non. Mauris cursus quam sed eros fermentum scelerisque. Mauris nisi purus, iaculis ac pulvinar ac, rhoncus a est. Quisque vitae mollis lacu
        </p>
    </div>
    <div class="noneresize">
        <p> 
            This element is not the resizing one
        </p>
    </div>
</div>


    </body>
</html>

score 2 · Accepted Answer

怎么样使用像剑道分离器完成的任何东西：http ://demos.kendoui.com/web/splitter/index.html

-大卫

jquery - 调整 DIV 面板的大小

3 回答 3

Related

Reference