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

　　首先下载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. 数据库中int类型存在空数据开发过程中model和dal层处理方法

    model层 public Int32? IsFullAttendance { get; set; } dal层  if (dr["IsFullAttendance"] + &qu ...

  2. 使用VisualVM监控远程服务器JVM

    VisualVM是JDK自带的一款全能型性能监控和故障分析工具,包括对CPU使用.JVM堆内存消耗.线程.类加载的实时监控,内存dump文件分析,垃圾回收运行情况的可视化分析等,对故障排查和性能调优很 ...

  3. S5PV210的LCD控制器详解

    1.FIMD结构框图 (1)Samsung的s5pv210的LCD控制器叫做FIMD(也叫显示控制器).Display controller(显示控制器)包括用于将图像数据从相机接口控制器的本 地总线 ...

  4. OpenShift：外国的免费云平台

    二.安装openshift客户端 对于怎么安装openshift客户端,我就不说了,网上有很多教程,连官网也有他自己的教程. 官网教程:https://developers.openshift.com ...

  5. SegmentFault创始人高阳：辍学后带着500元北漂，4年建成国内最大开发者

    i黑马注:i黑马曾经和高阳聊过几次天,在他身上我看到了90后CEO特别明显的成功特质“敢为天下先”.在别人犹豫的时候敢第一个出手,在互联网时代往往会取得最关键的“先机优势”. 7月19日,“腾讯产品家 ...

  6. 退役？OR 继续

    今天突然想了好多.上次CB那么决绝的退役,还有其他的一些东西.觉得大家说的都挺对的.看待问题的方式不同,然后或多或少就变了.预备役的事情就是想能不能不让大家因为上不了场退役. 想起以前的自己那么坚决的 ...

  7. -Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable

    在 myEclipse 中 需要配置 解决方法: window --> preferences --> java --> installed JREs 设置 Default VM A ...

  8. Oracle中Lpad函数和Rpad函数的用法

     http://blog.csdn.net/woshixuye/article/details/17262307 一.Lpad函数 lpad函数将左边的字符串填充一些特定的字符其语法格式如下:lpad ...

  9. eclipse 的操作

    1.windows->Preferences...打开"首选项"对话框,左侧导航树,导航到general->Workspace,右 侧Text file encodin ...

  10. php变量判断为空的几种方法

    1.isset  主要用来判断变量是否被初始化过 注意:当使用isset来判断数组元素是否被初始化过时,它的效率比array_key_exists高4倍左右 2.empty  可以将值为 " ...