JQuery Mobile学习笔记.docx

1、JQuery Mobile学习笔记JQuery Mobile例子解释： data-role=page 是显示在浏览器中的页面 data-role=header 创建页面上方的工具栏（常用于标题和搜索按钮） data-role=content 定义页面的内容，比如文本、图像、表单和按钮，等等 data-role=footer 创建页面底部的工具栏定位页眉和页脚放置页眉和页脚的方式有三种： Inline - 默认。页眉和页脚与页面内容位于行内。 Fixed - 页面和页脚会留在页面顶部和底部。 Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also ove

2、r the page content. It is also slightly see-through请使用 data-position 属性来定位页眉和页脚：Inline 定位（默认）jQuery Mobile 主题主题化的页面、内容和页脚主题化的对话框实例Go To The Themed Dialog Page 主题化的按钮实例ButtonButtonButton主题化的图标实例PlusjQuery Mobile 过渡效果jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换：滑动到页面二滑动以上所有效果同时支持反

3、向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为 reverse 的 data-direction 属性。在后退按钮上是默认的。jQuery Mobile 按钮在 jQuery Mobile 中创建按钮jQuery Mobile 中的按钮可通过三种方法创建： 使用 元素 使用 元素 使用 data-role=button 的 元素按钮按钮提示：jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。我们推荐您使用 data-role=button 的 元素来创建页面之间的链接，而 或 元素用于表单提交。转到页面二行内按钮默认情况下，按钮

4、会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline=true：转到页面二组合按钮jQuery Mobile 提供了对按钮进行组合的简单方法。请将 data-role=controlgroup 属性与 data-type=horizontal|vertical 一同使用，以规定水平或垂直地组合按钮：实例 按钮 1 按钮 2 按钮 3后退按钮(功能按钮)如需创建后退按钮，请使用 data-rel=back 属性（会忽略锚的 href 值）：实例返回 普通按钮和迷你按钮： 按钮 1 按钮 2 行内按钮：普通和迷你的： 按钮 1 按钮

5、2 按钮 1 按钮 2 jQuery Mobile 按钮图标jQuery Mobile 提供的一套图标可令您的按钮更具吸引力。如需向您的按钮添加图标，请使用 data-icon 属性：搜索定位图标您也能够规定图标被放置的位置：上、右、下或左。请使用 data-iconpos 属性来规定位置：图标位置：上右下左只显示图标 如果只需显示图标，请将 data-iconpos 设置为 notext：搜索jQuery Mobile 工具栏工具栏元素常被放置于页眉和页脚中 - 以实现“已访问”的导航： 首页 欢迎来到我的主页 搜索不过，如果您在 元素之后放置按钮链接，那么它不会显示在文本右侧。如需向页眉标

6、题的右侧添加按钮，请规定类名 ui-btn-right： 欢迎来到我的主页 搜索提示：页眉可包含一个或两个按钮，然而页脚没有限制。页脚栏与页眉相比，页脚更具伸缩性 - 它们更实用且多变，所以能够包含所需数量的按钮：实例 转播到新浪微博 转播到腾讯微博 转播到 QQ 空间注释：页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请在页脚设置类名 ui-btn：实例您也能够选择在页脚中水平还是垂直地组合按钮： 转播到新浪微博 转播到腾讯微博 转播到 QQ 空间 jQuery Mobile 导航栏导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。默认地，导航栏

7、中的链接会自动转换为按钮（无需 data-role=button）。请使用 data-role=navbar 属性来定义导航栏：实例 首页 页面二 搜索 提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。活动按钮当导航栏中的链接被敲击时，会获得选取外观（按下）。如需在不敲击链接时实现此外观，请使用 class=ui-btn-active：实例首页对于多个页面，您也许需要为每个按钮设置“被

8、选”外观，以表示用户正在浏览该页面。如果要这么做，请向链接添加 ui-state-persist 类，以及 ui-btn-active 类： 欢迎来到我的主页 首页 页面二 jQuery Mobile 可折叠可折叠的内容块可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。如需创建可折叠的内容块，请向某个容器分配 data-role=collapsible 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：实例 点击我 - 我可以折叠！ 我是可折叠的内容。默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 d

9、ata-collapsed=false：实例 点击我 - 我可以折叠！ 现在我默认是展开的。嵌套的可折叠块可以嵌套可折叠内容块：实例 点击我 - 我可以折叠！ 我是被展开的内容。 点击我 - 我是嵌套的可折叠块！ 我是嵌套的可折叠块中被展开的内容。 提示：可折叠内容块可以被嵌套您希望的任意次数。可折叠集合可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。创建若干内容块，然后通过 data-role=collapsible-set 用新容器包装这个可折叠块：实例 点击我 - 我可以折叠！ 我是被展开的内容。 点击我 - 我可以折叠！ 我是被展开的内容。