jquery mobile兩個頁面以及源碼（登陸與註冊） 轉

 

?

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 >