如何为HTML5和CSS3编程构建基本jQuery Mobile页面
HTML5和CSS3程序员之间有一种非常流行的方法，可以使用Ajax构建移动友好的，这将在jQuery中使用添加库，称为jQuery Mobile。
jQuery Mobile是在库顶部构建JavaScript和CSS代码的强大组合。
jQuery库通过拍摄正常HTML5页面，并以模拟本机外观和感觉的方式修改它。
代码看起来很像普通HTML：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mobile Demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"> </script> </head> <body> <div data-role = "page" data-theme = "b"> <div data-role = "header" data-position = "fixed"> <h1>JQuery Mobile Demo</h1> </div> <div data-role = "content"> <p> <a href = "http://jquerymobile.com/" data-role = "button">jQuery Mobile website</a> </p> <ul data-role = "listview"> <li>This is an ordinary list</li> <li>Coded to look like</li> <li>a mobile list</li> </ul> </div> <div data-role = "footer" data-position = "fixed"> from <em>HTML All in One for theitroad</em> </div> </div> </body> </html>
几个细节将此页面转换为移动奇迹：
包括jQuery Mobile CSS。
这是一个特殊CSS文件，旨在将HTML元素转换为其移动对应物。虽然我们可以自己下载它，但大多数开发人员将直接链接到jQuery。包括标准jQuery库。
许多代码都基于jQuery，因此也集成了jQuery库。再次，我们需要从主jQuery拉jQuery。包含jQuery Mobile库。
这是一个JavaScript库，它扩展了库以添加新的移动特定行为。将数据角色="页面"属性添加到主div。
在页面中创建一个主div并为其提供属性。这是jQuery Mobile添加的自定义数据 - 角色属性。 jQuery查看各种元素的数据角色，并将样式和行为自动应用于这些元素。分配主DIV"数据角色页面。这告诉浏览器将整个div视为页面。指定数据主题。
我们可以将数据主题应用于任何元素，但我们几乎总是将主题应用于页面。 jQuery Mobile附带了许多内置的默认主题，称为"a"通过"e"。实验找到你喜欢的那个，或者你可以用特殊的移动版本的themeroller构建自己的。在页面内添加更多div。
在页面Div中添加一些更多的div。一般来说你有三个：标题，内容和页脚。使用Data-Rool ="标题"指定标题DIV。
通过将头部信息放在div中，我们可以告诉jquery将此元素视为移动标题并应用相应的样式。标题通常包括<H1>标签。
通常，我们将指定要使用Data-Position ="固定"属性来固定的标题。如果滚动其余内容，则确保标题将保持到位，这是移动应用程序中的典型行为。建立一个内容div。
将DIV添加到数据角色="内容"以设置页面的主要内容区域。我们的任何主要主体元素都应该进入这一细分市场。可以将任何链路转换为按钮。
Web Apps中的标准约定是将链接转换为具有比基于鼠标的输入更大目标的按钮。通过将数据角色="按钮"属性添加到锚标记，可以轻松地转换为按钮。将列表转换为移动ListViews。
列表还在移动世界中有特别约定。我们可以使用数据角色属性将任何列表转换为ListView。建立一个页脚。
使用数据角色设置为"页脚"添加一个div。通常，使用数据位置属性来固定页脚(如标题)。
