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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script type="text/javascript">
     jQuery(document).ready(function() {
        //输入事件
        $("input[id]").bind("focus",function () {
        if($(this).attr("id")=='username'||$(this).attr("id")=='password')
        $(this).attr("value","");
        });
        //提交
        $("#submit").bind("click", function() {
              if (valid()) {
                $.ajax({
                   type: "POST",
                   url: "http://localhost:8080/note/servlet/Login",
                   data: $("form#loginform").serialize(),
                   success: function(msg){
                     if(msg=='success'){
                        $.mobile.changePage("content/first.html","slidedown", true, true);
                     }else{
                        $.mobile.changePage("content/loginfalse.html","slidedown", true, true);
                     }
                      
                   }
                });
              }
            });
        });
        //输入信息验证
        function valid(){
            if($("#username").attr("value")==''||$("#password").attr("value")=='')
            {
                $.mobile.changePage("content/loginfalse.html","slidedown", true, true);
                return false;          
            }
            return true;
        };
    </script>
     
    <style type="text/css">
    p {
        font-size: 1.5em;
        font-weight: bold;
    }
    #submit{
        float:right; margin:10px;
    }
    #toregist{
        float:left; margin:10px;
    }
    </style>
<body>
 
<!-- begin first page -->
<section id="page1" data-role="page">
  <header data-role="header"  data-theme="b" ><h1>开始笔记之旅</h1></header>
  <div data-role="content" class="content">
    <p style="backg"><font color="#2EB1E8" >登录微笔记</font></p>
        <form method="post" id="loginform">
            <input type="text" name="username" id="username" value="用户名"/><br>
            <input type="password" name="password" id="password" value="密码输入提示"/>
                    <fieldset data-role="controlgroup" >
                        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                        <label for="checkbox-1">保持登录状态</label>
                    </fieldset>
            <a href="content/regist.html" data-role="button" id="toregist" data-theme="e">注册</a>
            <a data-role="button" id="submit" data-theme="b">登录</a>
        </form>
  </div>
  <footer data-role="footer" ><h1>©2011 TinyNote 微笔记社区(movingcomputing.com)</h1></footer>
</section>
<!-- end first page -->
 
 
 
</body>

注册核心代码：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script type="text/javascript">
     jQuery(document).ready(function() {
        //输入事件
        $("input[id]").bind("focus",function () {
        if($(this).attr("value")=='用户名'||$(this).attr("value")=='密码')
        $(this).attr("value","");
        });
        //提交
        $("#regist").bind("click", function() {
              if (true) {
                $.ajax({
                   type: "POST",
                   url: "http://localhost:8080/note/servlet/Login",
                   data: $("form#loginform").serialize(),
                   success: function(msg){
                     if(msg=='success'){
                        $.mobile.changePage("../content/first.html","slidedown", true, true);
                     }else{
                        $.mobile.changePage("../content/loginfalse.html","slidedown", true, true);
                     }
                      
                   }
                });
              }
            });
        });
    </script>
     
    <style type="text/css">
    p {
        font-size: 1.5em;
        font-weight: bold;
    }
    header div{
        font-size: 1.5em;
    }
    #regist{
        width:150px;
        height:50px;
        margin :5px;
    }
    </style>
     
<body>
 
<!-- begin first page -->
<section data-role="page">
  <header data-role="header"  data-theme="b"  data-type="horizontal">
    <div data-role="controlgroup" >
        <nav data-role="navbar">
            <ul>
                <li><a href="#page1" class="ui-btn-active">注册微笔记</a></li>
                <li><a href="#page2">用手机号注册</a></li>
            </ul>
         </nav>
    </div>
  </header>
  <div data-role="content" class="content">
        <form method="post" id="registform">
        <label for="email">邮 箱</label>
        <input type="text" name="email" id="email"/>
        <label for="password">密 码</label>
        <input type="password" name="password" id="password"/>
        <label for="nicky">昵 称</label>
        <input type="text" name="nicky" id="nicky"/>
        <fieldset data-role="controlgroup">
            <legend>身 份:</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
            <label for="radio-choice-1">上班族</label>
 
            <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
            <label for="radio-choice-2">大学生</label>
 
            <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
            <label for="radio-choice-3">其他</label>
        </fieldset>
            <center>
                <a data-role="button" id="regist" data-theme="e">立即注册</a>
            </center>
        </form>
  </div>
