註冊：
登錄核心代碼：
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> |
技術有限，歡迎探討。
