jQuery添加用户

最新推荐文章于 2020-05-17 18:05:32 发布

bing7599069

最新推荐文章于 2020-05-17 18:05:32 发布

阅读量568

点赞数 2

文章标签： jquery javascript dialog function stylesheet input

本文链接：https://blog.csdn.net/bing7599069/article/details/7404164

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加用户</title>
<script language="javascript" type="text/javascript" src="./jquery-1.7.1.js">
</script>
<script language="javascript" type="text/javascript" src="./jquery-ui-1.8.18.custom.min.js">
</script>

<link  type="text/css" rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />

  <script language="javascript" type="text/javascript">


   
   

$(function(){
	 var name=$("#name");
   var tal=$("#tal");
   var sex=$("#sex");
   
	$("#dialog").dialog({
		autoOpen:false,//设置对话框的打开方式 不是自动打开
		show:"blind",//打开时动画效果
		nide:"explode",//关闭效果
		modal:true,//遮罩效果
	
			buttons:[{
				text:"ok",
				click:function(){
					
					//alert(name.val());
					$("#user table").append("<tr><td>"+name.val()+"</td><td>"+tal.val()+"</td><td>"+sex.val()+"</td></tr>");
					$(this).dialog("close");
					}
				},
				{
					text:"no",
				click:function(){
					$(this).dialog("close");
				}
					}],
			
			draggable:false, //是否可以拖动  true为可以拖动 false为不可拖动
		closeOnEscape:false,  //是否采用Esc键退出 默认值为true允许Esc键退出
		title:"添加用户操作页面",
		
		width:"300",
		height:"300",
		
		});	
		//触发连接事件，当你点击连接打开一个对话框
	$("#dialog_link").click(function(){
$("#dialog").dialog("open");//open参数 作业 打开对话框
	
		})
	});

</script>
</head>

<body>
<div id="user">
<table width="300" border="1"id="tabl">
  <tr>
    <td>姓名</td>
    <td>电话</td>
    <td>性别</td>
  </tr>
</table>

</div>
<!--创建一个连接 -->
<a href="#" id="dialog_link"><span></span>打开Dialog </a> 
<!--对话框  就成了一个对话框 在页面中会隐藏-->
<div id="dialog" title="hi!">
姓名<input type="text" id="name" value=""><br>
电话<input type="text" id="tal" value=""> <br>
性别<input type="text" id="sex" value="">
</div>

</body>
</html>