JQueryUI(四):Dialog(第一部分)
1:基本的对话框
在页面上显示对话框非常简单,只需要定义一个div即可。如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A basic dialog</title>
<link href="../css/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/redmond/ui.dialog.css" />
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../ui/ui.core.js"></script>
<script type="text/javascript" src="../ui/ui.dialog.js"></script>
<script type="text/javascript" src="../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#myDialog").dialog();
});
</script>
<style type="text/css">
body
{
font: 62.5% "Trebuchet MS" , sans-serif;
margin: 10px;
}
</style>
</head>
<body>
<div id="myDialog" title="This is the title">
sunfishlu,I believe I can fly.
</div>
</body>
</html>
效果图如下:
2:属性
2.1:aotoOpen,初始化时,是否自动显示对话框,默认为true。
2.2:bgifame,是否使用bgiframe插件来解决IE6下无法遮盖select元素的问题,默认为false。
2.3:buttons,设置对话框底部的按钮。
2.4:draggable,设置对话框是否可以拖动,默认为true。
2.5:height,设置对话框的高度,默认为200.
2.6:hide,关闭对话框时的特效。
2.7:maxHeight/minHeight,设置最大、小高度。
2.8:maxWidth/minWidth,设置最大、小宽度。
2.9:modal,是否未模态窗口。默认为false。
2.10:overlay,
2.11:position,设置对话框显示位置。
2.12:resizable,设置对话框是否可以重置大小。
2.13:show,显示对话框时的特效。
2.14:stack,是否可以覆盖其它对话框。默认为true。
2.15:title,设置对话框标题。
2.16:width,宽度。
如:
<script type="text/javascript">
$(document).ready(function () {
var doOk = function() {
alert(1);
}
var dialogOpts = {
modal: true,
overlay: {
background: "url(img/modal.png) repeat",
},
buttons: {
"Ok!": doOk
},
height: "300px"
};
$("#myDialog").dialog(dialogOpts);
});
</script>
效果图如下: