调整DIV面板的大小
我正在开发一个网站项目，我需要添加一个可resize的面板，如jsfiddle或hotmail（hotmail有一个左侧面板，包含你的邮件，并有一个正确的内容面板，你可以阅读你的邮件……）
我看了jQuery，我尝试了很多次，但我无法设置处理程序 。 我只需要制作一个可以水平resize的面板。
那我该怎么做呢？ 你能帮我完成我的代码吗（在left_panel和内容之间需要一个缩放器.Resizer会调整left_panel的大小，当然内容也会受到影响。 ）
> http://jsfiddle.net/QkZL8 这个小提琴不起作用，因为没有包含jQuery UI（所以jQuery UI可resize是未知的），但你也犯了语法错误，你应该这样做：
$(resize).resizable({ handles: 'w' });
不是这个：
$(resize).resizable({,, handles: 'w', });
正如David在评论中所说的那样，你应该让面板本身可以resize，而不是在splitter元素之间。 在resize处理程序中，您可以调整其他面板的大小，使其宽度与您实际resize的面板的宽度互补。
更新 ：这应该让你走在正确的轨道上：
$(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选项，因此您只能在这些边界内调整左列的大小。
在这里更新了小提琴
好吧，如果你还在迷路的话，我会快速模拟一下……所以代码是…
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
This element is not the resizing one
这在水平和垂直方向都有效。
编辑另一个例子
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
This element is not the resizing one
如何使用像Kendo分离器那样的任何东西： http ： //demos.kendoui.com/web/splitter/index.html
-大卫