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 ...
随机推荐
- 调用百度地图API的应用混淆后出问题
1 混淆后出问题,程序异常退出 在proguard-project.txt中添加 -libraryjars libs/BaiduLBS_Android.jar -keep class com.baid ...
- keyup keydown keypress 区别
测试的浏览器环境: chrome 版本 43.0.2357.134 mfirefox 版本 24.0IE6(绿色版 IE.exe)IE7IE8IE9 搜狗拼音输入法3.5(3.5.0.1089)网吧专 ...
- switch（面试）
public static void Output() { ; ) { i--; switch (i) { : Console.WriteLine(i.ToString()); break; : Co ...
- Rstudio代码的快捷键
按tab键:有自动补全的功能 Ctrl+Enter:运行改行代码 Ctrl+1: 移动焦点到source编辑区 Ctrl+2: 移动焦点到控制台 Ctrl+enter Ctrl+L:删除该控制台的所有 ...
- android项目中使用开源数据库litepal
下载地址 https://github.com/LitePalFramework/LitePal 参考文档 http://blog.csdn.net/guolin_blog/article/detai ...
- 安全关闭多Activity的Application
1.发送广播给每一个打开的Activity. 2.采用startActivityForResult()方法递归关闭. 3.使用EventBus框架的监听者模式,关闭时触发监听事件.
- eclipse插件egit安装使用
转载http://blog.csdn.net/zhangdaiscott/article/details/16939165 安装问题解决: 1 Cannot complete the install ...
- How to Use JUnit With JMeter
Do you need to use JUnit in your testing processes? To answer this question, let's take a look first ...
- java动态加载类和静态加载类笔记
JAVA中的静态加载类是编译时刻加载类 动态加载类指的是运行时刻加载类 二者有什么区别呢 举一个例子 现在我创建了一个类 实现的功能假设为通过传入的参数调用具体的类和方法 class offic ...
- [JS]应用splice删除多元素时出现的坑
------------------------------------------------------------------------------------- 先看一个片段: var fr ...