使用 jQuery Mobile 及 ASP.NET 开发跨行动装置网站 (Mobile Web)

转：http://msdn.microsoft.com/zh-tw/hh875190.aspx

在行动式装置普及化的现在，要开发一个能够跨行动式装置的原生应用程式 (Native App) 是非常不容易的，除了需要了解不同的作业系统的差异 (Ex: Windows Phone、Android、iOS)，还需要了解各种程式开发技术 (Ex: .NET、JAVA、Objective C)，写一套软体就要写三四种版本，对程式开发者来说，是一个很大的进入门槛。

一般来说，我们在各种行动式装置上所能得到资讯的方式，除了原生应用程式之外，也能够由网页上得到 (例如，网路订位、论坛资讯)，而其实网页是能够解除各家不同行动装置使用上限制的最佳途径，当然，网页的功能有局限 (如，电子罗盘，相机，重力侦测)，但是如果针对一般性提供资讯的应用程式来说，例如企业相关的应用，通常是表单式、或是查询及报表类的应用程式，这类的应用通常也仅供内部员工或特定使用者操作，并非要上架到 App 市集供外部消费者下载使用，使用网页开发一种很好的选择。

但是以往的网页应用程式介面，其实大部分都不太适合现今的行动装置所使用，画面不是过大，就是因为内容过多而导致载入速度不佳，甚至是浏览方式并不适合行动式装置，有鉴于此，jQuery 就推出一套新的函式库：jQuery Mobile。

简单的说，jQuery Mobile 希望能够统一市面上常见行动装置的使用者介面系统。它是在 jQuery 与 jQuery UI 的基础下，一个有弹性且易主题化的一个轻量级函式库。而它做法上关键的差别，就是在于目标是各种行动装置，希望让各种行动装置的浏览器都能够支援，就如同对于桌上型的浏览器一般，并且在使用网页时，能够以接近一般原生应用程式的经验来操作 (Ex: 触碰或滑动)。

jQuery Mobile 的主要特色

以 jQuery 为核心
轻量化档案
Html5 Markup-driven
自动切换排版
支援滑鼠与触碰事件
WAI-ARIA
强大的布景主题系统
ASP.NET MVC 的支援
支援市面上大部分行动装置
画面的一致化
多样化的 UI

行动装置的支援

jQuery Mobile 几乎支援市面上所有的行动装置 (Windows Phone, iOS, Android, Symbian, Blackberry …)，它的其中一个特点是会 "自动降低能力"，能够针对支援性不那么好的行动装置浏览时，自动关闭该装置所不支援的功能，以求功能呈现的最大化。因为行动平台与浏览器版本多元且不断的推陈出新，建议读者在阅读文件时，可至jQuery 官方网站的支援一览表： http://jquerymobile.com/gbs/ ，取得最新的 jQuery Mobile 行动装置支援资讯。

jQuery Mobile 开发环境

当我们要开始开发 jQuery Mobile 时，必须要先做点准备功课

开发工具

首先关于开发工具，虽然 Notepad 就能够编辑，但是如果希望能在开发上可以轻松一点的话（如程式码提示功能、HTML 标签的检查），还是须要有个顺手的工具，本文的示范是以 Visual Studio 2012 为开发工具，此版本加强了前端网页的开发能力（HTML、CSS 与 JavaScript），非常方便于开发 jQuery Mobile，预设就支援 HTML5 标签的支援。（文后会再特别介绍）

测试工具

因为对象是以行动式装置为主，所以用一般的桌上型浏览器其实不太适合，建议可以使用以下的测试工具来协助您开发：

桌上型浏览器
- Apple Safari with the user agent set to iPhone
- FireFox with the FireFox User Agent Switcher
行动装置模拟器
- Windows Phone Emulator
- Opera Mobile Emulator
- MobiOne Studio

开发 jQuery Mobile 网页

下载函式库

在开发 jQuery Mobile 之前，必须做的第一件事情就是下载函式库（.js档），因为 jQuery Mobile 是以 jQuery 为基础来扩充的，所以必须要连 jQuery 函式库一并下载。目前下载方式有下列几种：

直接前往官方网站下载
- jQuery： http://jquery.com/download/
- jQuery Mobile： http://jquerymobile.com/download/
不下载，直接使用微软 CDN（Content Delivery Network）上的档案
- http://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_3
最建议的方式，使用 Visual Studio 2012 的 NuGet 套件管理员来安装，NuGet 套件管理员可以使用关键字来搜寻可安装的套件，你可以在上面找到最新的 jQuery 与 jQuery Mobile 的函式库安装至你的网站，如下图：

