关闭

jQueryMobile 登录、注册页面

3805人阅读 评论(0) 收藏 举报
分类:

使用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>

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

1
0
查看评论

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

先上图: 登录: 注册: 登录核心代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
  • wave_1102
  • wave_1102
  • 2015-01-11 23:09
  • 5631

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

设计要点: 一.利用页头栏标识用户当前状态,可以在页头放置一个返回按钮 二.利用开关组件控制是否保存用户信息 三.前进的过渡效果采用:向左自然滑动,返回过渡采用:淡入淡出,用户体验更自然 四.不使用页尾栏,给予用户更多空间感,使用页尾栏会导致用户感觉到狭窄。 ...
  • MIKUScallion
  • MIKUScallion
  • 2015-03-05 14:06
  • 4545

JQuery Mobile 弹出式登录框方法

Login Please sign in Username: Password: Sign ...
  • jiuyueguang
  • jiuyueguang
  • 2013-07-17 09:44
  • 11752

jQuery+ajax+php实现注册登录功能

含html代码,jquery代码,php代码
  • qq_29305911
  • qq_29305911
  • 2017-02-04 09:24
  • 5933

JQuery实现的登陆注册页面表单

一个用JQuery实现非常友好的登陆注册界面表单,可以学习一下,附上代码:需要引入JQuery库jquery-2.1.1.min.js<!DOCTYPE html> <html lang="zh"> <head> <meta charse...
  • wangxiaofei1993
  • wangxiaofei1993
  • 2016-10-15 16:35
  • 6548

jQuery实现弹出窗口中切换登录与注册表单

  • 2017-02-15 09:39
  • 52KB
  • 下载

jquery mobile注册登录例子

  • 2015-07-31 17:28
  • 168KB
  • 下载

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

注册: 登录核心代码: 01 script type="text/javascript"> 02      jQ...
  • liangyixin19800304
  • liangyixin19800304
  • 2014-03-15 17:16
  • 1022

jquery mobile登录注册

  • 2015-08-18 09:52
  • 168KB
  • 下载

用Html5和csss3做出漂亮的登录注册界面

用html5和css3切换登录注册界面 首先我们先创造两个HTML5 forms,那样我们可以利用css3进行设置,使用icon font,这个案例就是来展示如何连接两个form之间的切换。 HTML代码 Log in Your ...
  • z767327552
  • z767327552
  • 2017-02-06 22:04
  • 5928
    个人资料
    • 访问:204148次
    • 积分:3828
    • 等级:
    • 排名:第9958名
    • 原创:187篇
    • 转载:5篇
    • 译文:0篇
    • 评论:37条
    最新评论