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-aui-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折叠面板

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

效果如图:

点击以后效果图:

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>

效果如下图:

分享给朋友:
您可能感兴趣的文章:
随机阅读: