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>




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

注册验证框(css+div+jquery)

效果不错的注册验证框      最近做项目需要用到注册这一模块,所以花了两天的时间手工css+div写了注册框,参考了不少网站,总算写完了,脚本使用的是jquery,验证方式采用正则表达式,写得比较...

JQuery实现的登陆注册页面表单

一个用JQuery实现非常友好的登陆注册界面表单,可以学习一下,附上代码:需要引入JQuery库jquery-2.1.1.min.js <meta n

jQuery基础教程之如何注册以及触发自定义事件

在不知道jquery中可以注册自定义事件之前,经常看到很多牛人写的插件中,有用到: bind(“originevent”,function(){…}); 由于当时不知道jquery中可以自定义事件...

jQuery+Ajax+Mysql 检测用户名注册时是否重名

利用jQuery框架,封装了底层的Ajax异步技术,通过简单的方法调用即可实现。这篇博客是针对用户注册时出现的用户名重名问题的自动检测,利用的技术是Ajax异步传输。register.jsp 注册显示...

从一个bug说jquery的事件注册和触发机制

问题描述同一域名下有两个页面parent.html,child.html。parent.html中通过iframe嵌入child.html。父页面触发自定义事件,子页面对其进行响应。 两页面代码如下...

Spring shiro + bootstrap + jquery.validate 登录、注册

之前的文章中我们已经搭建好框架,并且设计好了,数据库。 现在我们开始实现登录功能,这个可以说是Web应用最最最普遍的功能了。 先来说说我们登录的逻辑: 输入用户名、密码(validate进行前端...

手写注册页面,并实现验证信息(AJAX,Jquery,正则表达式,密码强度验证)

@{     Layout = null; }                    ...

jquery+jsp+servlet+ajax实现注册功能,ajax校验用户名、验证码等

注册样式很大众化 实现了以下功能: 用户名: jQuery实现:1、失去焦点校验输入是否为空及限制字符数然后显示Label;2、获得焦点后隐藏;3、ajax校验是否该用户名是否已存在于数据库 登录密码...

js+jquery注册信息的基本验证

$(function () { //当焦点移出txtUserName触发的事件 $('#txtUserName').blur(function ()...

jQuery注册表格(table)行(tr)点击选中checkbox事件

目的实现鼠标点击表格行元素,就可以选中所在行内的复选框,实现数据勾选效果。多用于管理系统中数据列表上。效果录制了一个简单的动画来呈现。 方法这里采用jQuery框架做实现,当然原生的js也可以实现,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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