JQuery Mobile登录界面

前段时间看有人做的JQuery Mobile的界面很不错,认为移动的应用也会像桌面应用一样,慢慢的都走向WEB方式.

 

先贴出代码吧:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>LogIn</title>
  7. <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
  8. <link rel="stylesheet" href="jquery.mobile-1.0.1.min.css">
  9. <script src="jquery.js"></script>
  10. <script src="jquery.mobile-1.0.1.min.js"></script>
  11. <script type="text/javascript">
  12. jQuery(document).ready(function() {
  13. //输入事件
  14. $("input[id]").bind("focus",function () {
  15. if($(this).attr("id")=='username'||$(this).attr("id")=='password')
  16. $(this).attr("value","");
  17. });
  18. //提交
  19. $("#submit").bind("click", function() {
  20. if (valid()) {
  21. alert("获取的用户名为:"+$("#username").attr("value")+" 密码为:"+$("#password").attr("value"));
  22. var name = $("#username").attr("value");
  23. var passwd = $("#password").attr("value");
  24. $.ajax({
  25. type: "POST",
  26. url: "http://localhost/jqm/check.xml",
  27. data: $("form#loginform").serialize(),
  28. success: function(msg){
  29. $(msg).find('authUserResponse').each( function (i) {
  30. var login = $(this).children('return').text();
  31. alert(login);
  32. })
  33. /*if(msg=='success'){
  34. $.mobile.changePage("content/first.html","slidedown", true, true);
  35. }else{
  36. $.mobile.changePage("content/loginfalse.html","slidedown", true, true);
  37. }
  38. */
  39. }
  40. });
  41. }
  42. });
  43. });
  44. //输入信息验证
  45. function valid(){
  46. if($("#username").attr("value")==''||$("#password").attr("value")=='')
  47. {
  48. alert('用户名或密码不能为空!');
  49. //$.mobile.changePage("content/loginfalse.html","slidedown", true, true);
  50. return false;
  51. }
  52. return true;
  53. };
  54. </script>
  55. <style type="text/css">
  56. p {
  57. font-size: 1.5em;
  58. font-weight: bold;
  59. }
  60. #submit{
  61. float:center; margin:10px;
  62. }
  63. /*#toregist{
  64. float:left; margin:10px;
  65. }*/
  66. </style>
  67. <body>
  68. <!-- begin first page -->
  69. <section id="page1" data-role="page">
  70. <header data-role="header" data-theme="b" ><h1>XXXXXX移动平台</h1></header>
  71. <div data-role="content" class="content">
  72. <p style="backg"><font color="#2EB1E8" >登录</font></p>
  73. <form method="post" id="loginform">
  74. <input type="text" name="username" id="username" value="用户名"/><br>
  75. <input type="password" name="password" id="password" value="密码输入提示"/>
  76. <fieldset data-role="controlgroup" >
  77. <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
  78. <label for="checkbox-1">保持登录状态</label>
  79. </fieldset>
  80. <!--<a href="register.html" data-role="button" id="toregist" data-theme="e">注册</a>-->
  81. <a data-role="button" id="submit" data-theme="b">登录</a>
  82. </form>
  83. </div>
  84. <footer data-role="footer" ><h1>©2012 XXXX 学苑在线BBS</h1></footer>
  85. </section>
  86. <!-- end first page -->
  87. </body>

其中的那个check.xml文件如下:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <root>
  3. <authUserResponse>
  4. <return>true</return>
  5. </authUserResponse>
  6. </root>

大概就是介样子吧:

你可能感兴趣的:(jquery,mobile)