最近项目需要，需要构建一个适合手持设备访问的站点，作者从网上查阅了一些资料，本文就是基于此而来。
首先下载jQuery Mobile http://jquerymobile.com/，选择稳定版即可。
打开VS 2013，新建一个Web Project，删除一些不必要的东西，如Default.aspx页面，添加对jQuery Mobile js和css的引用
新建一个HTML页面，并编码如下
<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>WMS - Login</title><metaname="viewport"content="width=device-width, initial-scale=1"/><linkrel="stylesheet"href="Scripts/jquery.mobile-1.4.5.css"/><scripttype="text/javascript"src="Scripts/jquery-1.7.1.js"></script><scripttype="text/javascript"src="Scripts/jquery.mobile-1.4.5.js"></script></head><body><divdata-role="page"><divdata-role="header"data-theme="c"><h1>WMS</h1></div><!--/header--><divrole="main"class="ui-content"><h3>Sign In</h3><labelfor="userid">User Id</label><inputtype="text"id="userid"name="userid"><labelfor="password">Password</label><inputtype="password"name="password"id="password"><inputtype="button"id="login"value="Submit"role="button"/></div><!--/content--></div><!--/page--><divdata-role="dialog"id="dialog"><divdata-role="header"data-theme="d"><h1>Dialog</h1></div><divdata-role="content"data-theme="c"><h1>Warning</h1><p>Invalid user id or password</p><ahref="Login.html"data-role="button"data-rel="back"data-theme="c">OK</a></div></div><scripttype="text/javascript">$(document).ready(function() {
$("#login").click(function() {varuserid=$("#userid").val();varpassword=$("#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><metaname="viewport"content="width=device-width, initial-scale=1"/><linkrel="stylesheet"href="Scripts/jquery.mobile-1.4.5.css"/><scripttype="text/javascript"src="Scripts/jquery-1.7.1.js"></script><scripttype="text/javascript"src="Scripts/jquery.mobile-1.4.5.js"></script>
然后你会发现，页面元素都被冠以data-role属性
<divdata-role="page"><divdata-role="header"data-theme="c"><divrole="main"class="ui-content"><divdata-role="dialog"id="dialog">
其它HTML5的内容就不再赘述了
中间有一段javascript代码，用以异步调用（ajax异步调用示例）
<script type="text/javascript">$(document).ready(function() {
$("#login").click(function() {varuserid = $("#userid").val();varpassword = $("#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如下
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.Services;usingSystem.Data;namespaceWMS
{///<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]publicclassWMSWebService : System.Web.Services.WebService
{
[WebMethod]publicstringHelloWorld()
{return"Hello World";
}
[WebMethod]publicstringLogin(stringuserId,stringpassword)
{stringcmdText ="select * from tbl_sys_user where user_code = '"+ userId +"'";
DataSet dtUser=DBHelper.ExecuteGetDataSet(cmdText);if(dtUser !=null&& dtUser.Tables.Count >0&& dtUser.Tables[0].Rows.Count >0)
{returnuserId;
}returnstring.Empty;
}
}
}
这里的代码只是简单示例，规范、性能、写法不做讲究。
至此，一个适合手持设备访问的应用程序就可以了，发布至IIS后，看一下效果。
下面是电脑端Chrome浏览器上的效果
接下来看看手机端的效果
