我正在开发一个网站项目,我需要添加一个可调整大小的面板,如jsfiddle或hotmail(hotmail有一个左侧面板,包含你的邮件,并有一个正确的内容面板,你可以阅读你的邮件……)
我看了jQuery,我尝试了很多次,但我无法设置处理程序.我只需要制作一个可以水平调整大小的面板.
那我该怎么做呢？你能帮我完成我的代码吗(在left_panel和内容之间需要一个缩放器.Resizer会调整left_panel的大小,当然内容也会受到影响.)
> http://jsfiddle.net/QkZL8
解决方法
这个小提琴不起作用,因为没有包含jQuery UI(所以jQuery UI可调整大小是未知的),但你也犯了语法错误,你应该这样做：
$(resize).resizable({
handles: 'w'
});
不是这个：
$(resize).resizable({,handles: 'w',});
正如David在评论中所说的那样,你应该让面板本身可以调整大小,而不是在splitter元素之间.在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选项,因此您只能在这些边界内调整左列的大小.
UPDATED fiddle here