jQueryMobile 登录、注册页面

原创 2016年08月30日 20:06:58

使用jQuery Mobile制作了一个登录注册页面,使用data-transition属性可以得到炫酷的切换效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <title>Title</title>
</head>
<body>
<!--登陆页面-->
<div data-role="page" id="pageLogin">

    <div data-role="header">
        <h1 role="heading">欢迎登陆</h1>
    </div>

    <div data-role="main" class="ui-content">
        <form method="get" action="">

            <div class="ui-field-contain">
                <label for="name">姓名:</label>

                <input type="text" name="name" id="name">

                <br/>

                <label for="password">密码:</label>

                <input type="password" name="password" id="password">
                <div style="margin-top: 20%;">
                    <a href="#pagetwo" data-role="button" data-transition="flow">登录</a>
                    <a href="#pagetwo" data-role="button" data-transition="flip">注册</a>
                </div>
            </div>

        </form>
    </div>

    <div data-role="footer" style="text-align: center"  data-position="fixed">
        <p>CopyRight &copy;koastal</p>
    </div>

</div>
<!--注册页面-->
<div data-role="page" id="pagetwo" data-theme="b">

    <div data-role="header">
        <h1>欢迎注册</h1>
    </div>

    <div data-role="main" class="ui-content">
        <form method="get" action="">

            <div class="ui-field-contain">
                <label for="Rname">姓名:</label>

                <input type="text" name="name" id="Rname">

                <br/>

                <label for="Rpassword">密码:</label>

                <input type="password" name="password" id="Rpassword">

                <br/>

                <label for="Repassword">重复密码:</label>

                <input type="password" name="password" id="Repassword">

                <div style="margin-top: 20%;">
                    <a href="#pageLogin" data-role="button" data-transition="flow" data-direction="reverse">确定</a>
                    <a href="#pageLogin" data-role="button" data-transition="flip" data-direction="reverse">登录</a>
                </div>
            </div>

        </form>
    </div>

    <div data-role="footer" style="text-align: center"  data-position="fixed">
        <p>CopyRight &copy;koastal</p>
    </div>

</div>

</body>
</html>

这里写图片描述
这里写图片描述

版权声明:转载请申明原文地址

相关文章推荐

jquery mobile两个页面以及源码(登录与注册)

先上图: 登录: 注册: 登录核心代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1...

jquery mobile两个页面以及源码(登录与注册)

注册: 登录核心代码: 01 script type="text/javascript"> 02 ...

注册网页完整案例(jQuery Mobile、validate表单验证、ajax或post、php)

jquery.validate表单验证完整案例 功能一:用户名检查是否存在(ajax、php方法取得) 功能二:自定义验证               1、字符串检查:只能包括中文字、英文...

jquery mobile中的表单验证

在jquery mobile中,在对某个表单的验证上,可以依然使用jquery-validation框架, 反正都是一家的,具体例子如下: 1)使用的js:    jquery.validate.m...

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

设计要点: 一.利用页头栏标识用户当前状态,可以在页头放置一个返回按钮 二.利用开关组件控制是否保存用户信息 三.前进的过渡效果采用:向左自然滑动,返回过渡采用:淡入淡出,用户体验更自然 四....

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

为应用增加登录功能 ruby on rails

ruby on rails 的应用,如何增加登录注册功能,本文就演示这个全过程

angularjs表单验证,包括密码长度及两次密码输入是否一致

angularjs表单验证,包括密码长度及两次密码输入是否一致 register
  • yhan219
  • yhan219
  • 2015年04月26日 22:06
  • 10470
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQueryMobile 登录、注册页面
举报原因:
原因补充:

(最多只允许输入30个字)