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

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

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

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

struts登录注册页面

上周我们学习了struts2+spring+mybetis之后,我们做了一个小小的登录注册项目。在接触了struts2之后,觉得做这个好方便啊。查询什么的代码都是写好的,我们不用在java里面写查询什...

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

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

php登录注册页面(新手)

php小白练手作业。代码有待完善。 需要完善的点: 1.我的验证码不能区分大小写,主要原因是不会将js中的数据传输到php中。 2.其中html部分是上学期写的代码,有些部分也还需要完善,有的地...

注册登录页面 (Java+MySQL)

    只用了5个类,包括  “连接数据库”,“注册页面”,“注册信息操作页面”,“登录页面”,“登录信息检查页面”。 注册和登录页面,我采用了BOX布局方式,因为我喜欢它的不随页面的大小改变...

bootstrap创建登录注册页面

用bootstrap做登入注册页面,使用validate做表单验证 技术:bootstrap,font-awesome,jquery-validate; 特点:响应式布局,表单验证(用户两次密码是否相...

简单的注册登录页面

1、register.html  用户注册页面表单 注册页面 function checkForm(){ var username = document.getElementById(...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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