前段时间看有人做的JQuery Mobile的界面很不错,认为移动的应用也会像桌面应用一样,慢慢的都走向WEB方式.
先贴出代码吧:
- <!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
<title>LogIn</title>
-
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
-
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css">
-
<script src="jquery.js"></script>
-
<script src="jquery.mobile-1.0.1.min.js"></script>
-
<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()) {
- alert("获取的用户名为:"+$("#username").attr("value")+" 密码为:"+$("#password").attr("value"));
-
var name = $("#username").attr("value");
-
var passwd = $("#password").attr("value");
- $.ajax({
- type: "POST",
- url: "http://localhost/jqm/check.xml",
- data: $("form#loginform").serialize(),
- success: function(msg){
- $(msg).find('authUserResponse').each( function (i) {
-
var login = $(this).children('return').text();
- alert(login);
- })
-
/*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")=='')
- {
- alert('用户名或密码不能为空!');
- //$.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:center; margin:10px;
- }
- /*#toregist{
- float:left; margin:10px;
- }*/
-
</style>
-
<body>
-
-
<section id="page1" data-role="page">
-
<header data-role="header" data-theme="b" ><h1>XXXXXX移动平台</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 data-role="button" id="submit" data-theme="b">登录</a>
-
</form>
-
</div>
-
<footer data-role="footer" ><h1>©2012 XXXX 学苑在线BBS</h1></footer>
-
</section>
-
-
</body>
其中的那个check.xml文件如下:
- <?xml version="1.0" encoding="UTF-8"?>
-
<root>
-
<authUserResponse>
-
<return>true</return>
-
</authUserResponse>
-
</root>
大概就是介样子吧:
![](http://www.hbcfg.net/wp-content/uploads/2012/03/login.png)
分享到:
相关推荐
jquery mobile界面数据刷新jquery mobile界面数据刷新
jQuery Mobile 是一个轻量级的、基于 jQuery 库的框架,专为移动设备上的网页应用设计,它提供了丰富的用户界面(UI)组件和交互效果,让开发者能够快速构建响应式和触控友好的Web应用程序。这个资源包以“Hello ...
在IT行业中,jQuery Mobile是一种广泛使用的前端框架,它专门用于构建响应式和触屏友好的移动Web应用。jQuery Mobile提供了一系列的UI组件和交互效果,其中包括我们今天要讨论的主题——相册样式。在这个主题下,...
这个资源包含了多套jQuery Mobile模板,它们是预先设计好的界面布局,可以帮助初学者快速入门。每套模板都展示了不同的设计风格和功能组合,比如: 1. **基础模板**:包含最简单的页面结构,适合学习jQuery Mobile...
jQuery Mobile 是一个广泛使用的框架,特别适合于移动设备和桌面浏览器。它允许开发者使用HTML5、CSS3和JavaScript来创建响应式网页应用。这个框架之所以在移动开发中受到青睐,是因为它可以将现有的网页转换成触摸...
jQuery Mobile 提供了预定义的样式和布局结构,用于创建美观的登录界面。在这个例子中,我们可以看到如何利用`<form>`元素配合`<input type="text">`(用户名)和`<input type="password">`(密码)来创建输入框,...
在本文中,我们将深入探讨如何使用jQuery Mobile来创建功能丰富的登录、修改和注册界面,以满足你的期末大作业需求。jQuery Mobile是一个强大的前端框架,它为HTML5开发提供了丰富的交互性和移动设备兼容性,使...
jQuery Mobile相册是一种基于jQuery Mobile框架的移动应用组件,它为用户提供了一种优雅的方式来展示和浏览图片集,尤其适用于移动设备。jQuery Mobile是jQuery库的一个分支,专为触摸设备优化,提供了一套完整的UI...
《jQuery Mobile Datepicker:手机端日期选择器深度解析》 在移动应用开发中,日期选择器是一个不可或缺的组件,它提供了用户友好的界面,让用户能够方便地选择日期。jQuery Mobile Datepicker 是一个专为手机端...
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
《jQuery Mobile:构建优雅移动端界面的深度探索》 在当今移动设备盛行的时代,为手机和平板电脑设计用户友好的交互界面至关重要。jQuery Mobile作为一个强大的框架,致力于简化移动应用和网站的开发过程,提供了...
《jQuery Mobile实战》源码分析 jQuery Mobile 是一个流行的前端框架,专为移动设备设计,旨在简化移动Web应用的开发。这个源码包提供了一手的学习资料,让我们深入理解jQuery Mobile的工作原理及其在实际项目中的...
jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI...
接下来是图标相关的CSS文件,例如`jquery.mobile.icons-1.4.1.css`,它包含了jQuery Mobile内置的一系列图标,方便开发者在界面上使用。`jquery.mobile.icons-1.4.1.min.css`同样是压缩版,提高了加载速度。此外,...
### jQuery Mobile 快速入门知识点概述 #### 一、jQuery Mobile 概述 - **定义与背景**:jQuery Mobile 是一款流行的开源 JavaScript 库,它主要用于构建响应式的 Web 应用程序,支持触摸操作,兼容多种移动设备。...
通过使用HTML5和CSS3,jQuery Mobile提供了一套统一的用户界面(UI)组件和交互模式,使得开发者可以快速创建功能丰富的移动网页和应用。 二、官方文档与示例 “jquery mobile官方git资源”中包含的官方文档是学习...
1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上,如果您了解 jQuery,您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 ...
jQuery Mobile 是一个轻量级、触控优化的前端框架,专为移动设备设计,它提供了一整套构建移动Web应用程序的组件。在这个“jQuery mobile滑动式的标题导航”主题中,我们将深入探讨如何利用jQuery Mobile创建动态且...
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
jQuery Mobile 是一个轻量级、触控优化的 JavaScript 框架,专为移动设备上的 Web 应用程序设计。它构建在 jQuery 和 jQuery UI 的基础之上,提供了一套完整的组件和接口,用于创建响应式、触摸友好的移动界面。在 ...