最近項目需要，需要構建一個適合手持設備訪問的站點，作者從網上查閱了一些資料，本文就是基於此而來。
首先下載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 > 0 && dtUser.Tables[0].Rows.Count > 0) { return userId; } return string.Empty; } } }
這里的代碼只是簡單示例，規范、性能、寫法不做講究。
至此，一個適合手持設備訪問的應用程序就可以了，發布至IIS后，看一下效果。
下面是電腦端Chrome瀏覽器上的效果
接下來看看手機端的效果
