jQuery Mobile入门学习文档(2)_H5之家 - 中国HTML5教程资源分享第一站

　　为了实现在移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。

　　这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的方式要好很多。当一个新的页面做为新的data-role=”page” div插入到主页面时，主页面会有效的缓存取到的内容。使得当要访问一个页面时能够尽快的显示出来。这个工作过程听起来难以置信的复杂，但是做为开发人员的我们大部份不需要了解其中工作的具体细节。只要能看到效果就OK。

　　注意:如果你不想采用AJAX的方式加载页面，而想以原生的页面加载方式打开一个链接页面，只需要在打开的链接上添加属性 rel=”external”属性

　　页面切换效果

　　你可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可。可能的值如下：

jQuery Mobile入门学习文档

　　例如

　　在浏览器中查看效果

　　注意：查看以上的效果需要您的浏览器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。

　　对话框

　　通过在链接中添加data-rel=”dialog”的属性，可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择

　　例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下

　　<p>
　　<ahref="#about"data-rel="dialog"data-transition="slideup">About this app</a>
　　</p>

　　注意：目前的测试版本存在问题，当在一个页面中写多个”page”时在以dialog的方式打开一个页面时，不会出现对话框效果

　　按钮

　　按钮是触摸式应用程序的一部分，它们扮演链接的功能，因为它们提供了更大的目标，当你点击链接的时候（比较适合，手指比较胖的人群）

　　在jQuery Mobile中把一个链接变成button的效果，只需要在标签中添加data-role=”button属性即可”。例如：

　　<divdata-role="content">
　　<p><ahref="#about"data-role="button">About this app</a></p>
　　</div>
　　<divdata-role="content">
　　<p>This app rocks!</p>
　　<ahref="#home"data-role="button">Go home</a>
　　</div>

　　另外jQuery Mobile也会自动的转换像表单元素中的submit，reset，button，或image为按钮样式。

　　还可以利用data-icon属性建立各式各样的按钮，建立行内按钮和按钮组（水平或垂直的）

　　格式化文本

　　为了使其尽可能的灵活，jQuery Mobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。

　　有两种布局方法使其格式化变得更简单：布局表格和可折叠的内容块

　　布局表格：组织内容以列的形式显示，有两列表格，和三列表格

　　可折叠的内容：当点击内容块的标题，则会将其隐藏的详细内容展现出来

　　下面是一个可折叠内容的实例，单击标题将看到具体的内容，再点击标题则会将展现的内容隐藏。

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<title>Collapsible Content Demo</title>
　　<linkrel="stylesheet"href="" />
　　<scriptsrc=""></script>
　　<scriptsrc=""></script>
　　</head>
　　<body>
　　<divdata-role="page"id="home">
　　<divdata-role="header">
　　<h1>Home</h1>
　　</div>
　　<divdata-role="content">
　　<divdata-role="collapsible"data-state="collapsed">
　　<h3>About this app</h3>
　　<p>This app rocks!</p>
　　</div>
　　</div>
　　</div>
　　</body>
　　</html>

　　触摸选择的表单元素

　　jQuery Mobile会自动替换标准的HTML表单元素，例如文本框，复选框，列表框。以这种自定义的样式工作在触摸设备上的表单元素，易用性更强。

　　例如，复选框将会变得很大，易于点选。点击下拉列表时，将会弹出一组大按钮列表选项，提供给用户选择。

　　该框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加两个option选项，创建不错的”打开/关闭”开关，

　　另外一个不错的特点是组合单选框和组合复选框，可以利用fieldset元素添加属性data-role=”controlgroup”来创建一组单选按钮或复选框，jQuery Mobile自动格式化他们的格式。使它们看上去更fashion!

　　一般来说，开发者不需要关心表单的那些高级特性，开发者仅需要以正常的方式创建你的表单，jQuery Mobile框架会帮你完成剩余的工作。另外有一件事情需要开发人员来完成，即使用div或fieldset 属性data-role=”fieldcontain”包装每一个label/field。这样jQuery Mobile会在label/field对之间添加一个水平分割条。这样的对齐方式可以使其更容易查找。

　　下面是一个jQuery Mobile版的表单元素