后退按钮（功能按钮）

如需创建后退按钮，请使用data-rel="back"属性（会忽略锚的href值）：

实例

返回

普通按钮和迷你按钮：

按钮1

按钮2

行内按钮：

普通和迷你的：

按钮1

按钮2

按钮1

按钮2

jQueryMobile按钮图标

jQueryMobile提供的一套图标可令您的按钮更具吸引力。

如需向您的按钮添加图标，请使用data-icon属性：

搜索

定位图标

您也能够规定图标被放置的位置：

上、右、下或左。

请使用data-iconpos属性来规定位置：

图标位置：

上

右

下

左

只显示图标如果只需显示图标，请将data-iconpos设置为"notext"：

搜索

jQueryMobile工具栏

工具栏元素常被放置于页眉和页脚中-以实现“已访问”的导航：

首页

欢迎来到我的主页

搜索

不过，如果您在

元素之后放置按钮链接，那么它不会显示在文本右侧。

如需向页眉标题的右侧添加按钮，请规定类名"ui-btn-right"：

欢迎来到我的主页

搜索

提示：

页眉可包含一个或两个按钮，然而页脚没有限制。

页脚栏

与页眉相比，页脚更具伸缩性-它们更实用且多变，所以能够包含所需数量的按钮：

实例

转播到新浪微博

转播到腾讯微博

转播到QQ空间

注释：

页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。

如果要修正该问题，请在页脚设置类名"ui-btn"：

实例

您也能够选择在页脚中水平还是垂直地组合按钮：

转播到新浪微博

转播到腾讯微博

转播到QQ空间

jQueryMobile导航栏

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。

默认地，导航栏中的链接会自动转换为按钮（无需data-role="button"）。

请使用data-role="navbar"属性来定义导航栏：

实例

• 首页
• 页面二
• 搜索

提示：

按钮的宽度，默认地，与其内容一致。

使用无序列表来均等地划分按钮：

一个按钮占据100%的宽度，两个按钮各分享50%的宽度，三个按钮33.3%，以此类推。

不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。

活动按钮

当导航栏中的链接被敲击时，会获得选取外观（按下）。

如需在不敲击链接时实现此外观，请使用class="ui-btn-active"：

实例

对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。

如果要这么做，请向链接添加"ui-state-persist"类，以及"ui-btn-active"类：

欢迎来到我的主页

• 首页
• 页面二

jQueryMobile可折叠

可折叠的内容块

可折叠（Collapsibles）允许您隐藏或显示内容-对于存储部分信息很有用。

如需创建可折叠的内容块，请向某个容器分配data-role="collapsible"属性。

在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意HTML标记：

实例

点击我-我可以折叠！

我是可折叠的内容。

默认地，该内容是关闭的。

如需在页面加载时扩展内容，请使用data-collapsed="false"：

实例

点击我-我可以折叠！

现在我默认是展开的。

嵌套的可折叠块

可以嵌套可折叠内容块：

实例

点击我-我可以折叠！

我是被展开的内容。

点击我-我是嵌套的可折叠块！

我是嵌套的可折叠块中被展开的内容。

提示：

可折叠内容块可以被嵌套您希望的任意次数。

可折叠集合

可折叠集合（Collapsiblesets）指的是被组合在一起的可折叠块（常被称为手风琴）。

当新块被打开时，所有其他块会关闭。

创建若干内容块，然后通过data-role="collapsible-set"用新容器包装这个可折叠块：

实例

点击我-我可以折叠！

我是被展开的内容。

点击我-我可以折叠！

我是被展开的内容。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

JQuery Mobile学习笔记 Mobile 学习 笔记

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。