除此之外，安装后 NuGet 套件管理员会加入一个设定档至网站内，来记住安装过的套件，并可协助您做版本的更新。如下图，如果网站内所装 jQuery Mobile 函式库套件版本为 1.1.0，那么在更新的分类中，就会看到 jQuery Mobile 的更新选项，并提示可更新到 1.1.1：

如此一来就不需要在函式库版本更新后，还得要一一去网站取得最新的档案或是CDN的连结了。（题外话：jQuery 与 jQuery Mobile 更新的速度是很快的）

引用函式库

除了下载 jQuery Mobile 与 jQuery 函式库，在开发 jQuery Mobile 的网页时，还必须能够让网页上引用函式库 (.js) 与样式表 (.css) 档案，而方式有下列几种：

1. 任一种 ASP.NET 的网站，都可以直接加入引用标签来使用，如下引用至 CDN：

<link href="Content/jquery.mobile-1.1.1.min.css" rel="stylesheet" /> 
<script src="Scripts/jquery-1.8.0.min.js"></script> 
<script src="Scripts/jquery.mobile-1.1.1.min.js"></script>

这种方法较为不方便的地方在于，函式库更新后，引用标签就必须要随之更新。

2. ASP.NET MVC 4 的网站，可以使用 Bundles 功能来引用函式库；此方法的优点在于函式库更新之后，能够自动套用新版的能力。

设定画面尺寸大小

另外设计时最好在 <head> 区段中加入 <meta> 标签设定 viewport，用来通知浏览器显示画面时尺寸的大小，以及能否控制缩放。设定 viewport 的好处是会自动根据浏览器或装置的大小作画面输出，如果没有设定此标签，可能会有画面过小，或画面超出行动装置本身所支援的宽度而造成检视不易的问题，标签如下：

<meta name="viewport" content="width=device-width, initial-scale=1">

范例中设定 width 为 device-width 表示把画面设定为与行动装置宽度相同；initial-scale 代表画面初始的大小，设为 1 代表画面缩放 100%。

有关于 viewport 的其它设定可以参考 W3C 文件： http://dev.w3.org/csswg/css-device-adapt/

jQuery Mobile 网页基本组成

jQuery Mobile 的网页基本组成是由 <div> 再加上 HTML5 标签所组成的，基本组成有三个成员：header、content 与 Footer，每个成员都使用 <div> 标签再加上 "data-roles" 属性来指定，最后在放置到页面 (Page) 标签内即可，以下是简单的范例：

<div data-role="page"> 
    <div data-role=“header”> 
        表头 
    </div>  
    <div data-role=“content”> 
        网页内容 
    </div>  
    <div data-role=“footer”> 
        表尾 
    </div>  
</div>

设计完成之后，就可以看到 jQuery Mobile 的网页基本雏型了，如下图在 iOS 模拟器中所示：

jQuery Mobile 网页视觉化元素

(以下图示以 iOS模拟器为范例)

jQuery Mobile 最有价值的部分之一，就是针对网页外观提供了各种视觉化的元素，并且可以让我们再搭配 HTML5 标签之后轻松的开发，以下为各视觉化元素的简介：(部分图片节录至 jQuery Mobile 官方网站)

1.文字输入方块

<input type="text" name="name" id="basic" value=""  />

2. 选取数值

<input type="range" name="slider" id="slider-0"  
value="25" min="0" max="100" step="5" />

3. 设定开关

<select name="slider" id="flip-a" data-role="slider"> 
    <option value="off">Off</option> 
    <option value="on">On</option> 
</select>

4. RadioButton

<fieldset data-role="controlgroup"> 
    <legend>Choose a pet:</legend> 
         <input type="radio" name="radio-choice-1"  
id="radio-choice-1" value="choice-1" checked="checked" /> 
         <input type="radio" name="radio-choice-1"  
id="radio-choice-2" value="choice-2"  /> 
         <input type="radio" name="radio-choice-1"  
id="radio-choice-3" value="choice-3"  /> 
         <input type="radio" name="radio-choice-1"  
id="radio-choice-4" value="choice-4"  /> 
</fieldset>

核取方块

<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />

6. 清单方块

<select name="select-choice-0" id="select-choice-1"> 
   <option value="standard">Standard: 7 day</option> 
   <option value="rush">Rush: 3 days</option> 
   <option value="express">Express: next day</option> 
   <option value="overnight">Overnight</option> 
