jQueryMobile

1、简介

1. HTML5 UI framework;
2. 专门用于RWD( responsive web design响应式网站)和app应用;
3. 适用所有移动设备，平板，桌面设备
4. 依赖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标签的属性中，有如下表现形式:

1. data-transition="slide"
2. data-transition="slideup"
3. data-transition="slidedowm"
4. data-transition="fade"
5. data-transition="pop"
6. 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

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>

效果如下图：

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

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>

效果如下图：

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", 效果如下图：

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

15. NAVBAR

给容器添加属性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 -->

效果如下图：

15.3 FOOTER中的NAVBAR

代码如下:

<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>

效果如下图：