jQuery Mobile 学习二



                                                               jQuery Mobile 学习二

在 jQuery Mobile 中创建按钮

jQuery Mobile 中的按钮可通过三种方法创建：

• 使用 <button> 元素
• 使用 <input> 元素
• 使用 data-role="button" 的 <a> 元素

<button>按钮</button>

<input type="button" value="按钮">

<a href="#" <code>data-role="button"</code>>按钮</a>

提示：jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。推荐使用 data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或 <button> 元素用于表单提交

导航按钮

如需通过按钮来链接页面，请使用 data-role="button" 的 <a> 元素：

<a href="#pagetwo" data-role="button">转到页面二</a>

行内按钮

默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline="true"：

<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>

组合按钮

jQuery Mobile 提供了对按钮进行组合的简单方法。

请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮：

<div data-role="controlgroup" data-type="horizontal">  <a href="#anylink" data-role="button">按钮 1</a>  <a href="#anylink" data-role="button">按钮 2</a>  <a href="#anylink" data-role="button">按钮 3</a></div>

提示：默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。

后退按钮

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

<a href="#" data-role="button" data-rel="back">返回</a>

按钮的其他属性有：

data-corners     规定按钮是否有圆角。        值：true | false

data-mini          规定是否是小型按钮。        值：true | false

data-shadow    规定按钮是否有阴影。        值：true | false

按钮添加图标

 jQuery Mobile 提供的一些可用图标如下：

data-icon="arrow-l"                          左箭头

data-icon="arrow-r"                          右箭头

  

data-icon="delete"                           删除

data-icon="info"                               信息

data-icon="home"                           首页                   

data-icon="back"                            返回

data-icon="search"                        搜索

data-icon="grid"                             网格

定位图标

图标被放置的位置：上、右、下或左。使用 data-iconpos 属性来规定位置   

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a><a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a><a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a><a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>

如果加上data-iconpos 设置为 "notext“，将只显示图标

jQuery Mobile 工具栏

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

页眉通常会包含页眉标题/LOGO 或一到两个按钮（通常是首页、选项或搜索按钮）。

您可以在页眉中向左侧或/以及右侧添加按钮。

下面的代码，将向页眉标题文本的左侧添加一个按钮，并向右侧添加一个按钮：

<div data-role="header">  <a href="#" data-role="button">首页</a>  <h1>欢迎来到我的主页</h1>  <a href="#" data-role="button">搜索</a></div>

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

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

<div data-role="footer">  <a href="#" data-role="button">转播到新浪微博</a>  <a href="#" data-role="button">转播到腾讯微博</a>  <a href="#" data-role="button">转播到 QQ 空间</a></div>

注释：页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请在页脚设置类名 "ui-btn"：

<div data-role="footer" class="ui-btn">

定位页眉和页脚

放置页眉和页脚的方式有三种：

• Inline - 默认。页眉和页脚与页面内容位于行内。
• Fixed - 页面和页脚会留在页面顶部和底部。
• Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through

请使用 data-position 属性来定位页眉和页脚：

Inline 定位（默认）

<div data-role="header" data-position="inline"></div><div data-role="footer" data-position="inline"></div>

Fixed 定位

<div data-role="header" data-position="fixed"></div><div data-role="footer" data-position="fixed"></div>

Fullscreen 定位

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

jQuery Mobile 导航栏

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

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

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

<div data-role="header">  <div data-role="navbar">    <ul>      <li><a href="#anylink">首页</a></li>      <li><a href="#anylink">页面二</a></li>      <li><a href="#anylink">搜索</a></li>    </ul>  </div></div>

提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。

活动按钮

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

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

<li><a href="#anylink" class="ui-btn-active">首页</a></li>

对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。如果要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类：

jQuery Mobile 可折叠

可折叠的内容块

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

如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：

<div data-role="collapsible">  <h1>点击我 - 我可以折叠！</h1>  <p>我是可折叠的内容。</p></div>

默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed="false"：

嵌套的可折叠块

可以嵌套可折叠内容块：

<div data-role="collapsible">  <h1>点击我 - 我可以折叠！</h1>  <p>我是被展开的内容。</p>  <div data-role="collapsible">    <h1>点击我 - 我是嵌套的可折叠块！</h1>    <p>我是嵌套的可折叠块中被展开的内容。</p>  </div></div>

可折叠集合

可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。

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

<div data-role="collapsible-set">  <div data-role="collapsible">    <h1>点击我 - 我可以折叠！</h1>    <p>我是被展开的内容。</p>  </div>  <div data-role="collapsible">    <h1>点击我 - 我可以折叠！</h1>    <p>我是被展开的内容。</p>  </div></div>

jQuery Mobile 布局网格

jQuery Mobile 提供了一套基于 CSS 的列布局方案。不过，一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。

但是有时您需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列布局就恰如其分。

网格中的列是等宽的（总宽是 100%），无边框、背景、外边距或内边距。

可使用的布局网格有四种：

网格类列列宽度对应实例ui-grid-a250% / 50%ui-block-a|b测试ui-grid-b333% / 33% / 33%ui-block-a|b|c测试ui-grid-c425% / 25% / 25% / 25%ui-block-a|b|c|d测试ui-grid-d520% / 20% / 20% / 20% / 20%ui-block-a|b|c|d|e测试

提示：在列容器中，根据不同的列数，子元素可设置类 ui-block-a|b|c|d|e。这些列将依次并排浮动。

实例 1: 对于 ui-grid-a 类（两列布局），您必须规定两个子元素 ui-block-a 和 ui-block-b。

实例 2: 对于 ui-grid-b 类（三列布局），请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c。