jQuery注册

原创 2012年03月28日 17:42:40
<!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>modal_form.html</title>

<!--注意:首先引用jquery文件后引进ui文件-->
	<style>
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		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: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>

<!--引用Css样式类库文-->
<link  type="text/css" rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<!--引用jQuery类库文件-->
<script type="text/javascript" language="javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>

<script type="text/javascript" language="javascript">
	
	$(function(){
		
		$("#dialog:ui-dialog").dialog("destroy");
		
		var name = $("#name"),
			email = $("#email"),
			password=$("#password"),
			allFields=$([]).add(name).add(email).add(password),
			tips=$(".validateTips");
		
		function updateTips(t){
			
			tips
				.text(t)
				.addClass("ui-state-highlight");
			setTimeout(function(){
				
				tips.removeClass("ui-state-highlight",1500);
				
			},500);
			
		}
			
		$("#dialog-form").dialog({
			
			autoOpen:false,
			height:300,
			width:350,
			modal:true,
			buttons:{
			"Create an account":function(){
				var bValid=true;
				allFields.removeClass("ui-state-error");
				//此处可以加正则判断
				
				if(bValid){
						
							
					$("#users tbody").append(
				
						"<tr><td>"+name.val()+"</td>"+"<td>"+email.val()+"</td>"+"<td>"+password.val()+"</td></tr>"									
					);
					
					$(this).dialog("close");
				}
				
			},
				Cancel: function(){
				
					$(this).dialog("close");
				}
			},
			
			close:function(){
			allFields.val("").removeClass("ui-state-error");
			}
			
		});
		
	
		$( "#create-user" )
			.button()
			.click(function() {
				$( "#dialog-form" ).dialog( "open" );
			});
		
	});
	
	
</script>
</head>

<body>

<div class="demo">

<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>


<div id="users-contain" class="ui-widget">
	<h1>Existing Users:</h1>
	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
				<th>Email</th>
				<th>Password</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john.doe@example.com</td>
				<td>johndoe1</td>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user">Create new user</button>

</div><!-- End demo -->
	
</body>
</html>




必知的 15 个jQuery小技巧(干货)

1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件。 $('a.top').click(function(){ $(docum...
  • jian_xi
  • jian_xi
  • 2017年05月20日 14:52
  • 251

说说学习jquery时大伙都喜欢踩的七个坑,看看你中了几个

微句语录 2017-04-26 16:54 大伙学习中难免都会走歪路,今天就给大伙说说学习jquery时容易走的七个坑 这里还是要说一下我的前端学习群:594959296,从我一个人到...
  • u011277123
  • u011277123
  • 2017年04月27日 17:48
  • 333

jquery ui各种验证代码

//表单验证扩展 $.extend($.fn.validatebox.defaults.rules, { //验证中文 CHS:{ validator:function(valu...
  • superdog007
  • superdog007
  • 2015年09月10日 09:24
  • 1375

JQuery对象与Dom对象初次入坑

首先感谢前端大佬对自己的指点 问题背景:测试平台在做api用例管理的时候,有对api的编辑功能,用户点击编辑打开的编辑页面中有动态的根据api的参数的数量生成input输入框并进行赋值,然后博主在使...
  • qq_14908027
  • qq_14908027
  • 2017年11月28日 17:19
  • 71

前端遇到的坑小结

本人前端开发中遇到的坑,浪费不少时间。 以后遇到这类坑,都会在此做个小结笔记,防止下次再踩, 节约时间。 1. first-child误区 first-child是一个元素在它的父元素中的顺序。而...
  • jdk137
  • jdk137
  • 2016年03月07日 16:42
  • 403

jQuery简洁大方的登录页面模板

网站登录模板 - 何问起 原文 首页 特效 jQuery Demo 2 Demo 3 扫码直达 登录管理 扫码上网 安全便捷 ...
  • qq_16683355
  • qq_16683355
  • 2017年01月05日 14:58
  • 302

jquery标题栏伸缩以及标题栏背景图跟着切换

//伸缩列表 $(function(){ $(".gao_fourXuan li").eq(0).click(function(){ $("#baram").slideToggle("slow"...
  • Senssic
  • Senssic
  • 2014年11月05日 16:53
  • 500

Django+Jquery+Ajax+验证码登录案例系列之十二

1,创建项目test042,创建应用app为booktest3,注册应用booktest 作用让创建的应用运行起来 4,在项目根目录下创建模板templates目录 作用就是存放html文件在项目...
  • u014745194
  • u014745194
  • 2017年06月30日 14:51
  • 1592

jquery autocomplete 怎样实现动态绑定

怀疑药品   药品名称:                            {$v.m_name}              --...
  • woshini_nishiwo
  • woshini_nishiwo
  • 2015年03月17日 09:59
  • 988

ThinkPHP+JQuery实现ajax无刷新登录验证(详解+相关问题)

ThinkPHP+JQuery实现ajax无刷新登录验证 摘要: 使用原生javascript进行ajax实现无刷新更改页面内容的复杂性尽人皆知,而jquery对ajax传递进行了封装和优化,因此通...
  • qq_20441521
  • qq_20441521
  • 2015年12月29日 01:31
  • 4181
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery注册
举报原因:
原因补充:

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