使用jQuery Mobile设计移动设备网站
来自：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 iPhoneFireFox with the FireFox User Agent Switcher行置模器
Windows Phone EmulatorOpera Mobile EmulatorMobiOne 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：
jQuery Mobile 化元素
(以下示以 iOS模器 例)
jQuery Mobile 最有值的部分之一，就是外提供了各化的元素，且可以我再搭配 HTML5 之後的，以下各化元素的介：(部分片至 jQuery Mobile 官方站)
1.文字入方
2. 取值
3. 定
4. RadioButton
核取方
6. 清方
7. 易清
8. 清
jQuery Mobile 事件
如果要 jQuery Mobile 做一步的，事件是不可或缺的一重，最常使用的就是 Pageinit 事件，事件 JQUERY 的 $(document).ready() 相似，提供面中每一 Page 初始化使用，易的撰方式如下：
之後，可一步的站型 (如：路用式、本地路用程式或行置用程式)，如下：
Display Modes
Display Modes 可依照置提供不同的面，方法很：
A. 至 Global.asax 的 Application_Start 事件理常式置 Ex: iPhone
完成之後一般器就如下：
使用 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 功能可以一的指定每次行都要引用特定目下的固定特徵的案，如下：
而我把 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 ，除了加入的案上方自加上：
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。
?