</select>

7. 简易清单

<ol data-role="listview" > 
  <li><a href="acura.html">Acura</a></li> 
  <li><a href="audi.html">Audi</a></li> 
  <li><a href="bmw.html">BMW</a></li> 
</ol>

8. 复杂清单

jQuery Mobile 事件

如果要针对 jQuery Mobile 做进一步的开发，事件是不可或缺的一项学习重点，最经常使用的就是 Pageinit 事件，该事件与 JQUERY 的 $(document).ready() 相似，提供给页面中每一 Page 初始化使用，简易的撰写方式如下：

$('Page 的 ID').live('pageinit',function (event) { 
            //初始化该做的事情。 
        });

另外特别的部份在于 jQuery Mobile 也能针对行动式装置提供专属的事件，如滑动与触摸事件，可供我们在开发时做各种设计。

其余事件可以参考 jQuery Mobile 的官方文件： http://jquerymobile.com/demos/1.1.1/docs/api/events.html

ASP.NET 搭配 jQuery Mobile

基本上，jQuery Mobile 是针对前端 (浏览器端) 的介面与程式开发技术，而本身也不具备后端 (伺服器端) 的能力，所以如果要开发网页应用程式，势必要搭配其他技术。

ASP.NET 本身就具兼具前后端的应用程式开发能力，但目前对于行动式装置的前端部份支援，可以由 jQuery Mobile 负责前端的画面与程式执行能力，而 ASP.NET 只要处理后端即可。

使用 ASP.NET 开发搭配的 jQuery Mobile 网站也有两种选择：

ASP.NET Web Form
因为设计时需要搭配伺服器控制项与伺服器端事件 (ex Postback)，所以挑选控制项时必须要先以能够产出符合jQuery Mobile 所能辨识的为主。
ASP.NET MVC (较为恰当)
因为本身开发就是使用纯 HTML 与 Http Post/Get 的最基本方式开发，所以搭配 jQuery Mobile 时较为容易。

ASP.NET MVC 4 的支援

ASP.NET MVC 在第四版针对 jQuery Mobile 在开发上的支援大幅提升了，不仅是页面样板部分有直接提供，还针对行动装置部份能够在辨识后提供不同的画面。

ASP.NET MVC 4 Template

Visual Studio 2012 能够在建立网站专案时提供 ASP.NET MVC 4 的样板，如下图，专案范本可以先挑选 ASP.NET MVC 4 Web 应用程式：

选择之后，还可进一步的选择开发网站类型 (如：网际网路应用式、本地网路应用程式或行动装置应用程式)，如下图：

Display Modes

Display Modes 可依照装置提供不同的浏览画面，设计方法很简单：

A. 至 Global.asax 的 Application_Start 事件处理常式内注册装置 Ex: iPhone

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone") 
            { 
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf 
                    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) 
            });

B. 依照装置名称建立对应 action 的网页 Ex: Index.iPhone.aspx，如下图：

设计完成之后一般浏览器检视就如下图：

使用 iOS模拟器检视就变成另一张所提供的网页，如下图：

ViewSwitcher

ViewSwitcher 提供行动式装置将浏览模式切换至一般浏览器的浏览模式的选择，届时行动装置在检视网页时，除了提供专属的画面之外，还能提供切换回一般浏览器的检视模式，如下图，使用 iOS 模拟器检视画面时，会出现一个换回桌上型电脑浏览器的连结：

点选之后，就可以切换到桌上型电脑浏览器的检视画面，如下图：

另外，也能够切换回行动装置的版本。

Bundles

ASP.NET MVC 4 内建了 Bundles 功能，你可以 ASP.NET MVC 4 范本所建立出来的网站资料夹 "App_Start"下的 BundleConfig.cs 档案中找到设定的程式码，该功能的好处在于：

合并档案并压缩
Bundles 功能能够将所需要下载的 CSS 与 js 档案，依照分组来合并，变成单一档案并压缩后供浏览器下载，来达到传输效率的最大化，如下图为使用前（或使用 Bundles 功能却将除错模式开启），网页引用标签是对应到原始档案：

而使用后，则是由 Bundles 功能来提供下载：
支援自动对应目录下的档案
在使用 jQuery Mobile 函式库时，经常遇到的问题就是 jQuery Mobile 与 jQuery 改版的速度很快，当你还在熟悉 1.1.0 版时，1.1.1 版就已经推出了。而在改版之后除了档案要更新之外，另外还得辛苦的 Find And Replace，将网页上所有的引用标签换过一次。而 Bundles 功能可以统一的指定每次网页执行时都要引用特定目录下的固定特征的档案，如下：

bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));

如此就可以在档案变更时，让 Bundles 功能自动的替我们更新至每一张网页。如下图，当 Scripts 资料夹下的 jQuery Mobile 函式库档案为 jquery.mobile-1.1.0.js 时，网页则自动引用该版本标签：

而当我们把 Scripts 资料夹下的 jQuery Mobile 函式库档案改为 jquery.mobile-1.1.1.js 时，网页则自动更新该版本函式库的参考：

Visual Studio 2012 新功能 – 针对 jQuery Mobile 及 HTML5

当 jQuery Mobile 的出现让行动装置网页开发更方便后，微软也适逢其时的在 2012 年推出了 Visual Studio 2012；相较于前版，网页开发强化最多的就是针对前端网页开发的能力，包含了 HTML、JavaScript 与 CSS 的编辑与支援；因此 Visual Studio 2012 的推出也正好让透过 jQuery Mobile 来开发行动装置网页设计师们，能有一个强大且方便的设计工具。

下文是针对 Visual Studio 2012 开发 jQuery Mobile 中会使用到的新功能来做介绍。

HTML

我们先针对 HTML 编辑部分来做介绍：

支援 HTML5 标准

在 Visual Studio 2012 中撰写 HTML 网页或 Web 表单时，预设即支援 HTML5 标准，除了加入的档案上方会自动加上：

<!DOCTYPE html>

并且在设计网页内容时，也会主动支援 HTML5 标签，如下图：

HTML5 智慧感知（IntelliSense）功能

Visual Studio 2012 提供了 HTML 智慧型感知功能，并且支援 HTML5 的标签，例如要加入 HTML5 的 Canvas 标签时，键入”<c”，此时智慧感知功能就会启动，出现下拉选单来提示可协助输入 Canvas 标签，如下图：

HTML5 程式码片段（Code Sinppet）功能

除了智慧感知支援 HTML5 之外，程式码片段功能在此版本也能够支援部分 HTML5 标签的输入，例如在程式码片段网页选项中的 HTML 分类，就能够挑选具有 HTML5 宣告的标记程式码片段，如下图：

HTML 自动缩排

在此版本的 HTML 编辑器中，提供了更方便的标签缩排功能；经常我们在设计 HTML 标签时，经常会不对齐、乱换行，如下图：

而此时我们能在需要整理的最上层标签上方找到一个 tip 方块，此时会出现一个 ”格式项目” 的选项，如下图：

点选该项目之后，立刻就可将标签自动缩排，完成后如下图：

CSS

CSS 部分在 Visual Studio 2012 也提供了很多开发上的新功能：

CSS 内容折叠功能

以往在网页上设计 CSS 语法时，只能将所有的 CSS 内容一次全部折叠，如下图：

而在此次版本内，能够针对内部的每一个选择器来做折叠，如此就能够更方便的整理文件内容了，如下图：

CSS 色彩选择器

此版本的 CSS 语法中，如果需要加入色彩值时，如下图：

此时可输入 ”#” 或是 ”rgb" (这两组文字，便可开启色彩选择器)，如下图：

如果需要挑选更多样化一点的颜色，可以按下选择器又方的向下箭头，或是键盘的向下键，便可开启进阶选择器，如下图：

开启进阶选择器之后，除了可以选择更细致的颜色，还可以用滴管工具来挑选系统画面上的任何一处的颜色，另外还有透明度可供调整。

CSS 语法片段功能

CSS 在设计时，Visual Studio 2012 能够提供程式码片段能力，并且提供说明文字，而利用程式码片段功能加入 CSS 语法时，语法片段还会加入不同前置词的设定来供跨浏览器使用，例如当我们要使用该片段来输入透明度时，如下图：

选择了该片段按下 ”Tab” 键两次，语法片段就会被加入，如下图：

而设定中 -moz 开头的设定便是给 Mozilla 相容的浏览器看的。

JavaScript

Visual Studio 2012 这个版本最令人惊艳的部分之一，就是大大加强了 JavaScript 的编辑能力。以往在编写 JavaScript 的程式码时，常常都让我们在开发时都有感觉到 ”是不是可以再加强一点，就像是写 Visual Basic 或 C#”?

