jQueryMobile

糖果爸比

于 2017-12-06 14:16:47 发布

阅读量1k

点赞数

分类专栏： jQueryMobile 文章标签： jQM 移动设备

本文链接：https://blog.csdn.net/hardesyy/article/details/78730129

版权

jQueryMobile 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、简介

HTML5 UI framework;
专门用于RWD( responsive web design响应式网站)和app应用;
适用所有移动设备，平板，桌面设备
依赖jQuery

2、资源

官网

菜鸟教程

3、page-single

基本结构如下：

<!--page-->
<div data-role="page" data-theme="b">
    <!--header-->
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <!--content-->
    <div role="main" class="ui-content">
        content
    </div>
    <!--footer-->
    <div data-role="footer" data-position="fixed">
        <h1>footer</h1>
    </div>
</div>

3.1 `data-position`

data-position="fixed"设置固定定位

3.2 `data-theme`

设置主题，如data-theme="b"为反色主题

4、多页面

给每个page指定特有的id，将id传递给a链接的href属性中，不要忘记加#号，如下：

<div data-role="page" id="page1" data-title="jQueryMobile">
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="#page2" data-transition="slide">page2</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>footer</h1>
    </div>
</div>
<div data-role="page" id="page2">

    <div role="main" class="ui-content">
        <a href="#page1" data-transition="pop" data-direction="reverse">page1</a>
    </div>

</div>

4.1. data-title

指定页面的title标题

4.2. data-transition

指定页面跳转的动画，添加到a标签的属性中，有如下表现形式:

data-transition="slide"
data-transition="slideup"
data-transition="slidedowm"
data-transition="fade"
data-transition="pop"
data-transition="flip"

4.3. data-direction

data-direction="reverse" 指定页面切换的动画为反向

5、button

按钮，可以使用a、button、input标签指定按钮样式。

5.1 默认样式

a 标签添加class ui-btn

<a class="ui-btn">基础样式button</a>
<button>基础样式button</button>
<input type="button" value="基础样式button">

5.2 圆角样式

使用圆角的样式，添加class ui-corner-all

<a href="#" class="ui-btn ui-corner-all">圆角样式按钮</a>
<button class="ui-btn ui-corner-all">按钮</button>

5.3 阴影样式

使用阴影样式，添加class ui-shadow

<a href="#" class="ui-btn ui-shadow">阴影样式按钮</a>
<button class="ui-btn ui-shadow">按钮</button>

5.4 行内样式

使用行内样式，添加class ui-btn-inline

<a href="#" class="ui-btn ui-btn-inline">行内样式按钮</a>

5.5 主题样式

可以使用class ui-btn-a 与 ui-btn-b设置按钮主题， ui-btn-b 为反色主题，如下：

<a href="#" class="ui-btn ui-btn-a">a样式按钮</a>
<a href="#" class="ui-btn ui-btn-b">b样式按钮</a>

5.6 MINI样式

添加class ui-mini，设置按钮为mini样式：

<a href="#" class="ui-btn ui-mini">mini样式按钮</a>

5.7 ICON样式

按钮中添加icon，给元素添加class ui-icon-*，常用icon列表参见第6章，同时指定按钮放置的位置。

按钮放置位置，通过class ui-btn-icon-*指定，* 有如下的值：

ui-btn-icon-left
ui-btn-icon-right
ui-btn-icon-top
ui-btn-icon-button
ui-btn-icon-notext 无文本样式

<a href="#" class="ui-btn ui-btn-inline ui-icon-camera ui-btn-icon-left">icon样式按钮</a>

5.8 禁用样式

给按钮添加class ui-state-disabled 呈现禁用样式

5.9 data属性控制样式

data-role=”button” 定义按钮
data-theme=”b” 切换到深色的主题,可以单独控制组件的主题样式
data-icon=”back” 添加图标icon
data-iconpos=”top” 定义icon的位置
data-inline=”true” 行内显示
data-role=”controlgroup” 形成一个组
data-corners=”false” 去掉默认的圆角
data-shadow=”false” 去掉阴影
data-role=”controlgroup” data-type=”horizontal” 横向组

6. ICONS

icons icons icons

8. DIALOG对话框

8.1 显示对话框

在按钮上添加 data-rel="dialog"，在页面上添加data-role="dialog"，代码如下：

<div data-role="page" id="page1" data-title="jQueryMobile">
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <div role="main" class="ui-content">
        <!--看这里-->
        <a href="#dialog" class="ui-btn ui-corner-all" data-rel="dialog">基础样式button</a>
    </div>
