jQuery注册

最新推荐文章于 2024-07-26 20:46:33 发布

Sword_A

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量713

点赞数

文章标签： jquery function class javascript stylesheet border

本文链接：https://blog.csdn.net/yuluo727282752/article/details/7403887

版权

<!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>

Sword_A

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery注册

modal_form.html 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; }
复制链接

扫一扫