相信微软听到了我们的心声，终于在 Visual Studio 2012 将一直以来我们在开发 Visual Basic 或 C# 语言时可以使用的各种方便的编辑功能，像是 ”移至定义”、程式自动缩排功能、”智慧感知”…等等，整合至 JavaScript 编辑工具中，让我们能够在开发 JavaScript 时，更容易找寻到程式码，且便于管理。

以下是关于 JavaScript 在此版本的新功能：

排版能力的增强

Visual Studio 2012 在撰写 JavaScript 程式中的 function 时，游标停留在 function 开头的「{」号，或结尾的「}」时，JavaScript 编辑工具就会自动将对应的括号反白显示，如下图所示：

若输入程式码，也会自动进行缩排，当在 JavaScript 程式区块中撰写完程式码，并按下键盘「Enter」键时，工具就会自动排版程式码，如下图所示：

支援 ECMAScript5 标准

Visual Studio 2010 的 JavaScript 编辑工具，提供 ECMAScript3 标准的验证机制，能够协助我们检查撰写完的 JavaScript 程式码是否有符合 ECMAScript3 规范。

而 Visual Studio 2012，则遵循新的 ECMAScript5 标准。

ECMAScript5 标准中新增一个名为 ”Strict Mode” 的功能，可以让你的程式码执行在更严谨的环境中，能够避免浏览器执行到不安全的程式码，或丢出例外。

例如在函式中宣告一个物件，而该物件的两个属性名称重复了，若没有使用 Strict Mode 功能，Visual Studio 2012 的 JavaScript 编辑工具不会显示任何问题。如下图所示：

而如果在函式第一行加上 "use strict" 来启用 strict 模式，则当宣告的物件属性名称重复时，Visual Studio 2012 的 JavaScript 编辑工具会自动进行语法的验证，并回报问题，如下图所示：

另外，在「错误清单（Error List）」视窗便会显示警告讯息，如下图所示：

XML 注解功能

Visual Studio 2012 的 JavaScript 能够像 C# 及 Visual Basic 程式语言一样，利用 XML 注解来加上程式的说明了，不过做法与 C# 及 Visual Basic 不太一样，不是写在函式上面，是写在函式 ”里面”，加入的方式可以选择程式码片段功能或自行键入。

如果要使用程式码片段功能，可以在程式码片段功能中的 ”XML Comments” 分类中找到，如下图所示：

而程式码片段功能就能自动侦测该函式的 ”name” 参数，并替我们加入一行 ”param” 项目来针对输入的参数提供注解功能，如下图所示：

另外也可以加入 ”summary” 项目来提供函式说明，如下图，我们加入了一个 ” summary” 项目，并将函式说明设定为 ”打招呼”：

如此，在使用该函式时，Visual Studio 2012 便会自动显示 XML 注解中的说明，如下图所示：

另外，也可以使用 ”signature” 项目来提供函式多载（Overload）的注解说明。

移至定义（Go to Definition）

当我们在开发 C# 及 Visual Basic 程式语言时，能够用 ”移至定义” 功能来寻找到程式码中所使用到的函式或类别的定义。现在 Visual Studio 2012 的 JavaScript 编辑器也提供该功能，JavaScript 编辑器的 ”移至定义” 功能能够协助我们寻找变数与函式的定义，例如在程式码中呼叫到 SayHello 函式，如果希望能够检视该函式的定义，可以按下滑鼠的右键，选择 ”移至定义”，如下图：

如此工具就会游标切换至该函式定义所在的位置（就算在外部的 js 档亦可），如下图所示：

网页开发与除错的新功能

除了上述的三种编辑器能够提供我们在开发 jQuery Mobile 的帮助之外，Visual Studio 2012 还有提供其他开发与除错上的新功能，例如 Multibrowser 支援、Page Inspector、WAI-ARIA 支援等等，以下是其他开发与除错上新功能的介绍：

Multibrowser 支援

Visual Studio 2012 能够让我们挑选用安装于系统中的任一个浏览器来测试网页结果。此功能让我们在开发网站应用程式时，可使用各家浏览器的来测试网页输出的结果是否如预期。该功能会在开始侦错按钮旁边，如下图所示：

你也可以选择最下方的 ”浏览方式” 选项，开启浏览器选择视窗，并搭配 Ctrl 键来同时选择多个浏览器，并设为预设值，如下图所示：

如此除错列就会显示为 "多重浏览器"，如下图：

而当要对某张网页要按下右键选择浏览时，选单中也会显示 "多重浏览器"。如下图：

点选后就如下图，一次就开启了 Google Chrome、Internet Explorer 与 Page Inspector：

