20151217jquery学习笔记--注册表单

<!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>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" href="css/smoothness/jquery.ui.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>


<div id="header">
	<div class="header_main">
		<h1>知问</h1>
		<div class="header_search">
			<input type="text" name="search" class="search" />
		</div>
		<div class="header_button">
			<button id="search_button">查询</button>
		</div>
		<div class="header_member">
			<a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
		</div>
	</div>
</div>


<div id="reg" title="会员注册">
    <p><label for="user">账号:</label>
	<input type="text" name="user" class="text"  id="user" title="请输入账号,不少于2位"/>
    <span class="star">*</span>
    </p>
    <p><label for="pass">密码:</label>
	<input type="password" name="pass" class="text"  id="pass" title="请输入密码,不少于6位"/>
    <span class="star">*</span>
    </p>
    <p><label for="email">邮箱:</label>
	<input type="text" name="email" class="text"  id="email" title="请输入正确的邮箱"/>
    <span class="star">*</span>
    </p>
    <p>
     <label>性别:</label>
     <input type="radio" name="sex" value="male" id="male" checked="checked"><label for="male">男</label></input>
     <input type="radio" name="sex" value="female" id="female"><label for="female">女</label></input>
    </p>
    <p><label for="date">生日:</label>
	<input type="text" name="date"  readonly="readonly"class="text"  id="date"/>
    </p>
</div>



</body>
</html>

  

$(function () {

	$('#search_button').button({
		
		label:'搜索',
		icons:{
			primary:'ui-icon-search',
			
			},
			
		});

	$('#reg').dialog({
		autoOpen:true,
		resizable:false,
		modal:true,
		width:320,
		height:340,
		buttons:{
			'提交':function(){
				
				}
			}
		});
	$('#reg').buttonset();
	$('#date').datepicker();
	$('#reg input[title]').tooltip();
});

  

posted @ 2015-12-17 20:09  破玉  阅读(190)  评论(0编辑  收藏  举报