jQuery 调整 DIV 面板的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12403095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizing DIV Panel
提问by iedmrc
I am working on a website project and I need to add a resizablepanel 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...)
我正在处理一个网站项目，我需要添加一个可调整大小的面板，如 jsfiddle 或 hotmail（hotmail 的左侧面板包含您的邮件，还有一个右侧的内容面板，您可以阅读您的邮件...）
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.
我查看了 jQuery 并尝试了很多次，但无法设置处理程序。我只需要制作一个可以水平调整大小的面板。
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.)
那我该怎么做呢？你能帮我完成我的代码吗（在 left_panel 和 content 之间需要一个 resizer。Resizer 将调整 left_panel 的大小，当然内容会受到影响。）
> http://jsfiddle.net/QkZL8
回答by Asciiom
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:
小提琴不起作用，因为不包含 jQuery UI（因此不知道 jQuery UI 可调整大小），但您也犯了语法错误，您应该这样做：
$(resize).resizable({
handles: 'w'
});
not this:
不是这个：
$(resize).resizable({,,
handles: 'w',
});
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);
}
});
Update 2: I added a minWidth and maxWidth option to my example so you can only resize the left column within these boundaries.
更新 2：我在示例中添加了 minWidth 和 maxWidth 选项，因此您只能在这些边界内调整左列的大小。
回答by ryanc1256
Ok, so i made up a quick mock up if you are still lost... so the code is...
好的，所以如果你仍然迷路的话，我做了一个快速的模拟......所以代码是......
<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>
?
? This works both ways horizontal and vertically .
? 这适用于水平和垂直两种方式。
Editanother example
编辑另一个例子
<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>
?
回答by David Slavík
what about use anything completed like Kendo splitter: http://demos.kendoui.com/web/splitter/index.html
使用像 Kendo splitter 这样完成的东西怎么样：http: //demos.kendoui.com/web/splitter/index.html
-David
-大卫
