jquerymobile实例

最新推荐文章于 2024-11-01 16:01:05 发布

原创最新推荐文章于 2024-11-01 16:01:05 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Android综合学习笔记专栏收录该内容

87 篇文章

订阅专栏

本文介绍了一个基于jQuery的微笔记登录与注册页面的实现细节，包括输入验证、AJAX提交等功能，并提供了完整的HTML与JavaScript代码。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

转自：http://www.oschina.net/question/101738_29271

登录核心代码：

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

注册核心代码：

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