jquery插件实现添加用户！

最新推荐文章于 2024-07-12 16:27:40 发布

置顶 __GYT

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量847

点赞数

文章标签： jquery插件 stylesheet javascript function border input

本文链接：https://blog.csdn.net/Oo__YAN/article/details/7404716

版权

<!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/jscript" src="./js/jquery-1.7.1.min.js" /></script>
<script language="javascript" type="text/jscript" src="./js/jquery-ui-1.8.18.custom.min.js" /></script>
<link rel="stylesheet" href="./css/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" href="./css/demo.css" />
<script type="text/javascript" language="javascript">

$(document).ready(function(){
	

		$("#dialog").dialog({
			
				 autoOpen:false,		//设置对话框打开方式，不是自动打开	
				 show:"blind",      	//打开时的动画效果
				 hide:"explode",		//关闭时的动画效果
				 modal:true,			//是否遮罩，true表示遮罩效果，false表示非遮罩	 	
				 draggable:false,		//是否可以拖动效果  默认值true表示可以拖动默认值false表示不可拖动 
				 closeOnEscape:false,	//是否采用esc键退出对话框，如果false表示不采用，默认值true表示采用
				 title:"添加用户",	 	//对话框的标题
				 position:"center",		//对话框弹出位置 top bottom center left right 默认值为center
				 width:400,				//对话框宽度	 
				 height:250,			//对话框高度 
				 resizable:false,		//是否可以改变的操作  如果为false表示不可改变大小  默认值为true表示可以改变大小
				 
				 buttons:
				 [{
					
					  text:"确定",
						click:function (){		   	
							//点击确定之后获取表单输入的值
							var textval=$("#name").val();
							var sexval=$("#sex").val();
							var ageval=$("#age").val();
							var telval=$("#tel").val();	
							//向表格中添加用户
							$("#users")
							.append("<tr align='center'><td>"+textval+"</td><td>"+sexval+"</td><td>"+ageval+"</td><td>"+telval+"</td><td><a href='#' id='del'>删除</a></td></tr>");
							
							//删除当前行
							$("td a").click(function (){
					
								$(this).parents("tr").remove();
									
							});
							 
							//关闭对话框 
							$(this).dialog("close"); 
							
							
							
							
						} 
				   },
					
					{
					  text:"取消",
						click:function (){
						   $(this).dialog("close");  
						} 
						
					
				 }],	
		
		
		
		
		});
			
				
				
				//触发连接的事件  当你点击 连接打开一个对话框
				$("#dialog_link").click(function (){
				
					$("#dialog").dialog("open");//open参数， 作用是打开对话框
					
				});
		
		
	
});
</script>

<style>
    #dialog_link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;}

	#dialog_link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;}
		

</style>

<style>
		body { font-size: 10px; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:90%; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: center; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
</head>

<body>

<table width="298" height="36" border="0" id="users" class="ui-widget ui-widget-content">
<h3>用户列表:</h3>
  <tr class="ui-widget-header " align="center">
    <td width="48">姓名</td>
    <td width="48">性别</td>
    <td width="48">年龄</td>
    <td width="57">电话</td>
    <td width="63">操作</td>
  </tr>
</table>

<br><br><br><br>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">添加用户</a>



<div id="dialog" title="添加用户">
	
    姓名：<input type="text" id="name" /><br>	
	性别：<input type="text" id="sex" /><br>
	年龄：<input type="text" id="age" /><br>
	电话：<input type="text" id="tel" /><br>

</div>

</body>
</html>

效果：

__GYT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件实现添加用户！

无标题文档$(document).ready(function(){ $("#dialog").dialog({ autoOpen:false, //设置对话框打开方式，不是自动打开 show:"blind", //打开时的动画效果 hide:"explode", //关闭时的动画效果 modal:true
复制链接

扫一扫