jQuery mobile
jQuery Msobile 都能做什么?
1、jQuery Mobile为开发移动应用程序提供了非常简单的用户接口
2、这种接口的配置是标签驱动的，这意味着我们可以在HTML中建立大量的程序接口而不不需要写一行js代码
3、提供了一些自定义的事件用来探测移动和触摸动作。例如tap(敲击)、tap-and-hold（点击并按住）、swipe、orientation change
4、使用一些加强的功能时需要参照一下设备浏览器支持列表
5、使用预设主题可以轻松定制应用程序外观
AJAX 导航
为了实现在移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。
这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的 方式要好很多。当一个新的页面做为新的data-role=”page” div插入到主页面时，主页面会有效的缓存取到的内容。使得当要访问一个页面时能够尽快的显示出来。这个工作过程听起来难以置信的复杂，但是做为开发人员 的我们大部份不需要了解其中工作的具体细节。只要能看到效果就OK。
注意:如果你不想采用AJAX的方式加载页面，而想以原生的页面加载方式打开一个链接页面，只需要在打开的链接上添加属性 rel=”external”属性
页面切换效果
你可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可。可能的值如下
|
slide |
从右到左切换（默认） |
|
slideup |
从下到上切换 |
|
slidedown |
从上到下切换 |
|
pop |
以弹出的形式打开一个页面 |
|
fade |
渐变退色的方式切换 |
|
flip |
旧页面翻转飞出，新页面飞入 |
例如 <p><a href=”#about” data-transition=”flip”>关于页面</a></p>
在浏览器中查看效果
注意：查看以上的效果需要您的浏览器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。
对话框
通过在链接中添加data-rel=”dialog”的属性，可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择
例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下
<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>
注意：目前的测试版本存在问题，当在一个页面中写多个”page”时在以dialog的方式打开一个页面时，不会出现对话框效果
按钮
按钮是触摸式应用程序的一部分，它们扮演链接的功能，因为它们提供了更大的目标，当你点击链接的时候（比较适合，手指比较胖的人群）
在jQuery Mobile中把一个链接变成button的效果，只需要在标签中添加data-role=”button属性即可”。例如：
<div data-role="content"> <p><a href="#about" data-role="button">About this app</a></p> </div>... <div data-role="content"> <p>This app rocks!</p> <a href="#home" data-role="button">Go home</a> </div>
另外jQuery Mobile也会自动的转换像表单元素中的submit，reset，button，或image为按钮样式。
还可以利用data-icon属性建立各式各样的按钮，建立行内按钮和按钮组（水平或垂直的）
主题
jQuery Mobile渲染的灰色、黑色和蓝色及圆形的组件使其看起来很漂亮，但是如果你的整个应用都使用这样的样式，将会使其变得很乏味。jQuery Mobile允许你自定义官方一些组件的主题。例如：
- Font family
- Drop shadows
- 按钮和盒状元素的边框圆角半径
- 图标组件
另外，每一个主题包含26种不同颜色的切换（标记从a 到z），可以控制前景颜色，背景色和渐变色，典型用法是使页面元素部分替换，你可以使用data-theme属性。例如
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<a href="#" data-role="button" data-theme="a">About this app</a>
<a href="#" data-role="button" data-theme="b">About this app</a>
<a href="#" data-role="button" data-theme="c">About this app</a>
<a href="#" data-role="button" data-theme="d">About this app</a>
<a href="#" data-role="button" data-theme="e">About this app</a>
</div>
</div>
</body>
</html>
