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

　　首先下载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. mysql数据类型最大长度记录

    MySQL中各数据类型的取值范围 转在这里,慢慢记下来. TINYINT -128 - 127 TINYINT UNSIGNED 0 - 255 SMALLINT -32768 - 32767 SMA ...

  2. MC java 远程调试 plugin 开发

    @ECHO OFF SET CATALINA_OPTS= -Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,se ...

  3. SQL数据库完全复制

    很少摸 Windows 环境下的东西,最近被个 MS SQL Server 的数据库搞得头大.实在不像 MySQL 那样用起来轻车熟路, OrZ ... 本来以为企业管理器里面既然提供了 DTS 数据 ...

  4. mysqldump操作参考

    http://zhaizhenxing.blog.51cto.com/643480/134558 http://www.cnblogs.com/zeroone/archive/2010/05/11/1 ...

  5. Spring MVC Web框架

      1. Spring MVC简介 Spring MVC是java EE平台请求驱动类型的轻量级Web框架,使用了MVC设计模式的思想,spring框架的主要优势之一就是分层架构,分层架构允许选择使用 ...

  6. ABAP 日期时间函数

    HR_JP_MONTH_BEGIN_END_DATE CALL FUNCTION 'HR_JP_MONTH_BEGIN_END_DATE' EXPORTING IV_DATE = ' IMPORTIN ...

  7. 使用并行的方法计算斐波那契数列 (Fibonacci)

    更新:我的同事Terry告诉我有一种矩阵运算的方式计算斐波那契数列,更适于并行.他还提供了利用TBB的parallel_reduce模板计算斐波那契数列的代码(在TBB示例代码的基础上修改得来,比原始 ...

  8. NC WebService接口开发流程

    一.定义类: 接口类 包定义在public下,接口类名为I开头,Service结尾 实现类 包定义在private下,实现类名以ServiceImpl结尾 VO类 若有VO类,也放在public下 U ...

  9. 教你理解Fragment

    定义 Fragment 表示 Activity 中的行为或用户界面部分.我们可以将多个片段组合在一个 Activity 中来构建多窗口UI,以及在多个 Activity 中重复使用某个片段.可以将片段 ...

  10. javascript第四节其它引用对象

    单体对象 Global对象(全局)这个对象不存在,无形的对象 其内部定义了一些方法和属性:encodeURL.encodeURIComponent.decodeURI.decodeURICompone ...