调整DIV面板的大小 [英] Resizing DIV Panel

问题描述

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

I am working on a website project and I need to add a resizable panel like jsfiddle or hotmail (hotmail has a left panel that includes your mails, and has a right content panel that you can read your mails...)

我看着jQuery，尝试了很多次，但是无法设置 handler .我只需要制作一个可以水平调整大小的面板即可.

I looked at jQuery and I tried so many times but I can't set the handler. I just need to make a panel that can be resizable horizontally.

那我该怎么做呢?您能帮我完成我的代码吗(需要在left_panel和content之间调整大小.调整大小会调整left_panel的大小，当然内容也会受到影响..)

So how can I make this? Can you help me to complete my code (need a resizer between the left_panel and content. Resizer will resize the left_panel and of course content will be effected.)

> http://jsfiddle.net/QkZL8

推荐答案

该小提琴不起作用，因为不包括jQuery UI(因此不知道可调整大小的jQuery UI)，但是您也犯了语法错误，您应该做到这一点:

The fiddle doesn't work because jQuery UI isn't included (so jQuery UI resizable is not known), but also you made a syntax error, you should do this:

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

不是这个:

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

正如David在评论中所述，您应该使面板本身可调整大小，而不是在splitter元素之间.在调整大小处理程序中，您可以调整另一个面板的大小，以便其宽度与您实际调整大小的面板的宽度互补.

As David remarks in the comments, you should make the panel itself resizable, not an in between splitter element. In the resize handler you can resize the other panel so its width is complementary to the width of the panel you are actually resizing.

更新:这应该使您走上正确的轨道:

UPDATE: This should put you on the right track:

$(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选项，因此您只能在这些边界内调整左列的大小.

Update 2: I added a minWidth and maxWidth option to my example so you can only resize the left column within these boundaries.

在此处更新了小提琴

这篇关于调整DIV面板的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！