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 ...
随机推荐
- SSO（单点登录）
自己动手写SSO(单点登录) 标签: sso 登录 | 发表时间:2014-03-02 15:01 | 作者: 分享到: 出处:http://www.iteye.com SSO在我们的应用中非常常见, ...
- mysql - 行号
1. 初始化数据 - 列唯一 DROP TABLE IF EXISTS `sales`; CREATE TABLE `sales` ( `empid` ) NOT NULL, `mgrid` ) NO ...
- 通过xcode或xcodebuild进行打包
在实际应用中需要用到debug的安装包,所以决定自己学习一下打包,打包过程中遇到了各种问题,下面记录了一下我在打包中用到的步骤,当然我还有很多不明白的地方,如果有不对的地方,希望可以大家可以指出 ...
- Java NIO教程 文件系统
在NIO.2的文件系统中,Path是一切操作的基础.Path准确来说,代表着文件系统中的位置.可以代表一个目录(也就是通常所说的文件夹),也可以代表一个文件. 在新文件系统中,还有一个不得不说的就是F ...
- jquery mobile开发笔记之Ajax提交数据（转）
http://my.oschina.net/xiahuawuyu/blog/81763 这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容.可能之前有过web的开发基础,相对 ...
- 开发Android应用怎么更改LOGO图标
开发安卓应用怎么更改LOGO图标,我们知道我们开发安卓程序的时候,都需要给他整一个logo,一般开发程序都会自动一个图标,我们怎么给他更换自己想要的logo图标,之前大家看过我们写的怎么安装程序到虚拟 ...
- AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4
1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...
- python学习之——计算给出代码中注释、代码、空行的行数
题目:计算给出代码中注释.代码.空行的行数 来源:网络 思路:注释行以 ‘#’开头,空行以 ‘\n’ 开头,以此作为判断 def count_linenum(fname): fobj = open(f ...
- protocol buffers的使用示例[z]
[http://blog.csdn.net/zhu_xun/article/details/19397081] protocol buffers的使用示例 如果不了解protocol buffers, ...
- MSSERVER创建链接服务器
exec sp_addlinkedserver 'DB_RASS','','SQLOLEDB','127.0.0.1' ' exec sp_serveroption 'DB_RASS','rpc ou ...