新诀窍：jQuery Mobile（摘录）
如果你还没有下载的免费样章厄尔Castledine和克雷格·沙尔基的最新代表作了SitePoint的jQuery的：新手忍者，第二版-新的前场任意球和技巧 ，这是你做的时候了。 或者只是直接切入正题，并买这本书 ！
为什么？ 那么，谁的人买了第一版，我可以保证有充足的新材料在此版本中，和样章是一个很好的例子。
告诉你：我们只是来看看它现在。 开始了。
先进的jQuery和jQuery插件没有探索可以不戴帽子尖来将挡，上最新的孩子是完整的jQuery Mobile的 。
移动移动jQuery的远离桌面和上，那么，“移动”设备。 更妙的是，它依据的是核心和UI的经验教训，所以即使你只有这些项目的传球理解，你就可以准备卷与移动。 其实最艰难的事情之一达成协议，当你发展与移动是指，要查看你的手艺在目标平台上的额外步骤，。
没有更多的ALT + TAB和refresh为移动开发者，它现在CTRL + S，拿起您的手机或平板电脑，并创下reload 。
jQuery Mobile的融合了跨浏览器和跨平台的支持，我们知道，爱从jQuery的有力量，灵活性和设计，我们转向UI的 - 它是一个插件，但它不仅扩展了jQuery，它扩展了地方，你可以依赖jQuery的。 您可以选择，绑定，动画和链你会从一个插件期待，但你也可以轻触和滑动，使用更CSS3比以往任何时候，最重要的是，使用您的jQuery的掌握，使旁边必须 - 有应用。
你能够专注于应用程序的目标，让你移动助阵没有得到的方式，包括两个文件，点菜jQuery UI的，和你离开！
<link rel=stylesheet href="http://code.jquery.com/mobile/1.0/ ➥jquery.mobile-1.0.min.css"> ... <script src="http://code.jquery.com/mobile/1.0/ ➥jquery.mobile-1.0.min.js"></script>
看起来很熟悉！ 像你习惯了，你可以使用jQuery的CDN自身提供的文件，我们所做的，或者你可以自己抓住的文件，其中包括在本地。
使用jQuery的CDN，你的微细化以及压缩文件都在7KB和24KB分别-轻松小到足以成为一个移动的网络非常有用。 和你有一台主机平台选择与访问这些移动网络。 因为它说的对jQuery Mobile的网站上 ，“移动拥有绝大多数的所有现代的台式机，智能手机，平板电脑和电子阅读器平台的广泛支持。”
这是不小的要求：jQuery Mobile的的分级浏览器支持矩阵看到它迎合了令人印象深刻的二十几的目标平台。 如果你考虑到一些竞争对手的产品的正式只有一个支持这并不坏。
支持四个等级
还有为我们复制分级支持矩阵的完整列表，太多的平台，但你可以找到他们所有的jQuery Mobile的网站 。
现在，让我们来看看你可以期望每个等级的覆盖水平：
- A级：完全，加强与基于Ajax的动画页面过渡经验
- B级：增强没有Ajax导航功能体验
- C-等级：基础，非增强HTML的经验，还是功能
- 不正式支持：可能的工作，但还没有经过全面测试或调试
Mobile的文档很全面，几乎一样的支持。 每个方法和属性被覆盖，并且该文档本身是使用手机-clever，呵呵写的？ 可以说，在文档更容易浏览的智能手机比它在桌面上！
作为插件去，jQuery Mobile的甚至比jQuery用户界面，它有更多的烘烤功能，而且作品只要你将文件添加到您的应用程序更多的功能更加丰富。 随着手机在HTML5和CSS3正在推动桌面开发接地，它甚至可以诱使非移动使用情况。
它支持仍在增长，并有可能一些功能，我们将在以后的版本中看到添加。
虽然手机还不率的jQuery Core或UI网站导航一提的，还有无数的功能，使该掩饰库是多么新的应用程序。 让我们来看看其中的一些功能。
玩你的王牌
现在我们知道我们的客户几乎与我们所知道的jQuery和jQuery UI，所以这是我们的一个安全的赌注，有社会方面的移动应用程序是在卡片上。
让我们提高赌注，并处理通过创建一个基于移动的纸牌游戏的下一个请求。
我们将通过使流行王牌实现jQuery Mobile的：该Jemimas，世界上第一个纸牌游戏，它结合了最新的摇滚明星的脸胜过你的朋友打图，如图4.1，图4.2可见的快感，和图4.3。
图4.1。 流行王牌面对
图4.2。 我们的POP王牌主页
图4.3。 获奖者的屏幕
而不需要经过的每一行代码，让我们专注于移动特定的代码，我们可以：
<link rel=stylesheet href="http://code.jquery.com/mobile/1.0/ ➥jquery.mobile-1.0.min.css"> ⋮ <script src="http://code.jquery.com/mobile/1.0/ ➥jquery.mobile-1.0.min.js"></script>
我们已经看了看手机的要求包括，但他们是值得再次提及。 不像其他的jQuery的项目，以实现广泛的平台支持，处理大量的之前发生井document.ready事件触发。 因此，我们需要增加我们包括我们的文件，以实现最佳的用户体验的头。
虽然我们在文件头，让我们来看看新的meta元：
<meta name=viewport content="width=device-width, initial-scale=1, ➥user-scalable=0">
jQuery Mobile的大量利用了HTML5，在这里，我们有我们的标准化的应用程序的跨平台显示的HTML5元素。 它告诉我们的浏览器，我们的内容应该是一样宽，它可以和它应该是在1：1的比例。 这一点很重要，考虑到多种分辨率我们的应用程序可能会遇到的。
这最后的内容价值的用户scalable=0 -告诉我们的浏览器不使我们的内容变焦。 如果变焦是你想在你的应用程序，只是省略值和浏览器的默认行为去。
说到HTML5，让我们来看看现在我们的文档结构。 同样，如果您已经使用HTML5的工作，应该有一些惊喜为你 - 除了手机可能如何拥抱的语言。
<section data-role="page" id="home"> ⋮ </section> <section data-role="page" id="albums"> <header data-role="header"> ⋮ </header> <div data-role="content"> ⋮ </div> <footer data-role="footer"> ⋮ </footer> </section> <section data-role="page" id="album"> ⋮ </section> <section data-role="page" id="results"> ⋮ </section>
在它的心脏，我们的页面是一组的section与要素data-role页面的属性。 你也可以使用div元素，而不是sections ，尤其是圆形，属性比元素更重要，因为data-role告诉移动各的sections将是我们的应用程序的页面。 我们进一步划定我们与独特的网页id是作为我们的导航锚目标的属性。 当桌面可以使用IDS跳或滚动到内容，移动使用它们浏览量之间的过渡。
里面我们的第二个section ，我们已经证明我们的基本浏览量布局一个header ， div ，和footer ，再全部用data-role属性是帮助移动应用其在引擎罩变化。 这些元素我们只是添加任何HTML，我们需要和应用内data-role属性，它的西装。 现在，让我们尝试一些：
<a href="#albums" data-role="button">START</a>
我们的第一个section与id的home有一个锚，我们告诉我们手机想显示在我们的一个按钮UI，我们只需提供data-role的button ，和移动做繁重的我们。 使用我们的锚散列引用是我们需要做加载我们的下一个section ，与id的albums ，进入视野。
在我们albums部分，我们继续使用简单的HTML5 data属性驱动的方法。 我们告诉我们的header使用申请一个主题，你猜对了， data-theme 。
我们做同样为我们的无序列表，以及告诉它是一个data-listview ，并在列表中的锚有一个data-transition的flip来控制我们的网页“转身”：
<header data-role="header" data-theme="b"> <h1>Pop Trumps</h1> </header> <div data-role="content"> <p>Select an album by The Jemimas to play</p> <ul data-role="listview" data-inset="true" data-theme="b"> <li><a href="#album" data-transition="flip"> ➥The Jemimas: Debut</a></li> <li><a href="#album" data-transition="flip"> ➥This is The Jemimas</a></li> <li><a href="#album" data-transition="flip"> ➥Awkward Third</a></li> <li><a href="#album" data-transition="flip"> ➥Best of The Jemimas</a></li> </ul> </div>
攻丝在我们的外观时尚，锚listview现在将导致album -designated页“翻转”到到视图，它很好地增加了我们的卡片般的效果。 您还可以使用slide ， slideup ， slidedown ， pop ，和fade ; 如果你是一个球迷jQTouch ，你可能会注意到，这些转变已经从只有轻微改变该库移植。 我们的后flip ，我们将已处理的我们的卡之一，并且玩家可以进入一些严重胜过。 对于我们来说，虽然，真正的兴趣在于三个新的data-roles和无缝DOM操作：
<div data-role="content"> <div data-role="fieldcontain"> <label for="flip-a" class="ui-hidden-accessible"> ➥Select slider:</label> <select name="slider" id="flip-a" data-role="slider" ➥data-theme="c"> <option value="no">☜ Number 1s</option> <option value="yes">6</option> </select> ⋮ </div> </div> <footer data-role="footer" data-theme="c"> <div data-role="controlgroup" data-type="horizontal"> ⋮ </div> </footer>
第一个新data-role是fieldcontain ，它做什么你所期望的：包含字段。 如果你喜欢，这个data-role可以应用于一个fieldset一些额外的语义糖。 接下来的是slider我们里面的角色fieldcontain ，最后是controlgroup ，它从一个HTML5吸取它的名字hgroup并用于组按钮。
从触发DOM操作slider data-role显示移动在jQuery用户界面-根select元件和与之相关label隐藏在接口和通过滑动替换倒装肘节在移动设备切换流行和在图4.4中示出。
图4.4。 jQuery Mobile的翻转切换和分组按钮
该controlgroup值具有在界面，它实现了使用CSS单独（无DOM操作）的无不太惊人的效果。 就其本身而言，该controlgroup值绘制的联系在一起，并应用圆角到该组中的第一个和最后一个元素。 如果您还添加data-type=”horizontal”的div包含controlgroup价值，正如我们在前面的标记已经做了，分组按钮连续显示为你所期望的。
而我们最后的data属性data-direction=”reverse” ，它通过倒车将它们与我们的过渡工作。 例如，在默认的行为是为了从屏幕的右侧移动，我们的data-direction属性使其出门向右。 时控制，它提供了移动的应用程序内的一个感强的用户。 它不是简单地沿着无穷无尽的一系列意见移位; 相反，它围绕移动等一系列通过章节在书页移动：
<a href="#album" data-role="button" data-direction="reverse" ➥id="continue">CONTINUE</a>
和说，通过章动的，我们已经达到了，我们可以开始讨论编写我们jQuery Mobile的代码点。 好了，差不多了。
我们谈论我们写代码之前，我们需要介绍一个更加一段代码，没有我们的运行做任何事情：在mobileinit事件。 jQuery Mobile的默认转换和造型是那么好，你就没有什么需要办理任何变化，但对于那些难得的时间在需要时，你可以利用mobileinit事件它可以让你尽快的情况下延长或配置选项火灾。
这意味着你将不再需要克服的默认值，你可以应用正才更改设置，而且也没有必要等待DOM加载。 所以，你将不必等待$(document).ready()生效，也不document.loaded 。
因此，建议您引用您自己的本地脚本文件引用了jQuery库后 ，如正常，并引用移动，像这样前 ：
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="../path/to/your/scripts.js"></script> <script src="http://code.jquery.com/mobile/1.0/ ➥jquery.mobile-1.0.min.js"></script>
因此，我们已经整理了语义HTML，我们的源文件都在发生，并且mobileinit事件已触发。 让我们来看看，我们已经写了，使我们的游戏生活的代码...
但是，这是我们必须离开我们的摘录。 除了下载此免费的样章 ，你还可以浏览目录和索引您决定购买之前， jQuery的：新手忍者，第二版-新的前场任意球和技巧的厄尔Castledine和克雷格·沙尔基。
From: https://www.sitepoint.com//new-kicks-and-tricks-jquery-mobile-book-excerpt/