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>