如何为HTML5和CSS3编程构建基本的jQuery移动页面
在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移动CSS。
这是一个特殊的CSS文件，旨在将HTML元素转换为移动元素。
尽管您可以自己下载它，但是大多数开发人员都直接链接到jQuery。
- 包括标准的jQuery库。
许多代码基于jQuery，因此也要集成jQuery库。
再一次，您需要从jQuery主上提取jQuery。
- 合并jQuery移动库。
这是一个JavaScript库，它扩展了该库以添加新的特定于移动设备的行为。
- 在主div中添加一个data-role =" page"属性。
在页面中创建一个主div并为其提供属性。
这是jQuery mobile添加的自定义数据角色属性。
jQuery查看各种元素的数据角色，并自动将样式和行为更改应用于这些元素。
为您的主div分配数据角色页面。
这告诉浏览器将整个div视为页面。
- 指定数据主题。
您可以将数据主题应用于任何元素，但是几乎总是将主题应用于页面。
jQuery mobile内置了许多默认主题，称为" a"至" e"。
您可以尝试找到自己喜欢的版本，也可以使用特殊的移动版ThemeRoller构建自己的版本。
- 在页面内添加更多div。
在页面div中添加更多div。
通常，您将拥有三个：页眉，内容和页脚。
- 使用data-role =" header"指定标题div。
通过将您的任何标头信息放置在具有"标头"数据角色的div中，您就是在告诉jQuery将此元素视为移动标头并应用适当的样式。
标头通常包含<H1>标记。
通常，您将使用data-position =" fixed"属性指定要固定的标头。
这样可以确保如果滚动其余内容，则标题将保留在原位，这是移动应用程序中的典型行为。
- 设置内容div。
添加一个带有data-role =" content"的div来设置页面的主要内容区域。
您的任何主体元素都应归入这一部分。
- 任何链接都可以转换为按钮。
Web应用程序中的标准约定是将链接转换为具有比基于鼠标的输入更大的目标的按钮。
通过将data-role =" button"属性添加到锚标记，可以轻松将任何链接转换为按钮。
- 将列表转换为移动列表视图。
列表在移动世界中也有特殊约定。
您可以使用data-role属性将任何列表转换为listView。
- 建立页脚。
将data-role设置为" footer"再添加一个div。
通常，页脚(如页眉)由data-position属性固定。
