主页源码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dialog</title>
<link rel="stylesheet" type="text/css" href="css/ui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<div>
<input type="image" id="dialogButton" src="imgs/add.PNG" />
</div>
<div id="dialogForm"></div>
</body>
</html>
|
弹出对话框代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/dialog.js"></script>
</head>
<body>
<div id="dialog-form" title="新建用户">
<fieldset>
<div>
<label>姓名：</label>
<input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all" />
</div>
</fieldset>
</div>
</body>
</html>
|
main.js
$(document).ready(function() {
$.ajaxSetup({cache: false});
$("#dialogButton").live("click",function(){
$.ajax({
url: "dialog/dialog.html",
cache: false,
dataType: "html",
type: "get",
success: function(html){
$("#dialogForm").html(html);
$("#dialog-form").dialog("open");
},
error: function(msg){
alert("error");
}
});
});
});
|
dialog.js
(document).ready(function(){
$( "#dialog-form" ).dialog({
height: 'auto',
width: 300,
modal: true,
autoOpen: false,
cache: false,
buttons: {
"OK": function() {
var name = $("input#name").val();
//将结果通过post方式传给方法，并可能写入数据库
$.post("", {name: name}, function(msg){
//ajax返回结果 -- msg
switch msg
case
....; break;
default: ...
});
$(this).dialog( "close");
$("#dialogForm").empty();
},
"Cancle": function() {
$( this ).dialog( "close" );
$("#dialogForm").empty();
}
},
close: function() {
$( this ).dialog( "close" );
$("#dialogForm").empty();
}
});
});
|
阅读(2306) | 评论(1) | 转发(0) |
