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 ...
随机推荐
- java 堆栈
堆栈(stack).位于通用RAM中,但通过它的“堆栈指针”可以从处理器哪里获得支持.堆栈指针若向下移动,则分配新的内存:若向上移动,则释放那些 内存.这是一种快速有效的分配存储方法,仅次于寄存器. ...
- MySql中的tinying,smallint,int,bigint的类型介绍——转载
tinyint 从 0 到 255 的整型数据.存储大小为 1 字节. smallint 从 -2^15 (-32,768) 到 2^15 – 1 (32,767) 的整型数据.存储大小为 2 个字节 ...
- 怎么提高ArcSDE 写入地理数据库的效率
link: http://blog.csdn.net/linghe301/article/details/20900615 2014-03-14 09:20 2686人阅读 评论(6) 收藏 举报 ...
- LoadRunner ---思考时间设置
用户访问某个网站或软件,一般不会不停地做个各种操作,例如一次查询,用户需要时间查看查询的结果是否是自己想要的.例如一次订单提交,用户需要时间核对自己填写的信息是否正确等. 也就是说用户在做某些操作时, ...
- new String（“a”）与String a="a";
String a=new String ("a"); String b=new String ("a"); //这是比较地址 System.out.printl ...
- asp.net GDI+绘制矩形渐变
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- E. Santa Claus and Tangerines 二分答案 + 记忆化搜索
http://codeforces.com/contest/752/problem/E 首先有一个东西就是,如果我要检测5,那么14我们认为它能产生2个5. 14 = 7 + 7.但是按照平均分的话, ...
- Selenium2+python自动化17-JS处理滚动条
前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候 ...
- haploview出现“more than two alleles”的解决方法
弹出“more than two alleles”的错误是因为ped文件中一个SNP位点上存在两个以上的等位基因,haploview连锁分析时默认为只有两个等位基因,因此我们要去掉超过两位等位基因的S ...
- python 基础理解...
class obj(object): def __getattribute__(self, *args, **kwargs): # 访问属性就会被调用 print("__getattribu ...