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

　　首先下载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 >  && dtUser.Tables[].Rows.Count > )

            {

                return userId;

            }

            return string.Empty;

        }

    }

}

　　这里的代码只是简单示例，规范、性能、写法不做讲究。

　　至此，一个适合手持设备访问的应用程序就可以了，发布至IIS后，看一下效果。

　　下面是电脑端Chrome浏览器上的效果

　　接下来看看手机端的效果

jQuery Mobile + HTML5的更多相关文章

  1. jQuery Mobile + HTML5 获取地理位置信息

      这个代码也非常简单,核心是HTML5中GeoLocation API,函数原型定义如下: void getCurrentPosition(in PositionCallback successCa ...

  2. JQuery Mobile - html5+CSS 禁止IOS长按复制粘贴实现

    因为在移动端APP需要实现长按执行别的事件,但是在IOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法.实际测试,也并不是很理想,但是可能没有更好办法了! / ...

  3. 用jQuery Mobile做HTML5移动应用的三个优缺点

    JQuery Mobile 和 HTML5 的 3个优点 1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobi ...

  4. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody

    最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...

  5. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础

    这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...

  6. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  7. HTML5+JS手机web开发之jQuery Mobile初涉

    一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西, ...

  8. HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版

    <HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站>以HTML与CSS为主,配合jQuery制作网页,并搭配jQueryMobile制作移动网页,通过具体的范例从基 ...

  9. 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

    使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...

随机推荐

  1. VC++ CEdit

    CEDIT _1, //selection pEdit1->SetSel(0,strBuffer - m_strInput,0); pEdit1->SetFocus(); //the se ...

  2. mysql 循环插入日期递增

    create procedure wk() begin declare i int; ; do insert into t (myday) values (date_sub(curdate(),int ...

  3. instr函数

    在Oracle/PLSQL中,instr函数返回要截取的字符串在源字符串中的位置. 语法如下:instr( string1, string2 [, start_position [, nth_appe ...

  4. andorid 练习之黑名单

    activity_mian.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  5. css绘制六边形

    CSS id选择器实现 正六边形 用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: HTML代码: <div id="box1">< ...

  6. IOS一些好的用户体验设置

    1,下载图片时,如果 用户操作UI,那么就停止子线程,用户停止操作子线程时,开启子线程继续下载. SDWebImage  :专门下载图片. 2,网络请求时.本地要进行一些验证,以减少服务器的压力.

  7. 安装spy-debugger

  8. python 内置函数 map filter reduce lambda

    map(函数名,可遍历迭代的对象) # 列组元素全加 10 # map(需要做什么的函数,遍历迭代对象)函数 map()遍历序列得到一个列表,列表的序号和个数和原来一样 l = [2,3,4,5,6, ...

  9. C#事务的使用

    1.引入相应的命名空间 using System.Transactions; 2.代码事例(using (TransactionScope ts = new TransactionScope())) ...

  10. css页面点击文字出现蓝色底色去掉方法

    -moz-user-select: none; /*火狐*/     -webkit-user-select: none; /*webkit浏览器*/     -ms-user-select: non ...