</div>
<!--还有这儿-->
<div data-role="dialog" id="dialog">
    hello
</div>

8.2 关闭对话框

$('.ui-dialog').dialog('close');

9. LIST列表

9.1 无序列表

使用ul>li标签，并给ul添加data-role="listview"属性

代码如下：

<ul data-role="listview">
  <li>Acura</li>
  <li>Audi</li>
  <li>BMW</li>
  <li>Cadillac</li>
  <li>Ferrari</li>
</ul>

效果如下图：

无序列表

9.2 有序列表

使用ol>li标签，并给ol添加属性data-role="listview"

代码如下：

<ol data-role="listview">
  <li>Acura</li>
  <li>Audi</li>
  <li>BMW</li>
  <li>Cadillac</li>
  <li>Ferrari</li>
</ol>

效果如下图：

有序列表

9.3 链接列表

再无序列表的基础上，li中使用a标签包裹子元素。

代码如下：

<ul data-role="listview">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

效果如下图：

链接列表

9.4 内置列表

在链接列表的基础上，添加属性data-inset="true"，为列表添加边距、圆角等样式。

代码如下：

<ul data-role="listview" data-inset="true">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

效果如下图：

内置列表

9.5 过滤列表

在列表的基础上，添加属性data-filter="true"，为列表添加过滤样式及功能，并通过属性data-filter-placeholder="占位文字"设置搜索框中的占位文字。

代码如下：

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search fruits...">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

效果如下图：

过滤列表

在输入框中输入内容可以对列表中的内容进行过滤，如图：

9.6 DATALIST列表

类似于HTML5中data-list的效果，在输入框中输入内容会有个AutoComplete提示效果

代码如下：

<form class="ui-filterable">
    <input id="autocomplete-input" data-type="search" placeholder="Search fruits...">
</form>

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-input="#autocomplete-input">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

效果如下图：

DATALIST

当在输入框输入内容后，效果如下图：

DATALIST

9.7 类分割列表（类似通讯录列表）

代码如下：

<ul data-role="listview" data-inset="true" data-divider-theme="a">
  <li data-role="list-divider">Mail</li>
  <li><a href="#">Inbox</a></li>
  <li><a href="#">Outbox</a></li>
  <li data-role="list-divider">Contacts</li>
  <li><a href="#">Friends</a></li>
  <li><a href="#">Work</a></li>
</ul>

效果如下图：

类分割

9.8 自动类分割列表（类似通讯录列表）

给列表添加属性data-autodividers="true"会自动进行类分割

代码如下：

<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
  <li><a href="index.html">Adam Kinkaid</a></li>
  <li><a href="index.html">Alex Wickerham</a></li>
  <li><a href="index.html">Avery Johnson</a></li>
  <li><a href="index.html">Bob Cabot</a></li>
  <li><a href="index.html">Caleb Booth</a></li>
  <li><a href="index.html">Christopher Adams</a></li>
  <li><a href="index.html">Culver James</a></li>
</ul>

效果如下图：

9.9 气泡列表

给包裹气泡文本内容的元素添加class ui-li-count，同时可以在ul元素上添加属性data-count-theme="b"设置主题样式

代码如下：

<ul data-role="listview" data-count-theme="b" data-inset="true">
  <li><a href="#">Inbox <span class="ui-li-count">12</span></a></li>
  <li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
  <li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
  <li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
  <li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>

效果如下图：

9.10 图标列表

在li上添加属性data-icon="xxx"设置图标

代码如下：

<ul data-role="listview" data-inset="true">
  <li data-icon="custom" id="skull"><a href="#">custom-icon</a></li>
  <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
  <li data-icon="gear"><a href="#">data-icon="gear"</a></li>
  <li data-icon="info"><a href="#">data-icon="info"</a></li>
  <li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

效果如下图：

图标列表

9.11 ICONS: 16×16

在a标签中添加img标签，并设置class ui-li-icon

代码如下：

<ul data-role="listview" data-inset="true">
  <li><a href="#"><img src=".." class="ui-li-icon ui-corner-none">France</a></li>
  <li><a href="#"><img src=".." class="ui-li-icon">Germany</a></li>
  <li><a href="#"><img src=".." class="ui-li-icon">Great Britain</a></li>
  <li><a href="#"><img src=".." class="ui-li-icon">Finland</a></li>
  <li><a href="#"><img src=".." class="ui-li-icon ui-corner-none">United States</a></li>
