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. Maven项目指定JDK版本

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  2. Angular.js入门

    一.引入angular.js  <script type="text/javascript" src="../plugins/angularjs/angular.m ...

  3. Flex NumberFormatter 数值的格式化

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  4. JS 对象（对象遍历，拷贝）

     定义属性 直接 obj.对象 的方法 Object.defineProperty(obj, prop, descriptor) ,这种方法可以设置 或者修改对象属性的访问权限 数据描述符和存取描述符 ...

  5. Vue.js Failed to resolve filter: key

    转自:https://stackoverflow.com/questions/35835214/vue-js-failed-to-resolve-filter-key I am following t ...

  6. Linux命令:chown

    Linux命令:chmod https://baijiahao.baidu.com/s?id=1616750933810368135&wfr=spider&for=pc chmod - ...

  7. Linux命令：unzip

    语法: unzip [-Z] [-opts[modifiers]] file[.zip] [list] [-x xlist] [-d exdir] 默认行为将zip文件中的内容全部解压缩到当前目录下. ...

  8. C++中 int i 与 int &i 注意事项

    来源:http://blog.csdn.net/qianchenglenger/article/details/16949689 1.int i 传值,int & i 传引用 int i不会回 ...

  9. 23.网络.md

    目录 1.基本概念 2.常用函数 3.端口 4.协议 4.1.2代码步骤 4.1.3UDPDemo 4.1.4通信格式 4.1.5 群发Demo: 4.1.6丢失数据的情况 4.2TCP 4.2.1三 ...

  10. @PathVariable 与@RequestParam

    http://localhost:8080/Springmvc/user/page.do?pageSize=3&pageNow=2 你可以把这地址分开理解,其中问号前半部分:http://lo ...