2010-06-16 29 views
4

我需要在可调整大小的对话框中显示图像(到目前为止,我尝试过的所有特定图像弹出库都不符合我的需要)。具有恒定纵横比的JQuery对话框

我想要做的就是在调整大小时保持高宽比。听起来很容易,但事实并非如此。

我觉得这样的事情可能会奏效,但没有骰子:

var d = $("").dialog({title:title, width:400, height:400}); 
d.resizable("option", "aspectRatio", true); 

不胜感激任何指针,TKS

回答

6

,由于它的挂钩的方式,我觉得最简单的只是做了调整大小部分自己,是这样的:

$("div").dialog({ 
    title:"Title", 
    width:400, 
    height:400, 
    resizable: false 
}).parent().resizable({ 
    handles: 'n,e,s,w,se,sw,ne,nw', 
    aspectRatio: true 
});​​​ 

You can view a demo here,你也可以破坏并重新创建它...但是这是一个有点浪费,所以只在其上创建,规范如果需要,可调整大小而不是对话框中的最大/最小高度/宽度。这应该工作:.parent().resizable("option", "aspectRatio", true),但它不是由于小部件挂钩的方式,所以最简单的解决方案是创建可调整大小自己创建对话框时您想要的选项。

备注:您在此处使用.parent()是因为您要使用包含标题栏和内容的对话框容器。 It's created/wrapped like this when you create the dialog

+0

非常好。谢谢!你为我节省了很多时间... – 2010-06-17 07:13:54

+0

@大卫 - 欢迎您!如果它解决了你的问题,一定要接受一个正确的答案(同样适用于未来的问题!),它可以帮助大家:)如果没有,请评论,所以我可以帮助更多:) – 2010-06-17 09:59:25

+0

对不起忘了标记你的答案。我仍然需要做很多工作才能让内容(而不仅仅是对话框)保留一个不变的AR。通过使用可调整大小的“调整大小”事件来实现此功能,该功能允许我动态调整内容大小。但是如果没有你的想法,我永远不会有那么远。再次感谢! – 2010-06-17 11:09:54