</ul>

效果如下图：

9.12 缩略图列表

在a标签中添加img标签即可给列表添加缩略图。

代码如下：

<ul data-role="listview" data-inset="true">
  <li><a href="#">
    <img src="../_assets/img/album-bb.jpg">
    <h2>Broken Bells</h2>
    <p>Broken Bells</p></a>
  </li>
  <li><a href="#">
    <img src="../_assets/img/album-hc.jpg">
    <h2>Warning</h2>
    <p>Hot Chip</p></a>
  </li>
  <li><a href="#">
    <img src="../_assets/img/album-p.jpg">
    <h2>Wolfgang Amadeus Phoenix</h2>
    <p>Phoenix</p></a>
  </li>
</ul>

效果如下图：

9.14 格式化列表

效果图中的时间内容样式，添加class ui-li-aside。

代码如下：

<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
  <li><a href="index.html">
    <h2>Stephen Weber</h2>
    <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
    <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
    <p class="ui-li-aside"><strong>6:24</strong>PM</p>
    </a>
  </li>
  <li><a href="index.html">
    <h2>jQuery Team</h2>
    <p><strong>Boston Conference Planning</strong></p>
    <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
    <p class="ui-li-aside"><strong>9:18</strong>AM</p>
    </a>
  </li>
  <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
  <li><a href="index.html">
    <h2>Avery Walker</h2>
    <p><strong>Re: Dinner Tonight</strong></p>
    <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!</p>
    <p class="ui-li-aside"><strong>4:48</strong>PM</p>
    </a>
  </li>
</ul>

效果如下图：

9.15 列表主题

data-theme="b" 设置列表主题
data-divider-theme="a" 设置类分割样式
data-count-theme="a" 设置气泡样式

代码如下：

<ul data-role="listview" data-inset="true" data-theme="b" data-divider-theme="a" data-count-theme="a">
  <li data-role="list-divider">Divider</li>
  <li><a href="index.html" data-theme="a">Inbox <span class="ui-li-count">12</span></a></li>
  <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
  <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
</ul>

效果如下图：

9.16 列表中表单

代码如下：

<form>
  <ul data-role="listview" data-inset="true">
    <li class="ui-field-contain">
      <label for="name2">Text Input:</label>
      <input type="text" name="name2" id="name2" value="" data-clear-btn="true">
    </li>
    <li class="ui-field-contain">
      <label for="textarea2">Textarea:</label>
      <textarea cols="40" rows="8" name="textarea2" id="textarea2"></textarea>
    </li>
    <li class="ui-field-contain">
      <label for="flip2">Flip switch:</label>
      <select name="flip2" id="flip2" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
      </select>
    </li>
    <li class="ui-field-contain">
      <label for="slider2">Slider:</label>
      <input type="range" name="slider2" id="slider2" value="0" min="0" max="100" data-highlight="true">
    </li>
    <li class="ui-field-contain">
      <label for="select-choice-1" class="select">Choose shipping method:</label>
      <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
      </select>
    </li>
    <li class="ui-body ui-body-b">
      <fieldset class="ui-grid-a">
        <div class="ui-block-a"><button type="submit" class="ui-btn ui-corner-all ui-btn-a">Cancel</button></div>
        <div class="ui-block-b"><button type="submit" class="ui-btn ui-corner-all ui-btn-a">Submit</button></div>
      </fieldset>
    </li>
  </ul>
</form>

效果如下图：

10. 表格table

给table标签添加属性data-role="table"

代码如下：

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
  <thead>
    <tr>
      <th data-priority="2">Rank</th>
      <th>Movie Title</th>
      <th data-priority="3">Year</th>
      <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th data-priority="5">Reviews</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
      <td>1941</td>
      <td>100%</td>
      <td>74</td>
    </tr>
    <tr>
      <th>2</th>
      <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
      <td>1942</td>
      <td>97%</td>
      <td>64</td>
    </tr>
    <tr>
      <th>3</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
      <td>1972</td>
      <td>97%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>4</th>
      <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
      <td>1939</td>
      <td>96%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>5</th>
      <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
      <td>1962</td>
      <td>94%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>6</th>
      <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
      <td>1964</td>
      <td>92%</td>
      <td>74</td>
    </tr>
    <tr>
      <th>7</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
      <td>1967</td>
      <td>91%</td>
      <td>122</td>
    </tr>
    <tr>
      <th>8</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
      <td>1939</td>
      <td>90%</td>
      <td>72</td>
    </tr>
    <tr>
      <th>9</th>
      <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
      <td>1952</td>
      <td>89%</td>
      <td>85</td>
    </tr>
    <tr>
      <th>10</th>
      <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
      <td>2010</td>
      <td>84%</td>
      <td>78</td>
    </tr>
  </tbody>
