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表单设计器

  • 2014年08月30日 13:33
  • 448KB
  • 下载

Jquery UI Dialog 之 Form 表单提交

我就不介绍Jquery UI Dialog了,不过其中的一些属性可以到这里去找:http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.htm...
  • u011512316
  • u011512316
  • 2014年01月22日 11:55
  • 2165

Jquery UI Dialog 之 Form 表单提交

我就不介绍Jquery UI Dialog了,不过其中的一些属性可以到这里去找:http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.htm...
  • zhanwentao2
  • zhanwentao2
  • 2012年10月11日 17:03
  • 17201

jquery form 验证框架

  • 2012年09月20日 12:46
  • 48KB
  • 下载

jquery简单实现表单提交后的需要等待效果

简单来说就是遮罩然后加载个动画,往上有利用js手动更改html值实现缓冲动画的,比较麻烦,感觉性价比不高,毕竟谁也不会没事一直在那加载很多张这种等待动画。 主要也就是利用了position里面的fi...
  • jimoluoxue201
  • jimoluoxue201
  • 2016年01月05日 16:37
  • 3091

jquery-form.js

  • 2017年09月12日 12:29
  • 44KB
  • 下载

jQueryui的各版本下载地址,以及学习jQuery ui的个人经验(供学习)

给各位同学想下载jQueryui的地址: http://jqueryui.com/download/all/
  • xhw979850818
  • xhw979850818
  • 2014年07月22日 09:11
  • 2577

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

效果图:
  • chenchudongsg
  • chenchudongsg
  • 2014年10月29日 16:47
  • 1411

jquery制作具有添加与删除功能的表单(转载加修改)

jQuery制作具有添加与删除功能的表单 效果图如下: js代码如下: $(document).ready(function(){ //居中 $("#tab tr").attr("...
  • zhoucong92
  • zhoucong92
  • 2016年08月09日 09:37
  • 322

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

刚开始学习JQuery UI,自己写了个简单的表单信息的插入,没有做验证,也很简单,和大家分享一下: 添加用户 #table1{ border-collapse:colla...
  • php_897721669
  • php_897721669
  • 2012年03月28日 20:08
  • 7677
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery UI简单增加表单信息效果
举报原因:
原因补充:

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