本文隶属于分类

Web开发

广告推荐

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

标签:jquery mobile

设计要点:

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

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

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

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

技术分享

技术分享

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


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

标签:jquery mobile

原文:http://blog.csdn.net/mikuscallion/article/details/44081859

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

广告推荐

讨论区