现在的位置: 首页 > 综合 > 正文

jquerymobile实例

2013年08月11日 ⁄ 综合 ⁄ 共 5373字 ⁄ 字号 小 中 大 ⁄ 评论关闭

转自：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>

技术有限，欢迎探讨。

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