但是当要开始侦错时，就只能挑一个浏览器。按下开始侦错的按钮，Visual Studio 2012 会跳出选择视窗来让你挑选一浏览器当作侦错的依据，如下图：

Page Inspector

Visual Studio 2012 在这个版本提供了强而有力的网页测试与侦错工具 ”Page Inspector”，该工具能够让我们检视网页（包含 HTML, Web Forms, ASP.NET MVC, or Web Pages）在执行时期的状态，像是网页所使用到的相关档案列表、CSS 的套用或关闭与伺服器控制项的对应等等。接下来介绍 Page Inspector 的相关功能。

启动 Page Inspector

您可以在侦错选单中选择 Page Inspector 当作预设浏览方式，如下图：

或是在档案总管中对网页档案按下右键选择 ”检视 Page Inspector”

如此就可以开启 Page Inspector 检视视窗，如下图：
检视网页组成的清单

Page Inspector 视窗开启后，可以在视窗左下方的工具视窗找到 ”档案” 页签，切换至该页签后，便可以看到组成该网页完整内容所需要的所有档案，如下图所示：
网页 HTML 原始码检视功能

ASP.NET 是动态网页架构，设计时期所开发的网页档与届时使用者端浏览器所得到的网页的结果并一样；也因此我们经常需要检视浏览器所得到的网页结果与我们设计时所预期的是否相同。

Page Inspector 左下方的 HTML 页签，能够让我们立刻检视浏览器所得到的网页结果；如下图所示：

而此功能还可协助我们做画面的对应，例如点选视窗中的 HTML 区段，则上方的结果视窗会自动将对应的画面内容反白显示。如下图，点选 Header 区段后，上方的 Header 部分就自动被反白：
检查（Toggle Inspection）模式

检查（Toggle Inspection）模式则是与上述的方式相反，可以让我们点选视窗上方的画面，左下方 HTML 画面与右方的网页档案画面都会自动反白对应的区段作对应。

使用方式为按下右下方的 ”检查按钮”，待游标变成十字形时，便可移动至视窗上方点选任何一个区段，左下方 HTML 画面与右方的网页档案画面都会自动反白对应，如下图所示：
样式表切换

当点选右下方 HTML 页签中的 HTML 区段时，右下方的视窗中的 ”样式” 页签能够列出该区段所套用的所有 CSS，并且能够提供立即切换后检视结果的功能；如下图中 p 区段的背景颜色，就能够利用将属性中的核取方块取消勾选来取消 CSS 的套用：

将核取方块取消勾选后，该区段的背景颜色就会立刻消失，如下图：
CSS 修改

另外除了切换套用之外，Page Inspector 也支援立即修改的功能，在样式视窗中可以直接点选属性两下来开启立即修改功能，如下图所示：

修改后如下图：
修改 DOM 内容

与上述的 CSS 修改功能相同，也能够在左下方的 HTML 页签视窗中来立即修改 DOM 元素的内容，如下图所示：

修改后上方预览视窗也会立刻对应变更，如下图：
更新列（Update bar）

当启动 Page Inspector，而又回头修改了网页的档案内容时，此时 Page Inspector 上方的视窗会出现更新工作列，来协助我们快速更新网页内容而不需要再重新启动 Page Inspector。

例如在网页原始当中加入一组新的 p 标签，如下图：

回到 Page Inspector 后，会发现上方出现黄色的更新列来供我们点选或是按下 ”Ctrl + Alt + Enter” 来做立即更新。

WAI-ARIA 支援

WAI-ARIA ( Accessible Rich Internet Applications Suite) 是 W3C 所制定中的一个标准，此标准设置的目的是希望能够让身障人士更容易存取使用 Ajax、HTML、JavaScript 等技术所设计的网站或网际网路的内容。而 Visual Studio 2012 现在已经支援这个标准。

总结

市场在改变，行动装置应用程式开发目前已经变成一门显学，如果希望以现有的网站开发技术观念来快速并简易地开发跨行动装置的轻量型应用程式，那么 jQuery Mobile 搭配 ASP.NET 是您的最佳选择。本文也介绍了针对 jQuery Mobile 开发，Visual Studio 2012 开发工具所提供的新功能。如果您也在开发 jQuery Mobile，那您一定不能错过 Visual Studio 2012。

【范例资源下载】

范例程式码下载

站内首发文章

xd43100678

发布了41 篇原创文章 · 获赞 11 · 访问量 51万+

他的留言板关注