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 - Logintitle> 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> WMSh1> div> div role='main' class='ui-content'> h3> Sign Inh3> label for='userid'> User Idlabel> input type='text' id='userid' name='userid'> label for='password'> Passwordlabel> input type='password' name='password' id='password'> input type='button' id='login' value='Submit' role='button' /> div> div> div data-role='dialog' id='dialog'> div data-role='header' data-theme='d'> h1> Dialogh1> div> div data-role='content' data-theme='c'> h1> Warningh1> p> Invalid user id or passwordp> a href='Login.html' data-role='button' data-rel='back' data-theme='c'>OKa> 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 - Logintitle> 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异步调用示例）

　　

　　相关的后台Web Service如下

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using System.Data;namespace WMS{ ///

/// Summary description for WMSWebService /// [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浏览器上的效果

 

 

　　接下来看看手机端的效果