首页 > 代码库 > jQuery Mobile + HTML5

jQuery Mobile + HTML5

2024-08-07 06:34:40   220人阅读

　　最近项目需要，需要构建一个适合手持设备访问的站点，作者从网上查阅了一些资料，本文就是基于此而来。

　　首先下载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浏览器上的效果

 

 

　　接下来看看手机端的效果

 

jQuery Mobile + HTML5


联系
我们