关键特性： Key features
一个完整的独立页面实例
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.Jquery.com/Jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
组件：
页面
jQuery Mobile 应用了 HTML5 标准的特性，在结构化的页面中完整的页面结构分为 header、
content、footer 这三个主要区域。
在 body中插入内容块：
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
data-role="page”代表这个div 是一个Page，在一个屏幕中只会显示一个page；
header 是标题，content是内容块，footer 是页脚
data-role参数表：
参数 说明
page 页面容器，其内部的 mobile 元素将会继承这个容器上所设置的属性
header 页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素
footer 页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素
content 页面内容容器，这是一个很宽容的容器，内部可以包含标准的 html 元素和
jQueryMobile 元素
controlgroup 将几个元素设置成一组，一般是几个相同的元素类型
fieldcontain 区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明
显分隔
navbar 功能导航容器，通俗的讲就是工具条
listview 列表展示容器，类似手机中联系人列表的展示方式
list-divider 列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接
button 按钮，将链接和普通按钮的样式设置成为 jQueryMobile 的风格
none 阻止框架对元素进行渲染，使元素以 html 原生的状态显示，主要用于 form 元
素。
页面动画：
data-transition属性可以定义页面切换是的动画效果。
例如：<a href="index.html" data-transition="pop">I'll pop</a>
data-transition参数表：
参数 说明
slide 从右侧向左滑入页面
slideup 从底部向上滑入
slidedown 从上向下滑入
pop 从中心渐显展开
fade 渐显
flip 翻转
备注：如果想要在目标页面中显示后退按钮，可以在链接中加入 data-direction="reverse"属
性，这个属性和原来的 data-back="true"相同，不知道在正式版本中将会保留哪个属性。
模态对话框
模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层，用于独占事件的应用。任何结构化的页面都可以用data-rel="dialog"链接的方式实现模态对话框应用。
例如：<a href="foo.html" data-rel="dialog">Open dialog</a>
这个页面切换效果同样可以使用标准页面的 data-transition 参数效果。建议使用"pop"、
"slideup" 和"flip"参数以达到更好的效果。
这个模态对话框会默认生成关闭按钮，用于回到父级页面。在脚本能力较弱的设备上也可以
添加一个带有data-rel="back"的链接来实现关闭按钮。
针对支持脚本的设备可以直接使用 href=”#”或者 data-rel="back"来实现关闭。还可以使用内
置的”close”方法来关闭模态对话框，例如：$('.ui-dialog').dialog('close')。
由于模态对话框是动态显示的临时页面，所以这个页面不会被保存在哈希表内，这就意味着
我们讲无法后退到这个页面，例如你在 A 页面中点击一个链接打开 B 对话框,操作完成并关闭对话
框,然后跳转到 C 页面,这时候你点击浏览器的后退按钮，这时候将回到 A 页面，而不是 B 页面。
工具条
工具条主要用于”header”,”footer”等区域，用来支撑和实现页面中业务功能的应用。jQuery
Mobile提供了一个相对完整的解决方案。
工具条分为:标题（header bar）,页脚（footer bar）和导航（nav bar）这三中应用。
其中标题和页脚在页面中有一些不同的应用方式，默认工具条是以嵌入（inline）的方式定
位的，这种定位方式可以实现最大限度的兼容性，包括在对脚本和 css兼容性不佳的设备都
有很好的优化。
另一种是浮动（fixed）定位的方式，也可以成为“静态“定位，这种定位方式可以让工具条
始终保持在屏幕的顶部或者底部。并可以接受点击事件来显示/隐藏工具条，已达到最大化
利用屏幕空间的目的。
实现方式：在标题和页脚区域加入 data-position="fixed"属性。
标题容器
标题容器是页面页眉区域的显示控件，主要用来显示标题和主要操作的区域。
结构代码：
<div data-role="header">
<h1>Page Title</h1>
</div>
为了方便页面的交互在页面切换后会在标题容器的左侧自动生成一个后退按钮，这样可以简
化我们的开发复杂程度，但是有些时候我们会因为应用的需求而不需要这个后退按钮，可以
在标题容器上添加data-backbtn="false"属性用来阻止后退按钮的自动创建。
标题容器的左侧和右侧分别可以放置一个按钮，在阻止自动生成的后退按钮后，我们就可以
在后退按钮的位置来自定义按钮了。
例如：
<div data-role="header" data-position="inline" data-backbtn="false" >
<a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check">Save</a>
</div> 如果需要自定义默认的后退按钮中的文本，可以用data-back-btn-text="previous"属性来实现，
或者通过扩展的方式实现：$.mobile.page.prototype.options.backBtnText = "previous"。
如果你没有使用标准的结构来创建标题区域，那么框架将不会自动生成默认的按钮。
页脚容器
页脚容器的结构和标题容器的结构基本相同，只要把 data-role 属性的参数设置为”footer”。
例如：
<div data-role="footer">
<h4>Footer content</h4>
</div>
与标题容器相比页脚容器有更多的灵活度，它不会想标题容器一样只允许放置两个按钮，并
且也不会默认的把按钮放置在左右的顶端，页脚的按钮默认是从左到右依次排列的，并且何
以放置更多的按钮。
在页脚容器上只要添加一个 class="ui-bar"就可以将页脚变成一个工具条，你可以不用设置任
何的布局样式就可以在其中添加整齐的按钮。
例如：
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>
如果我们需要一组链接效果，我们可以这样写：
<div data-role="footer" class="ui-bar" data-position="inline">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-icon="delete">Remove</a>
<a href="index.html" data-icon="plus">Add</a>
<a href="index.html" data-icon="arrow-u">Up</a>
<a href="index.html" data-icon="arrow-d">Down</a>
</div>
</div>
技巧：通过使用data-id 属性可以让多个页面使用相同的页脚。 导航
导航容器是一个可以每行容纳最多 5 个按钮的按钮组控件，用一个拥有 data-role="navbar"
属性的div来容纳这些按钮。
例子：
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
在默认的按钮上添加class="ui-btn-active"
如果按钮的数量超过5个，导航容器将会自动以合适的数量分配成多行显示。
按钮
你可以将页面中的任何一个链接通过data-role="button"来声明成为按钮的显示风格。为了风
格统一，框架会在页面加载时自动将form类的按钮格式化为 jQuery Mobile 风格的按钮，不
需要添加data-role属性。
框架中包含了一组常用的图标可以用于按钮，用 data-icon 属性中的参数来定义显示不同的
图标效果。
例如：<a href="index.html" data-role="button" data-icon="delete">Delete</a>
data-icon原生参数列表
参数 图标 arrow-l
arrow-r
arrow-u
arrow-d
delete
plus
minus
check
gear
refresh
forward
back
grid
star
alert
info
home
search
除了可以默认显示左侧的图标之外，还可以用 data-iconpos属性来定义图标与文字的位置关
系。
data-iconpos参数列表：
参数 效果 right 图标在文字的右侧
top 图标在文字上面
bottom 图标在文字下面
data-iconpos="notext"属性可以让按钮隐藏文字。
内联样式
在框架中默认情况下按钮是横向独占根据屏幕宽度横向自适应的，但是我们在应用的应用中
经常需要在一行中显示多个按钮，这时候我们就需要知道一个新的叫做内联模式的属性了
data-inline="true"。
例如：
<div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>
按钮组
jQuery Mobile 框架可以将几个按钮以组的方式显示，data-role="controlgroup"用以展示按钮
间的紧凑关系。例如：
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
如果需要按钮横向排列可以增加 data-type="horizontal"属性。
表单应用
jQuery Mobile 框架为原生的 html表单元素封装了新的表现形式，对触屏设备的操作进行了
优化。在框架的页面中会自动将 form元素渲染成 jQuery Mobile 风格的元素。
form元素的使用和默认的html方式使用相同，可以同样使用Post和 get方式提交数据，但
是需要注意的是元素的 ID 命名问题，在常规的规范中同一个页面中是不允许出现相同的 ID
命名的，在jQuery Mobile中由于其允许在同一个 DOM中存在多个页面，所以建议 form元
素的ID命名在整个项目中是唯一的，防止由于ID 问题引发的错误。
默认情况下框架会自动渲染在标准页面中的 form 元素的风格，一旦成功渲染后，这个控件
元素将可以使用jQuery 中的函数进行操作。 在某些情况下，我们需要使用 html 原生的 form 元素，为了阻止 mobile 框架对该元素的自
动渲染，在框架中我们在 data-role 属性中引入了一个控制参数”none”。使用这个属性参数
就会让该元素以html原生的状态显示。
例如：
<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>
列表应用
信息列表是开发应用中使用频率相对比较高的控件，用于数据显示、导航, 数据列表等。为
了适应不同的信息内容，列表的表现形式也多种多样。
列表的代码结构是以有序和无序列表来实现的，只要在 ul 或 ol 上声明 data-role="listview"
就可以让框架以列表的方式渲染了，例如：
<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
如果需要在列表里添加数据，则需要在数据加载后执行 refresh()方法对列表进行数据更新。
例如：$('ul').listview('refresh');
格式化文本
为了使其尽可能的灵活，jQuery Mobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。
有两种布局方法使其格式化变得更简单：布局表格和可折叠的内容块
◆布局表格：组织内容以列的形式显示，有两列表格，和三列表格
◆可折叠的内容：当点击内容块的标题，则会将其隐藏的详细内容展现出来
下面是一个可折叠内容的实例，单击标题将看到具体的内容，再点击标题则会将展现的内容隐藏。
- <!DOCTYPE html>
- <html>
- <head>
- <title>Collapsible Content Demo</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
- <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
- </head>
- <body>
- <div data-role="page" id="home">
- <div data-role="header">
- <h1>Home</h1>
- </div>
- <div data-role="content">
- <div data-role="collapsible" data-state="collapsed">
- <h3>About this app</h3>
- <p>This app rocks!</p>
- </div>
- </div>
- </div>
- </body>
- </html>
1427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
