jquery mobile實(shí)例---實(shí)例、登錄與注冊的實(shí)現(xiàn)、簡介美觀
來源：程序員人生 發(fā)布時(shí)間：2015-03-26 09:06:03 閱讀次數(shù)：3726次
設(shè)計(jì)要點(diǎn)：
1.利用頁頭欄標(biāo)識用戶當(dāng)前狀態(tài)，可以在頁頭放置1個(gè)返回按鈕
2.利用開關(guān)組件控制是不是保存用戶信息
3.前進(jìn)的過渡效果采取：向左自然滑動，返回過渡采取：淡入淡出，用戶體驗(yàn)更自然
4.不使用頁尾欄，給予用戶更多空間感，使用頁尾欄會致使用戶感覺到狹窄。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf⑻"/>
<link rel="stylesheet" href="
jquery.mobile⑴.4.2.min.css">
<script src="
jquery⑴.10.2.min.js"></script>
<script src="
jquery.mobile⑴.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="header">
<h1>用戶登錄</h1>
</div>
<div data-role="content">
<form method="post" action="#">
<div data-role="fieldcontain">
<input type="text" name="username" id="username" placeholder="用戶名">
<input type="password" name="password" id="password" placeholder="密碼">
<select name="switch" id="switch" data-role="slider">
<option value="on">保存</option>
<option value="off">不保存</option>
</select>
<input type="submit" data-role="button" value="登錄">
</div>
</form>
<p>沒有賬號？<a href="#register" data-transition="slide">點(diǎn)擊注冊</a></p>
</div>
</div>
<div data-role="page" id="register">
<div data-role="header">
<a href="#login" data-role="button" data-icon="back" data-transition="fade">返回</a>
<h1>用戶注冊</h1>
</div>
<div data-role="content">
<form method="post" action="#">
<div data-role="fieldcontain">
<input type="text" name="username" id="username" placeholder="用戶名">
<input type="password" name="password" id="password" placeholder="密碼">
<input type="password" id="repassword" placeholder="確認(rèn)密碼">
<input type="email" name="email" id="email" placeholder="郵箱">
<input type="submit" data-role="button" value="注冊">
</div>
</form>
</div>
</div>
</body>
</html>
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
