jQuery Mobile + HTML5
最近项目需要，需要构建一个适合手持设备访问的站点，作者从网上查阅了一些资料，本文就是基于此而来。
首先下载jQuery Mobile http://jquerymobile.com/，选择稳定版即可。
打开VS 2013，新建一个Web Project，删除一些不必要的东西，如Default.aspx页面，添加对jQuery Mobile js和css的引用
新建一个HTML页面，并编码如下
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WMS - Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="Scripts/jquery.mobile-1.4.5.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="c">
<h1>
WMS</h1>
</div>
<!-- /header -->
<div role="main" class="ui-content">
<h3>
Sign In</h3>
<label for="userid">
User Id</label>
<input type="text" id="userid" name="userid">
<label for="password">
Password</label>
<input type="password" name="password" id="password">
<input type="button" id="login" value="Submit" role="button" />
</div>
<!-- /content -->
</div>
<!-- /page -->
<div data-role="dialog" id="dialog">
<div data-role="header" data-theme="d">
<h1>
Dialog</h1>
</div>
<div data-role="content" data-theme="c">
<h1>
Warning</h1>
<p>
Invalid user id or password</p>
<a href="Login.html" data-role="button" data-rel="back" data-theme="c">OK</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#login").click(function () {
var userid = $("#userid").val();
var password = $("#password").val();
$.ajax({
type: "POST",
contentType: "application/json",
url: "WMSWebService.asmx/Login",
data: "{userId:'" + userid + "',password:'" + password + "'}",
dataType: 'json',
success: function (result) {
if (result.d.length > 0) {
location.href = "Index.html";
} else {
location.href = "Login.html#dialog";
}
},
error: function () {
location.href = "Login.html#dialog";
}
});
});
})
</script>
</body>
</html>
其中一下代码标识此页面为HTML5页面
<!DOCTYPE html>
为了使用jQuery Mobile，引用如下
<title>WMS - Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="Scripts/jquery.mobile-1.4.5.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.4.5.js"></script>
然后你会发现，页面元素都被冠以data-role属性
<div data-role="page">
<div data-role="header" data-theme="c">
<div role="main" class="ui-content">
<div data-role="dialog" id="dialog">
其它HTML5的内容就不再赘述了
中间有一段javascript代码，用以异步调用（ajax异步调用示例）
<script type="text/javascript">
$(document).ready(function () {
$("#login").click(function () {
var userid = $("#userid").val();
var password = $("#password").val();
$.ajax({
type: "POST",
contentType: "application/json",
url: "WMSWebService.asmx/Login",
data: "{userId:'" + userid + "',password:'" + password + "'}",
dataType: 'json',
success: function (result) {
if (result.d.length > 0) {
location.href = "Index.html";
} else {
location.href = "Login.html#dialog";
}
},
error: function () {
location.href = "Login.html#dialog";
}
});
});
})
</script>
相关的后台Web Service如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data; namespace WMS
{
/// <summary>
/// Summary description for WMSWebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WMSWebService : System.Web.Services.WebService
{ [WebMethod]
public string HelloWorld()
{
return "Hello World";
} [WebMethod]
public string Login(string userId, string password)
{
string cmdText = "select * from tbl_sys_user where user_code = '" + userId + "'";
DataSet dtUser = DBHelper.ExecuteGetDataSet(cmdText);
if (dtUser != null && dtUser.Tables.Count > && dtUser.Tables[].Rows.Count > )
{
return userId;
}
return string.Empty;
}
}
}
这里的代码只是简单示例，规范、性能、写法不做讲究。
至此，一个适合手持设备访问的应用程序就可以了，发布至IIS后，看一下效果。
下面是电脑端Chrome浏览器上的效果
接下来看看手机端的效果
jQuery Mobile + HTML5的更多相关文章
- jQuery Mobile + HTML5 获取地理位置信息
这个代码也非常简单,核心是HTML5中GeoLocation API,函数原型定义如下: void getCurrentPosition(in PositionCallback successCa ...
- JQuery Mobile - html5+CSS 禁止IOS长按复制粘贴实现
因为在移动端APP需要实现长按执行别的事件,但是在IOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法.实际测试,也并不是很理想,但是可能没有更好办法了! / ...
- 用jQuery Mobile做HTML5移动应用的三个优缺点
JQuery Mobile 和 HTML5 的 3个优点 1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobi ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody
最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- HTML5+JS手机web开发之jQuery Mobile初涉
一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西, ...
- HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版
<HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站>以HTML与CSS为主,配合jQuery制作网页,并搭配jQueryMobile制作移动网页,通过具体的范例从基 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...
随机推荐
- VC++ 动态创建单个工具条,并加载外部的位图（bmp）文件为工具栏图像
步骤: 1, 在框架类CMainFrame头文件里,增加图像变量和工具条变量. CMFCToolBarImages m_UserImages; CMFCToolBar m_wndToolBar; 2, ...
- 何修改WAMP中mysql默认空密码--转
何修改WAMP中mysql默认空密码 http://www.cnblogs.com/hooray/archive/2011/07/23/2114792.html WAMP安装好后,mysql密码是为 ...
- (转载)selenium-webdriver(python)
转载地址: http://www.cnblogs.com/fnng/p/3183777.html 本节重点: 简单对象的定位 -----自动化测试的核心 对象的定位应该是自动化测试的核心,要想操作一个 ...
- 第三十三章 metrics（1） - graphite搭建 + whisper存储模式 + 高精度向低精度聚合方式 + 集成StatsD + 集成grafana
组件介绍: carbon:Carbon实际上是一系列守护进程,组成一个Graphite安装的存储后端.这些守护进程用一个名为Twisted的事件驱动网络引擎监听时间序列数据.Twisted框架让Car ...
- shell脚本学习（一）
Shell脚本最常用于系统管理工作,或者用于结合现有的程序以完成小型.特定的工作. Shell的特点有: 1. 简单性 2. 可移植性 3. 开发容易 [什么是shell] 简单点理解,就是系统跟计算 ...
- Verilog之电平检测
检测低电平为例 module detect_module ( CLK, RSTn, RX_Pin_In, H2L_Sig ); input CLK; input RSTn; input RX_Pin_ ...
- GNU M4 - GNU Project - 免费软件基金会(FSF)
-------------------------------------------------------------------------------------- GNU M4介绍: GNU ...
- C# HttpWebRequest与HttpWebResponse详解
C# HttpWebRequest与HttpWebResponse详解 http://www.codeproject.com/Articles/6554/How-to-use-HttpWebRequ ...
- FreeBSD_11-系统管理——{Part_6 - SYSCTL}
sysctl 常见参数 Name Type Changeable 示例 & 示意 kern.ostype string no FreeBSD kern.osrelease string no ...
- NSString 的 compare 方法
- (NSComparisonResult)compare:(NSString *)string options:(NSStringCompareOptions)mask range:(NSRange ...