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 - 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浏览器上的效果

 

 

　　接下来看看手机端的效果

 

posted @ 2014-12-10 17:22  舍长  阅读(10627)  评论(2)  编辑  收藏  举报