</section>
<!-- end first page -->
</body>

登录核心代码：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script type="text/javascript">
     jQuery(document).ready(function() {
        //输入事件
        $("input[id]").bind("focus",function () {
        if($(this).attr("id")=='username'||$(this).attr("id")=='password')
        $(this).attr("value","");
        });
        //提交
        $("#submit").bind("click", function() {
              if (valid()) {
                $.ajax({
                   type: "POST",
                   url: "http://localhost:8080/note/servlet/Login",
                   data: $("form#loginform").serialize(),
                   success: function(msg){
                     if(msg=='success'){
                        $.mobile.changePage("content/first.html","slidedown", true, true);
                     }else{
                        $.mobile.changePage("content/loginfalse.html","slidedown", true, true);
                     }
                      
                   }
                });
              }
            });
        });
        //输入信息验证
        function valid(){
            if($("#username").attr("value")==''||$("#password").attr("value")=='')
            {
                $.mobile.changePage("content/loginfalse.html","slidedown", true, true);
                return false;          
            }
            return true;
        };
    </script>
     
    <style type="text/css">
    p {
        font-size: 1.5em;
        font-weight: bold;
    }
    #submit{
        float:right; margin:10px;
    }
    #toregist{
        float:left; margin:10px;
    }
    </style>
<body>
 
<!-- begin first page -->
<section id="page1" data-role="page">
  <header data-role="header"  data-theme="b" ><h1>开始笔记之旅</h1></header>
  <div data-role="content" class="content">
    <p style="backg"><font color="#2EB1E8" >登录微笔记</font></p>
        <form method="post" id="loginform">
            <input type="text" name="username" id="username" value="用户名"/><br>
            <input type="password" name="password" id="password" value="密码输入提示"/>
                    <fieldset data-role="controlgroup" >
                        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                        <label for="checkbox-1">保持登录状态</label>
                    </fieldset>
            <a href="content/regist.html" data-role="button" id="toregist" data-theme="e">注册</a>
            <a data-role="button" id="submit" data-theme="b">登录</a>
        </form>
  </div>
  <footer data-role="footer" ><h1>©2011 TinyNote 微笔记社区(movingcomputing.com)</h1></footer>
</section>
<!-- end first page -->
 
 
 
</body>

注册核心代码：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script type="text/javascript">
     jQuery(document).ready(function() {
        //输入事件
        $("input[id]").bind("focus",function () {
        if($(this).attr("value")=='用户名'||$(this).attr("value")=='密码')
        $(this).attr("value","");
        });
        //提交
        $("#regist").bind("click", function() {
              if (true) {
                $.ajax({
                   type: "POST",
                   url: "http://localhost:8080/note/servlet/Login",
                   data: $("form#loginform").serialize(),
                   success: function(msg){
                     if(msg=='success'){
                        $.mobile.changePage("../content/first.html","slidedown", true, true);
                     }else{
                        $.mobile.changePage("../content/loginfalse.html","slidedown", true, true);
                     }
                      
                   }
                });
              }
            });
        });
    </script>
     
    <style type="text/css">
    p {
        font-size: 1.5em;
        font-weight: bold;
    }
    header div{
        font-size: 1.5em;
    }
    #regist{
        width:150px;
        height:50px;
        margin :5px;
    }
    </style>
     
<body>
 
