JQuery UI简单增加表单信息效果

原创 2012年03月28日 20:08:11

刚开始学习JQuery UI,自己写了个简单的表单信息的插入,没有做验证,也很简单,和大家分享一下:

<!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>
<!--引入jquery类库-->
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />
<style>
#table1{
	border-collapse:collapse;
	border:1px #39C solid;
	}
#table1 tr,td{
	border:1px #39C solid;
	}

</style>
<script language="javascript" type="text/javascript">
//当窗体加载完毕的时候 触发该匿名函数
//$(document)  //把dom对象转换成jQuery对象
//$(document).ready(function (){});

$(function (){
			
			$("#dialog").dialog({	//创建dialog弹窗
				autoOpen:false,		//不自动打开窗口
				show:"slide",		//显示弹窗出现的效果,slide为滑动效果
				hide:"explode",		//显示窗口消失的效果,explode为爆炸效果
				resizable:false,	//设置是否可拉动弹窗的大小,默认为true
				modal:true,			//是否有遮罩模型
				buttons:[			//定义两个button按钮
					{
						text:"确定",
						click:function(){
							$(this).dialog('close');	//关闭弹窗
							$("#table1").append("<tr><td>"+$("#username").val()+"</td><td>"+$("#email").val()+"</td><td>"+$("#iphone").val()+"</td><td><input type='button' class='del' value='删除用户'></a></td></tr>");		//追加tr
								$(".del").click(function (){	
									$(this).parent().parent().remove();			//点击删除按钮移除tr
									});
							
							}	
					},
					{
						
						text:"取消",
						click:function(){
							$(this).dialog("close");	//点击取消,关闭弹窗
							}
					}
				
				]
			});
			
			$("#btn").button().click(function(){
				$("#dialog").dialog("open");		//点击button按钮,显示弹窗
				
				});
				
		
	});



</script>
</head>

<body>
	<div>
	<table width="500" id="table1">
    <tr>
        <td>姓名</td>
        <td>Email</td>
        <td>电话</td>
         <td>删除</td>
    </tr>
</table>
	<a href="javascript:void(0)" id="btn">添加用户</a>
    
    </div>
 
 	<div id="dialog" title="系统提示">
    <table width="200" border="0">
    <tr>
        <td>姓名:<input type="text" id="username" /> </td>
    </tr>
    <tr>
        <td> 邮箱:<input type="text" id="email" /></td>
    </tr>
    <tr>
        <td> 电话:<input type="text" id="iphone" /></td>
    </tr>

	</table>

    </div>
</body>
</html>


效果图1:


效果图2:


Jquery UI Dialog 之 Form 表单提交

我就不介绍Jquery UI Dialog了,不过其中的一些属性可以到这里去找:http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.htm...

Jquery UI Dialog 之 Form 表单提交

我就不介绍Jquery UI Dialog了,不过其中的一些属性可以到这里去找:http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.htm...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery demo - jquery ui 日期控件简单应用

jquery ui 是jquery官方提供的ui插件, 提供了许多功能强大, 漂亮实用的ui工具.  今日研究了一下里面的日期控件, 在此与大家分享: 先看效果:   html代码: ...
  • ghyg525
  • ghyg525
  • 2013年12月27日 15:27
  • 1628

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jQuery UI的简单使用,轻松实现二级菜单

jQuery UI 的API手册地址:http://api.jqueryui.com/        jQuery UI 实现百叶窗效果、菜单、Tab导航;最后组合 百叶窗效果 + 菜单,实现二级菜单...

20151124 Jquery UI form 表单变成dialog

无标题文档 $(function(){ $("#form1").dialog({ autoOpen: false,//设置属性,不自动弹出对话框 ...
  • xiaoduc
  • xiaoduc
  • 2015年11月25日 12:36
  • 334

jquery UI学习笔记-知问前端之验证表单插件

效果图:
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery UI简单增加表单信息效果
举报原因:
原因补充:

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