最近项目需要，需要构建一个适合手持设备访问的站点，作者从网上查阅了一些资料，本文就是基于此而来。
首先下载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浏览器上的效果
接下来看看手机端的效果
