jquery插件实现添加用户!

原创 2012年03月28日 21:23:31
<!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>


效果:



相关文章推荐

使用jQuery插件实现添加用户

无标题文档 $(function (){ //利用jQuery获取输入的信息 var $name=$("#name") ; var $mail=$("#email"...
  • HUMHSX
  • HUMHSX
  • 2012年03月28日 21:53
  • 711

五款改善用户体验的jQuery插件

改善网页的用户体验,可以从以下几个方面入手:菜单栏,tab,登录/注册,搜索,以及404页面。对于每一方面的优化,Gevin分别向大家推荐一个自己私藏的jquery插件,希望对大家有帮助,也欢迎大家多...

五款改善用户体验的jQuery插件

主题:五款改善用户体验的jQuery插件 精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0) 作者 正文 卢水...

利用[JQuery插件]___验证用户输入到文本框信息。

插件是以JQuery核心代码为基础,编写出符合一定规范的应用程序,并将程序进行打包,调用时,仅需要包含该打包后的JS文件即可 我们所介绍的以及常用的一些插件都可以在这里找到 http://ar...

Google分析用户页面滚动深度分析jQuery插件 - jQuery Scroll Depth

日期:2012-4-29  来源:GBin1.com Google Analytics(Google分析)对于广大站长来说,肯定不是一个陌生的工具,它能提供给我们众多的网站访问相关信息及其用户使...
  • jjfat
  • jjfat
  • 2012年05月03日 10:43
  • 393

JQuery插件实现图片无刷新上传

  • 2014年02月19日 14:49
  • 646KB
  • 下载

jQuery插件汇总(待添加)

jQuery插件jQuery Spin Button自定义文本框数值自增或自减    jQuery插件JQuery Pager分页器实现javascript分页功能    jQuery插件Font...
  • amino77
  • amino77
  • 2013年10月08日 09:42
  • 719
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件实现添加用户!
举报原因:
原因补充:

(最多只允许输入30个字)