<!-- begin first page -->
<section data-role="page">
  <header data-role="header"  data-theme="b"  data-type="horizontal">
    <div data-role="controlgroup" >
        <nav data-role="navbar">
            <ul>
                <li><a href="#page1" class="ui-btn-active">注册微笔记</a></li>
                <li><a href="#page2">用手机号注册</a></li>
            </ul>
         </nav>
    </div>
  </header>
  <div data-role="content" class="content">
        <form method="post" id="registform">
        <label for="email">邮 箱</label>
        <input type="text" name="email" id="email"/>
        <label for="password">密 码</label>
        <input type="password" name="password" id="password"/>
        <label for="nicky">昵 称</label>
        <input type="text" name="nicky" id="nicky"/>
        <fieldset data-role="controlgroup">
            <legend>身 份:</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
            <label for="radio-choice-1">上班族</label>
 
            <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
            <label for="radio-choice-2">大学生</label>
 
            <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
            <label for="radio-choice-3">其他</label>
        </fieldset>
            <center>
                <a data-role="button" id="regist" data-theme="e">立即注册</a>
            </center>
        </form>
  </div>
</section>
<!-- end first page -->
</body>

jquery mobile两个页面以及源码（登录与注册） 转的更多相关文章

  1. Python3.x：selenium获取iframe内嵌页面的源码

    Python3.x:selenium获取iframe内嵌页面的源码 前言 在一些网页中经常会看到ifrmae/frame标签,iframe是嵌入式框架一般用来在已有的页面中嵌入另一个页面,当一个元素在 ...

  2. jQuery 2.1.4版本的源码分析

    jQuery 2.1.4版本的源码分析 jquery中获取元素的源码分析 jQuery.each({// 获取当前元素的父级元素 parent: function(elem) { var parent ...

  3. 30、[源码]-AOP原理-注册AnnotationAwareAspectJAutoProxyCreavi

    30.[源码]-AOP原理-注册AnnotationAwareAspectJAutoProxyCreavi

  4. jQuery实现DOM加载方法源码分析

    传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... }  但 ...

  5. 一个基于jQuery写的弹窗效果(附源码)

    最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己 ...

  6. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  7. 第二十四课：jQuery.event.remove，dispatch的源码解读

    本课还是来讲解一下jQuery是如何实现它的事件系统的.这一课我们先来讲一下jQuery.event.remove的源码解读. remove方法的目的是,根据用户传参,找到事件队列,从里面把匹配的ha ...

  8. 第二十三课：jQuery.event.add的原理以及源码解读

    本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...

  9. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

随机推荐

  1. Python学习笔记_week1

    一.编程语言的分类 编译型和解释型.静态语言和动态语言.强类型定义语言和弱类型定义语言,Python是一门动态解释型的强类型定义语言. Python的优缺点 Python解释器:CPython.IPy ...

  2. .Net 上传文件和下载文件

    一.上传文件 1.普通的form表单提交 注意点: 请求方式必须为Post. form表单里必须设置enctype属性(enctype = "multipart/form-data" ...

  3. 12. myeclipse遇到Initializing java tooling（1%）终极解决办法

    问题描述: 打开myeclipse,发现myeclipse宕掉了,并且出现这样的提示:关于Initializing java tooling(1%)... 解决方案: 找到eclipse目录,编辑ec ...

  4. 转载：用Source Insight中看Python代码

    在Source Insight中看Python代码 http://blog.csdn.net/lvming404/archive/2009/03/18/4000394.aspx SI是个很强大的代码查 ...

  5. centos7.5安装golang

    1.下载 [root@localhost bin]#wget https://dl.google.com/go/go1.10.2.linux-amd64.tar.gz [root@localhost ...

  6. 06-padding(内边距)

    padding padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容的颜色一样.也就是说background-color这个属性将填充 ...

  7. jsfl完成通知air

    jsfl完成后生成一个文本A.txt, air开始jsfl执行后一直检测A.txt是否存在,存在就是完成了.那么就可以删除这个A.txt

  8. UI5-学习篇-7-Postman测试SAP OData Services

    1.Postman简介 用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具. postman ...

  9. NSTimer内存泄漏

    用NSTimer调用 timer = [NSTimer scheduledTimerWithTimeInterval:timerInterval target:self selector:@selec ...

  10. css：关于position和float

    在CSS中,我们是通过定位属性position来进行定位的,具体它有如下几个属性值.常见的属性有如下几个: absolute  生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位.元 ...