</table>

效果如下图：

11. 栅格GRID

栅格系统，栅格容器使用class ui-grid-* ，添加class ui-responsive可使其变成响应式栅格。

栅格中的每一项添加class ui-block-*，第一项为ui-block-a，第二项为ui-block-b，以此类推，有几个block就是几等分

11.1 单行两列

代码如下：

<div class="ui-grid-a">
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
</div>

效果如下图：

grid

11.2 单行多列

代码如下：

<div class="ui-grid-c">
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
  <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
  <div class="ui-block-d"><div class="ui-bar ui-bar-a" style="height:60px">Block D</div></div>
</div>

效果如下图：

11.3 多行多列

代码如下：

<div class="ui-grid-b">
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
  <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
  <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
  <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
</div><!-- /grid-c -->

效果如图：

11.4 多个栅格

代码如下：

<h3>Grid A (50/50)</h3>
<div class="ui-grid-a ui-responsive">
  <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
  <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
</div><!-- /grid-a -->
<h3>Grid B (33/33/33)</h3>
<div class="ui-grid-b ui-responsive">
  <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
  <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
  <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
</div><!-- /grid-b -->
<h3>Grid C (25/25/25/25)</h3>
<div class="ui-grid-c ui-responsive">
  <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
  <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
  <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
  <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
</div><!-- /grid-c -->
<h3>Grid D (20/20/20/20/20)</h3>
<div class="ui-grid-d ui-responsive">
  <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
  <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
  <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
  <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
  <div class="ui-block-e"><div class="ui-body ui-body-d">E</div></div>
</div>

效果如图：

12. Collapsible折叠面板

12.1 普通折叠面板

给容器添加属性data-role="collapsible"，h4标签是显示的内容，p标签是被折叠的内容，代码如下：

<div data-role="collapsible">
  <h4>Heading</h4>
  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

效果如图：

点击以后效果图：

12.2 主题折叠面板

给容器添加属性data-theme="b"设置面板主题，data-content-theme="b"设置内容的主题样式，代码如下：

<div data-role="collapsible">
  <h4>Heading</h4>
  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

效果如图：

12.3 展开折叠面板

给容器添加属性data-collapsed="false"默认展开折叠面板，代码如下：

<div data-role="collapsible" data-collapsed="false">
  <h4>Heading</h4>
  <ul data-role="listview">
    <li><a href="#">List item 1</a></li>
    <li><a href="#">List item 2</a></li>
    <li><a href="#">List item 3</a></li>
  </ul>
</div>

效果如图：

12.4 MINI 折叠面板

给容器添加属性data-mini="true" 设置mini样式

12.5 ICON

可以为折叠面板添加icon，通过给容器添加属性data-collapsed-icon="xxx"设置折叠时icon，通过属性data-expanded-icon="xxx"设置展开时的icon。

代码如下：

<div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
  <h4>Heading</h4>
  <ul data-role="listview" data-inset="false">
    <li>Read-only list item 1</li>
    <li>Read-only list item 2</li>
    <li>Read-only list item 3</li>
  </ul>
</div>

折叠时的效果图：

展开时的效果图：

通过属性data-iconpos="right"设置icon的位置，如图：

12.6 列表折叠面板

<div data-role="collapsible" data-inset="false">
  <h3>Pets</h3>
  <ul data-role="listview">
    <li><a href="#">Canary</a></li>
    <li><a href="#">Cat</a></li>
    <li><a href="#">Dog</a></li>
    <li><a href="#">Gerbil</a></li>
    <li><a href="#">Iguana</a></li>
    <li><a href="#">Mouse</a></li>
  </ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-inset="false">
  <h3>Farm animals</h3>
  <ul data-role="listview">
    <li><a href="#">Chicken</a></li>
    <li><a href="#">Cow</a></li>
    <li><a href="#">Duck</a></li>
    <li><a href="#">Horse</a></li>
    <li><a href="#">Pig</a></li>
    <li><a href="#">Sheep</a></li>
  </ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-inset="false">
  <h3>Wild Animals</h3>
  <ul data-role="listview">
    <li><a href="#">Aardvark</a></li>
    <li><a href="#">Alligator</a></li>
    <li><a href="#">Ant</a></li>
    <li><a href="#">Bear</a></li>
    <li><a href="#">Beaver</a></li>
    <li><a href="#">Cougar</a></li>
    <li><a href="#">Dingo</a></li>
  </ul>
