Jas*_*uit 27 jquery jquery-ui jquery-ui-dialog
我是JQueryUI的新手,虽然我有一个对话框工作,但它没有以我认为我指定的大小打开.为什么在定义对话框时设置宽度和高度不会影响对话框的初始大小？如何制作600px×500像素？
这是定义对话框的div:
<div id="dialog-form" title="Create Appointment">
<form> . . . </form>
</div>
以下是用于对话的JavaScript:
$(function() {
$("#dialog-form").dialog({
autoOpen: false,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500,
modal: true,
buttons: {
"Create": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
}
});
以及定义按钮以打开它的JavaScript:
$("#create-appt")
.button()
.click(function() {
$("#dialog-form").dialog("open");
});
});
编辑:
我现在看到了问题:除了我使用--app=...命令行选项在谷歌浏览器中运行它之外,这本来可以正常工作,所以它没有重新加载整个应用程序.
Tod*_*odd 31
问题:为什么在定义对话框时设置宽度和高度不会影响对话框的初始大小？
答:它确实......你使用的浏览器和jQuery的版本.
我将您上面的代码剪切/粘贴到一个小样本中,它完美地工作了......我粘贴了下面的完整示例,您可以尝试一下.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
$("#dialog-form").dialog({
autoOpen: false,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500,
modal: true,
buttons: {
"Create": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
}
});
});
$("#create-appt")
.button()
.click(function() {
$("#dialog-form").dialog("open");
});
});
</script>
</head>
<body>
<h1>test</h1>
<div id="dialog-form" title="Create Appointment">
<p> this is my test </p>
</div>
<input type="button" id="create-appt" value="test"/>
</body>
</html>
小智 15
我不确切知道它发生了什么,但你可以改变一点代码,它会产生你期望的结果:
您可以在onclick事件上设置以下选项,而不是使用autoOpen:
$("#create-appt")
.button()
.click(function() {
$("#dialog-form").dialog({width: 600,height:500});
});
我希望这有助于最好的问候,Marcelo Vismari