您的位置：首页 > Web前端 > JQuery

jquery mobile实例---实例、登录与注册的实现、简介美观

2015-03-05 14:06 821 查看

设计要点：

一.利用页头栏标识用户当前状态，可以在页头放置一个返回按钮

二.利用开关组件控制是否保存用户信息

三.前进的过渡效果采用：向左自然滑动，返回过渡采用：淡入淡出，用户体验更自然

四.不使用页尾栏，给予用户更多空间感，使用页尾栏会导致用户感觉到狭窄。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="jquery.mobile-1.4.2.min.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.mobile-1.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">点击注册</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="确认密码">
<input type="email" name="email" id="email" placeholder="邮箱">
<input type="submit" data-role="button" value="注册">
</div>
</form>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航