`
510120804
  • 浏览: 30930 次
  • 性别: Icon_minigender_1
  • 来自: 襄阳
社区版块
存档分类
最新评论

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界面数据刷新

    jquery mobile界面数据刷新jquery mobile界面数据刷新

    jQuery Mobile 所需要的部署文件

    jQuery Mobile 是一个轻量级的、基于 jQuery 库的框架,专为移动设备上的网页应用设计,它提供了丰富的用户界面(UI)组件和交互效果,让开发者能够快速构建响应式和触控友好的Web应用程序。这个资源包以“Hello ...

    jQuery mobile相册的一种样式

    在IT行业中,jQuery Mobile是一种广泛使用的前端框架,它专门用于构建响应式和触屏友好的移动Web应用。jQuery Mobile提供了一系列的UI组件和交互效果,其中包括我们今天要讨论的主题——相册样式。在这个主题下,...

    jQueryMobile-HTML5模板

    这个资源包含了多套jQuery Mobile模板,它们是预先设计好的界面布局,可以帮助初学者快速入门。每套模板都展示了不同的设计风格和功能组合,比如: 1. **基础模板**:包含最简单的页面结构,适合学习jQuery Mobile...

    Jquery mobile 从设计到开发

    jQuery Mobile 是一个广泛使用的框架,特别适合于移动设备和桌面浏览器。它允许开发者使用HTML5、CSS3和JavaScript来创建响应式网页应用。这个框架之所以在移动开发中受到青睐,是因为它可以将现有的网页转换成触摸...

    jquerymobile设计完整例子

    jQuery Mobile 提供了预定义的样式和布局结构,用于创建美观的登录界面。在这个例子中,我们可以看到如何利用`&lt;form&gt;`元素配合`&lt;input type="text"&gt;`(用户名)和`&lt;input type="password"&gt;`(密码)来创建输入框,...

    jquery mobile 完成登录、修改、注册界面设计

    在本文中,我们将深入探讨如何使用jQuery Mobile来创建功能丰富的登录、修改和注册界面,以满足你的期末大作业需求。jQuery Mobile是一个强大的前端框架,它为HTML5开发提供了丰富的交互性和移动设备兼容性,使...

    jQuery mobile相册

    jQuery Mobile相册是一种基于jQuery Mobile框架的移动应用组件,它为用户提供了一种优雅的方式来展示和浏览图片集,尤其适用于移动设备。jQuery Mobile是jQuery库的一个分支,专为触摸设备优化,提供了一套完整的UI...

    jquery mobile datepicker 手机端日期选择器

    《jQuery Mobile Datepicker:手机端日期选择器深度解析》 在移动应用开发中,日期选择器是一个不可或缺的组件,它提供了用户友好的界面,让用户能够方便地选择日期。jQuery Mobile Datepicker 是一个专为手机端...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jquerymobile制作的各种漂亮界面源代码

    《jQuery Mobile:构建优雅移动端界面的深度探索》 在当今移动设备盛行的时代,为手机和平板电脑设计用户友好的交互界面至关重要。jQuery Mobile作为一个强大的框架,致力于简化移动应用和网站的开发过程,提供了...

    jQuery Mobile实战源码

    《jQuery Mobile实战》源码分析 jQuery Mobile 是一个流行的前端框架,专为移动设备设计,旨在简化移动Web应用的开发。这个源码包提供了一手的学习资料,让我们深入理解jQuery Mobile的工作原理及其在实际项目中的...

    jQuery Mobile API文档

    jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI...

    jquery mobile 1.4.1版

    接下来是图标相关的CSS文件,例如`jquery.mobile.icons-1.4.1.css`,它包含了jQuery Mobile内置的一系列图标,方便开发者在界面上使用。`jquery.mobile.icons-1.4.1.min.css`同样是压缩版,提高了加载速度。此外,...

    jQuery Mobile快速入门.pdf

    ### jQuery Mobile 快速入门知识点概述 #### 一、jQuery Mobile 概述 - **定义与背景**:jQuery Mobile 是一款流行的开源 JavaScript 库,它主要用于构建响应式的 Web 应用程序,支持触摸操作,兼容多种移动设备。...

    jquery mobile官方git资源

    通过使用HTML5和CSS3,jQuery Mobile提供了一套统一的用户界面(UI)组件和交互模式,使得开发者可以快速创建功能丰富的移动网页和应用。 二、官方文档与示例 “jquery mobile官方git资源”中包含的官方文档是学习...

    jQuery Mobile参考手册

    1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上,如果您了解 jQuery,您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 ...

    jQuery mobile滑动式的标题导航

    jQuery Mobile 是一个轻量级、触控优化的前端框架,专为移动设备设计,它提供了一整套构建移动Web应用程序的组件。在这个“jQuery mobile滑动式的标题导航”主题中,我们将深入探讨如何利用jQuery Mobile创建动态且...

    Jquery Mobile 帮助手册

    jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

    jQuery mobile图片截图

    jQuery Mobile 是一个轻量级、触控优化的 JavaScript 框架,专为移动设备上的 Web 应用程序设计。它构建在 jQuery 和 jQuery UI 的基础之上,提供了一套完整的组件和接口,用于创建响应式、触摸友好的移动界面。在 ...

Global site tag (gtag.js) - Google Analytics