</div><!-- /collapsible -->

效果如下图：

13. TAB 选项卡

<div data-role="tabs" id="tabs">
  <!--tab 按钮-->
  <div data-role="navbar">
    <ul>
      <li><a href="#one" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li>
    </ul>
  </div>
  <!--tab 内容-->
  <div id="one" class="ui-body-d ui-content">
    <h1>First tab contents</h1>
  </div>
  <div id="two">
    <ul data-role="listview" data-inset="true">
      <li><a href="#">Acura</a></li>
      <li><a href="#">Audi</a></li>
      <li><a href="#">BMW</a></li>
      <li><a href="#">Cadillac</a></li>
      <li><a href="#">Ferrari</a></li>
    </ul>
  </div>
</div>

效果如下图：

14. Controlgroup

给容器添加属性data-role="controlgroup"使其成为一个Controlgroup组件。

14.1 纵向

代码如下：

<div data-role="controlgroup">
  <a href="#" class="ui-btn ui-corner-all">No icon</a>
  <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
  <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
  <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">Top</a>
  <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">Bottom</a>
  <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
</div>

效果如图：

14.2 MINI

给容器添加属性data-mini="true"设置mini样式

14.3 横向

给容器添加属性 data-type="horizontal" 设置横向Controlgroup。

代码如下：

<div data-role="controlgroup" data-type="horizontal">
  <a href="#" class="ui-btn ui-corner-all">No icon</a>
  <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
  <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
</div>

效果如图：

14.4 单选按钮组

代码如下：

<form>
  <fieldset data-role="controlgroup">
    <legend>Vertical:</legend>
    <input type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked">
    <label for="radio-choice-v-2a">One</label>
    <input type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="off">
    <label for="radio-choice-v-2b">Two</label>
    <input type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="other">
    <label for="radio-choice-v-2c">Three</label>
  </fieldset>
</form>

效果如图：

横向单选按钮组，添加属性data-type="horizontal", 效果如下图：

其他控件（如：多选框、下拉选框）同理。

给容器添加属性data-role="navbar"设置navbar样式。

15.1 普通样式

代码如下：

<div data-role="navbar">
  <ul>
    <li><a href="#" class="ui-btn-active">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
  </ul>
</div><!-- /navbar -->

效果如图：

15.2 HEADER中的NAVBAR

代码如下:

<div data-role="header" style="overflow:hidden;">
  <h1>I'm a header</h1>
  <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
  <div data-role="navbar">
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div><!-- /navbar -->
</div><!-- /header -->

效果如下图：

代码如下:

<div data-role="footer" style="overflow:hidden;">
  <h4 style="text-align:center;">I'm the footer</h4>
  <div data-role="navbar">
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div><!-- /navbar -->
</div><!-- /header -->

效果如下图：

15.4 icon

代码如下：

<div data-role="footer">
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="grid">Summary</a></li>
      <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
      <li><a href="#" data-icon="gear">Setup</a></li>
    </ul>
  </div><!-- /navbar -->
</div><!-- /footer -->

效果如下图：

16. panel侧滑面板

在page中添加容器，为容器添加属性data-role="panel"并设置唯一id。触发侧滑面板的方式是：给a链接的href属性传递panel的id值，不要丢掉#号，示例代码如下：

16.1 普通panel

<div data-role="page">
    <div data-role="panel" id="panel1">
        hello panel
    </div>
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="#panel1" data-role="button">panel</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>footer</h1>
    </div>
</div>

16.2 panel 动画形式

可以通过设置panel属性data-display="overlay" 来指定panel的动画形式，有如下三个取值：

overlay

reveal

push

16.3 panel 位置

可以通过设置panel属性data-position="right" 指定panel的位置，代码如下：

<div data-role="page">
    <div data-role="panel" id="panel1" data-display="push" data-position="right">
        hello panel
    </div>
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="#panel1" data-role="button">panel</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>footer</h1>
    </div>
</div>

效果如下图：

16.4 panel 主题

可以通过设置panel属性data-theme="b"指定panel的主题样式，代码如下：

<div data-role="page">
    <div data-role="panel" id="panel1" data-display="push" data-position="right" data-theme="b">
        hello panel
    </div>
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="#panel1" data-role="button">panel</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>footer</h1>
    </div>
</div>