jquery mobile两个页面以及源码（登录与注册）

最新推荐文章于 2024-07-14 03:38:16 发布

网络全息测量

最新推荐文章于 2024-07-14 03:38:16 发布

阅读量2.9k

点赞数

分类专栏： JQuery Mobile

JQuery Mobile 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

登录核心代码：

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

注册核心代码：

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