JQuery Mobile

JQuery Mobile笔记

 

一、JQuery Mobile页面

1. JQuery mobile页面分为头部（header）、内容（content）、和底部（footer）。

示例1：

<div data-role=”page” id=”page” >//data-role=”page”为显示在浏览器中的页面<div data-role=”header” id=”header”><h1>data-role=”header”为页面的头部可以用来做标题或者添加一些搜索按钮</h1></div><div data-role=”content” id=”content”><h1>data-role=”content”定义页面的内容，比如文本、图像、表单和按钮，等等</h1></div><div data-role=”footer” id=”footer”><h1>data-role=”footer”为页面的底部可以用来创建底部工具栏</h1></div> </div>

Jquery Mobile可以在单一的html页面中添加多个页面通过<a href=”#ID”></>来链接。

示例2：

<div data-role=”page” id=”pageone”><div data-role=”header”><h1>页面一</h1></div><div data-role=”content” id=”content”><ul data-role=”listview”><li><a href=”#pagetwo” data-rel=”dialog”>跳转到页面二,以dialog形式显示</a></li></ul></div></div><!--页面二--><div data-role=”page” id=”pagetwo”><div data-role=”header” id=”header”><h1>页面二</h1></div><div data-role=”content”><h3>页面二以dialog方式显示</h3></div><div data-role=”footer”><h1>底部</h1></div></div>

2.JQueryMobile页面跳转的过渡效果

页面跳转过渡效果：在跳转的<a>元素中设定data-transition=””即可；

示例1：

<a href=”#ID” data-transition=”fade”>Test-页面过渡效果</a>

过渡

描述

fade

默认。淡入淡出到下一页。

flip

从后向前翻动到下一页。

flow

抛出当前页面，引入下一页。

pop

像弹出窗口那样转到下一页。

slide

从右向左滑动到下一页。

slidefade

从右向左滑动并淡入到下一页。

slideup

从下到上滑动到下一页。

slidedown

从上到下滑动到下一页。

turn

转向下一页。

none

无过渡效果。

注意：在Jquery Mobile中所有的过渡效果都是默认的，只要浏览器支持，如果需要与上述反向的过渡效果可以添加data-direction=”reverse”来改变

示例2：

<a href=”#pagetwo” data-transition=”fade” data-direction=”reverse”>滑动</a>

 

二、JQuery Mobile的按钮

Jquery mobile的按钮有三种创建方式；

1.使用<button>元素

2.使用<input type=”button”>元素

3.使用data-role=”button”属性的<a>元素

注意：JQuery mobile中推荐使用data-role=”button”的<a>元素来访问页面的链接

<button>和<input>用于数据的提交

示例1：

<div data-role=”content” id=”content”><button>Button01</button><input type=”button” name=”button02”value=”Button02”><a href=”#pagetwo” data-role=”button”>Button03</a></div>

4.JQuery Mobile的按钮的图片

JQuery Mobile 中可以通过data-icon=””来设置按钮的图片样式，

通过data-iconpos选择top、bottom、right、left来设置图片位置。如果不需要文字可以选择notext来隐藏Button上面的文字。

5.JQueryMobile 可以通过设置data-role=”controlgroup”将按钮合并成一组，通过设置data-type="horizontal"或 data-type="vertical"来设置水平或者垂直分布

示例1：

<div data-role=”controlgroup”data-type=”horizontal”><a href=”#pageone” data-role=”button”>Button01</a><a href=”#pagetwo” data-role=”button”>Button02</a></div>

三、JQuery Mobile标题栏/工具栏

3.1 JQuerymobile中可以向标题栏或者底部工具栏中添加按钮；

示例1：

<div data-role=”header” id=”header”><a href=”#pageone” data-icon=”search”>左</a>//左边按钮<h1>头部标题栏</h1><a href=”#pagetwo” data-icon=”search”>右</a></div>

注意：当只有一个按钮时可以系统默认按钮是在左边，如果需要更改按钮位置可以通过设置class=”ui-btn-right”来设置button的位置，底部工具栏添加按钮也是默认靠左，可以通过设置class=”ui-btn”来使按钮居中。

 

3.2   JQuery Mobile头部/底部可以通过设置data-position来定位头部和底部的位置

方法有三种：

1.inline（默认）即头部和底部位置跟随页面滑动而改变

2.fixed（固定）即头部和底部不随页面的滑动改变，始终固定在屏幕的上方和下方

3.data-fullscreen通常和fixed一起使用，触摸屏幕时显示或隐藏头部和底部。

示例1：

<div data-role=”header” id=”header”><a href=”#pageone” data-icon=”search”>左</a>//左边按钮<h1>头部标题栏</h1><a href=”#pagetwo” data-icon=”search”>右</a></div>

四、JQuery Mobile导航栏

4.1   jquery mobile的头部、内容和底部都可以添加导航栏

添加导航栏只需要在<div>元素中增加data-role=”navbar”就可以了，导航栏按钮一行超过5个将会发生弯折，宽度平均分配。<a>元素中不需要添加data-role=”button”,系统已默认。

示例1：

<div data-role=”page” id=”testNavbar”<div data-role=”header” id=”header”><div data-role=”navbar” >//增加data-role=”navbar”<ul><li><a href=”#”>Navbar01</a></li><li><a href=”#”>Navbar02</a></li><li><a href=”#”>Navbar03</a></li></ul></div></div>

导航栏效果如图所示：

注意：导航栏按钮被按下时会获得选取外观如上所示，如果需要在按钮未被选中时也有选取外观，可以在按钮中添加类 class=”ui-btn-active”,如果是需要对其他按钮也设置选取外观只需要添加类class=”ui-state-persist”。

 

五、JQuery Mobile可折叠

5.1如果需要创建可折叠内容块只需要在容器<div>中添加data-role=”collapsible”即可；

示例1：

<div data-role=”page” id=”testCollapsible”><div data-role=”header”id=”header”><h1>头部</h1><div data-role=”navbar”><ul><li><a href=”#”>navbar01</a></li><li><a href=”#”>navbar02</a></li><li><a href=”#”>navbar03</a></li></ul></div></div><div data-role=”content”id=”content”><div data-role=”collapsible”><h1>这是一个可折叠内容块</h1><h1>这是可折叠内容块的内容</h1></div></div><div data-role=”footer”id=”footer”><h1>底部</h1></div></div>

注意：折叠块初始化时默认为折叠状态，如果需要将折叠块初始化设置为展开，可以添加

data-collapsed=”false”,折叠块可以无限嵌套，过多的折叠块可以用折叠块集合将之整合起来，

示例2：

<div data-role=”collapsible-set”>//折叠块集合<div data-role=”collapsible”>//在这里设置data-inset=”true”可以设置可折叠块圆角<h1>这是一个可折叠内容块</h1><h1>这是可折叠内容块的内容</h1></div><div data-role=”collapsible”><h1>这是一个可折叠内容块</h1>//data-mini可以让折叠块变小<h1>这是可折叠内容块的内容</h1></div>
//通过设置collapsed-icon和expanded-icon设置折叠和展开的图标
<div data-role=”collapsible”data-collapsed-icon=”arrow-d” data-expanded-icon=”arrow-u”>
<h1>这是一个可折叠内容块</h1>
<h1>这是可折叠内容块的内容</h1>
</div>
</div>

六、JQuery Mobile网格布局

6.1   因为移动设备的屏幕快读有限，所以有时候需要加载很小的模块时用jquery mobile网格布局就比较好。

示例1：

<div class=”ui-grid-b”><a class=”ui-block-a”data-role=”button”>button01</a><a class=”ui-block-b”data-role=”button”>button02</a><a class=”ui-block-c”data-role=”button”>button03</a></div>

6.2   CSS定制网格

<style>.ui-block-a.ui-block-a.ui-block-a{background-color=”#9999”;Border:1px solid black;font-weight:bold;text-align:center;Padding:30px;}

6.3   行内样式

<div class=”ui-block-a” style=”border:1pxsolid black”><span>Text-</span></div>

 

七、JQuery Mobile列表

7.1列表视图

7.1.1有序列表(有序号)

示例1：

<ol data-role=”listview”>//此处添加data-inset=”true”可以设置列表圆角        <li><a href=”#”>list01</a></li><li><a href=”#”>list02</a></li><li><a href=”#”>list03</a></li></ol>

7.1.2 无序列表（无序号）

示例2：

<ul data-role=”listview”>//此处添加data-inset=”true”可以设置列表圆角<li><a href=”#”>list01</a></li><li><a href=”#”>list02</a></li><li><a href=”#”>list03</a></li></ul>

7.1.2 列表分隔符

JQuery Mobile可以通过在<li>元素中添加data-role=”list-divider”来设置分隔符；

示例2：

<ul data-role=”listview”data-inset=”true”>//此处添加data-inset=”true”设置列表圆角<li data-role=”list-divider”>怡化集团</li>//此处若为data-autodividers=”true”则按字母顺序分隔<li><a href=”#”>怡化电脑</a></li><li><a href=”#”>怡化时代</a></li> <li><a href=”#”>怡化实业</a></li> </ul>

如右图所示：                         

7.1.3 搜索过滤器

JQuery Mobile可以通过在<li>元素中添加data-list-filter=”true”来添加搜索过滤器；

示例2：

<uldata-role=”listview” data-filter=”true”data-filter-placeholder=”搜索姓名”><li><a href=”#”>张三</a></li><li><a href=”#”>李四</a></li><li><a href=”#”>王五</a></li><li><a href=”#”>孙六</a></li></ul> 

八、JQuery Mobile列表视图

8.1   带有缩略图的列表视图

示例：

<ul data-role=”listview”><li><a href=”#”><img src=”test.jpg”>//大于16px*16px的图片直接添加即可,JQuery Mobile会自动将其调整至80px*80px，小于16px*16px需添加类class=”ui-li-icon”。<h1>测试列表视图</h1><p>测试列表视图</p></a></li></ul>

注意：

在实际操作中，如果对底部和头部设置data-position=”fixed”+ data-fullscreen=”true”则会出现过滤器隐藏在头部底下显示不出来，并且listview的上下滑动与其父类页面的上下滑动会出现冲突。

 

8.2   拆分按钮

如果需要在对每一个item进行拆分只需在<li>元素里面放两个<a>元素就可以了

示例：

<ul data-role=”listview”><li><a href=”#”><img src=”test.jpg”><h1>测试列表视图</h1><p>测试列表视图</p></a><a href=”#”>Some  Text</a></li></ul>

8.3   计数泡沫

如果需要在对每一个item添加计数泡沫只需在<li>元素里面放<span>标签，在<span>标签添加类 class=”ui-li-count”

示例：

<ul><li><a href=”#”><span class=”ui-li-count”></span></a></li></ul>

九、JQuery Mobile表单

9.1   jquerymobile表单结构

1.文本框

2.搜索框

3.单选按钮

4.复选框

5.选择菜单

6.滑动条

7.翻转切换开关

注意：<form>元素必须设置action和method属性，每一个元素都必须有一个唯一的id，每一个元素都必须设置一个label标签，通过label的for属性来匹配元素的id。如果需要隐藏label标签，在label中添加class=”ui-hidden-accessible”即可。

 

示例：

<form method=”POST” action=”text.jsp”><label for=”myname”>姓名</label><input id=”myname”type=”text” name=”myname” ><input id=”mysubmit”type=”submit” data-inline=”true”  name=”mysubmit”value=”提交”></form>

 

9.2   jquerymobile 文件包裹域 fieldcontain：

当需要在宽屏上显示label标签时可以使用filedcontain属性的<div>或者<fieldset>，fieldcontain属性会基于屏幕的宽度自动设置label标签和表单控件的样式，当屏幕宽度大于480px时label标签会和表单控件一行，当屏幕宽度小于480px时label标签会放置在表单控件上方。

示例：

<form method=”POST”action=”test.html”><div data-role=”accessible”><label for=”fname”>姓名</label><input id=”fname”type=”text” name=”fname” ><input id=”test”type=”submit” value=”提交”</div></form>

提示：如果需要避免jquerymobile为可点击元素自动设置样式可以使用data-role=”none”属性

9.3   jquerymobile表单输入元素

文本框：

示例：

<form method=”POST”action=”test.asp”><div data-role=”fieldcontain”><label for=”fname”>姓名</label><input type=”text” id=”fname” name=”fname”/><label for=”fdate”>日期</label><input type=”date” id=”fdate” name=”fdate”/><label for=”fmail”>邮箱</label><input id=”fmail” type=”email” name=”fmail” placeholder=”邮箱”/></div></form>

搜索框：

示例：

<form method=”post”action=”test.asp”><label for=”mysearch”><input id=”mysearch”type=”search” placeholder=”请输入要搜索的内容”><input id=”mysubmit”type=”submit” value=”提交”/></form>

单选按钮：

示例：

<form method=”post”action=”test.asp”><fieldsetdata-role=”controlgroup”><legend>性别：</legend><label for=”men”>男</label><input id=”men” type=”radio” name=”men” /><label for=”women”>女</label><input id=”women” type=”radio” name=”women”/></fieldset></form>

复选框：

示例：

<form method=”post” action=”test.asp”><fieldset data-role=”controlgroup”><legend>选择颜色</legend><label for=”red”>红色</label><input type=”checkbox” name=”red” id=”red” value=”red” checked/><label for=”yellow”>黄色</label><input type=”checkbox”name=”yellow” id=”yellow” value=”yellow”/><label for=”green”>绿色</label><input type=”checkbox”name=”green” id=”green” value=”green”/></fieldset></form>

提示：如果需要设置默认选中只需要在<input>元素中添加checked即可。

 

多行文本框：

示例：

<form method=”post” action=”test.asp”><label for=”mytextarea”>文本域</label><textarea name=”text” id=”mytextarea”></textarea></from>

提示：多行文本框默认禁止了占位符，如果需要可以在<textarea>里面加入data-placeholder=”true”+placeholder=”要提示的内容...”

 

选择框：

示例1：

默认样式

 

<form method="post"action="testform.html"><selectid="tselect01">    <option value="op01">星期一</option>    <option value="op02">星期二</option>    <option value="op03">星期三</option>    <option value="op04">星期四</option>       <option value="op05">星期五</option>       <option value="op06">星期六</option>       <option value="op07">星期七</option>   </select> </form>

示例2：

自定义样式

 <form method="post"action="testform.html" ><selectid="tselect01" data-native-menu=”false”>    <option value="op01">星期一</option>    <option value="op02">星期二</option>    <option value="op03">星期三</option>    <option value="op04">星期四</option>       <option value="op05">星期五</option>       <option value="op06">星期六</option>       <option value="op07">星期七</option>   </select> </form>

示例3：

多项选择样式

 <form method="post"action="testform.html" ><selectid="tselect01" data-native-menu=”false” multiple=”multiple”>    <option value="op01">星期一</option>    <option value="op02">星期二</option>    <option value="op03">星期三</option>    <option value="op04">星期四</option>       <option value="op05">星期五</option>       <option value="op06">星期六</option>       <option value="op07">星期七</option>   </select> </form>

滑动条：

示例：

<form method=”post” action=”testform.html”><input type=”range” id=”range” name=”range”max=”100” min=”0” value=”50”></from>

提示：如果需要高亮显示轨道，可以在<input>元素内添加 data-highlight=”true”。

 

翻转切换开关：

示例：

<form method=”post” action=”testform.html”><label for=”switch”>翻转切换开关</label><select id=”switch” data-role=”slider”><option value=”on”>on</option><option value=”off”>off</option></from>

十、JQuery Mobile主题

Jquery mobile 允许用户向移动页面添加新主题，如果需要添加新主题，只需要编辑CSS文件来添加或编辑新主题。只需要COPY一段样式，命名为（f-z）来对类重命名即可。

示例：

<style>.ui-bar-f{Color=”green”Background-color=”yellow”}.ui-content-f{}</style>

十一、JQuery Mobile事件

事件 =网页能够响应不同的访客的动作

Jquery mobile中可以使用标准的jquery事件，并且jquery mobile为移动浏览提供了很多定制的事件。

11.1 jquery mobile pageinit 事件

示例：

<script>$(document).on("pageinit","#testevent",function(){         $("p").on("click",function(){                  $(this).hide();                  });         });</script>

十二、JQuery Mobile触控

Touch事件在用户触摸屏幕时触发

12.1 jquery mobile tap 事件

示例：

<script>$(document).on("pageinit","#testevent",function(){         $("p").on("tap",function(){ //在敲击<p>元素时将<p>元素隐藏                  $(this).hide();                  });         });</script>

12. 2jquery mobile taphold 事件

示例：

<script>$(document).on("pageinit","#testevent",function(){         $("p").on("taphold",function(){  //在长按<p>元素1秒时将<p>元素隐藏                  $(this).hide();                  });         });</script>

12. 3jquery mobile swipe事件

示例：

<script>$(document).on("pageinit","#testevent",function(){         $("p").on("swipe",function(){  //在<p>元素上方水平滑动30px以上时将<p>元素隐藏                  $(this).hide();                  });         });</script>

12. 4jquery mobile swipeleft事件

示例：

<script>$(document).on("pageinit","#testevent",function(){         $("p").on("swipeleft",function(){  //在<p>元素上方水平滑动30px以上时将<p>元素隐藏                  $(this).hide();                  });         });</script>

12. 5jquery mobile swiperight事件

示例：

<script>$(document).on("pageinit","#testevent",function(){         $("p").on("swiperight",function(){  //在<p>元素上方水平滑动30px以上时将<p>元素隐藏                  $(this).hide();                  });         });</script>

十三、JQuery Mobile滚动

Jquery mobile提供两种滚动事件，在滚动开始和当滚动结束。

13.1 jquery mobile scrollstart 事件

示例：

<script>$(document).on("pageinit","#testevent",function(){         $(document).on("scrollstart",function(){  //在页面开始滑动时弹出对话框                  Alert(“开始滑动”);                  });         });</script>

13.2 jquery mobile scrollstop 事件

示例：

<script>$(document).on("pageinit","#testevent",function(){         $(document).on("scrollstop",function(){  //在页面滑动结束时弹出对话框                  Alert(“开始滑动”);                  });         });</script>

十四、JQuery Mobile方向

orientationchange 事件在移动设备垂直或者水平旋转时触发

14.1 jquery mobile orientationchange事件

示例：

<script>$(document).on("pageinit","#testevent",function(){         $(window).on("orientationchange",function(){  //在页面方向改变时弹出对话框                  Alert(“方向改变”+event.orientation);                  });         });</script>

十五、JQuery Mobile页面事件

Jquery mobile页面事件主要分为四大类：

1.page initialization在页面初始化之前，初始化时以及初始化之后；

2.page load/unload在页面加载时、卸载时或者加载失败时；

3.page transition  在页面过渡前或过渡后；

4.page change    在页面被更改或者遭遇失败时

15.1          jquerymobile page initialization事件

15.1.1       pagebeforecreate事件

15.1.2       pagecreate 事件

15.1.3       pageinit

示例：

<script>$(document).on("pageinit","#testevent",function(){         $(document).on("pagebeforecreate",function(event){                   Alert(触发pagebeforecreate事件);                  });$(document).on("pagecreate",function(event){                   Alert(触发pagecreate事件);                  });$(document).on("pageinit",function(event){                   Alert(触发pageinit事件);                  });         });</script>

15.2          jquery mobile page load/unload事件

15.2.1       pagebeforeload在任何页面加载请求作出之前触发；

15.2.2       pageload 在页面成功加载，并插入DOM后触发；

15.2.3       pageloadfailed在页面加载失败后触发；默认显示“errorload page”

示例：

<script>$(document).on("pageinit","#testevent",function(){         $(document).on("pagebeforeload",function(event,data){                   Alert(触发pagebeforeload事件+”URL”+data.url);                  });$(document).on("pageload",function(event,data){                   Alert(触发pageload事件+”URL”+data.url);                  });$(document).on("pageloadfailed",function(event,data){                   Alert(触发pageloadfailed事件);                  });         });</script>

15.3          jquery mobile page过渡事件

页面过渡事件涉及到两个页面，即当前页面（假设为A）和目标页面（假设为B）

15.3.1       pagebeforeshow在过渡到B页面开始前触发事件；

15.3.2       pageshow 在过渡到B页面完成后触发事件；

15.3.3       pagebeforehide在返回A页面开始前触发事件；

15.3.4       pagehide 在返回A页面成功后触发事件；

 

示例：

<script>$(document).on("pagebeforeshow","#pageb", function(){                           Alert(“开始进入页面B触发pagebeforeload事件URL”+data.url);                  });$(document).on("pageshow","#pageb",function(event,data){                   Alert(“成功进入页面B触发pageshow事件URL”+data.url);                  });$(document).on("pagebeforehide","#pagea",function(event,data){                   Alert(“开始返回A页面触发pagebeforehide事件”);                  });$(document).on("pagehide","#pagea",function(event,data){                   Alert(“成功返回A页面触发pagehide事件”);                  });</script>

 JQuery Mobile data属性

button :

带有data-role=”button”属性的<a>元素

属性

值

描述

data-corners

true|false

规定按钮是否有圆角

data-icon

Icons Reference

规定按钮的图标，默认无图标

data-iconpos

top|bottom|left|right|notext

规定按钮图片的位置

data-iconshadow

true|false

规定按钮图片是否有阴影

data-mini

true|false

规定按钮小型还是常规尺寸

data-inline

true|false

规定按钮是否是行内样式

data-shadow

true|false

规定按钮是否有阴影

data-theme

a-z

规定按钮的主题

 

提示：如果需要将多个按钮组合，可以使用data-role=”controlgroup”,并使用data-type=”horizontal|vertical”来规定按钮的排列方式。

 

checkbox:

Label和type=”checkbox”的input是成对出现的，不需要设置data-role

属性

值

描述

data-mini

true|false

规定复选框小型还是常规尺寸

data-role

none

防止jquery mobile将复选框设置为按钮

data-theme

a-z

规定按钮的主题样式

 

提示：如果需要将多个复选框组合，可以使用data-role=”controlgroup”,并使用data-type=”horizontal|vertical”来规定按钮的排列方式。

 

collapsible：

标题元素，其后是位于带有 data-role="collapsible" 属性的容器中的任意 HTML 标记

属性

值

描述

data-collapsed

true|false

规定内容初始时展开还是关闭

data-collapsed-icon

Icons Reference

规定折叠按钮的图标，默认是plus

data-expanded-icon

Icons Reference

规定折叠按钮展开时的图标

data-content-theme

a-z

规定内容主题，并给内容添加圆角

data-iconpos

top|bottom|left|right

规定图片的位置

data-mini

true|false

规定可折叠按钮大小

data-inset

true|false

规定可折叠按钮是否有圆角和外边距

data-theme

a-z

规定可折叠按钮的主题颜色

 

 

 

 

collapsible set：

带有 data-role="collapsible-set" 属性的容器中的可折叠内容块

属性

值

描述

data-collapsed-icon

Icons Reference

规定折叠集合的图标，默认是plus

data-expanded-icon

Icons Reference

规定折叠集合展开时的图标

data-content-theme

a-z

规定内容主题，并给内容添加圆角

data-iconpos

top|bottom|left|right

规定图片的位置

data-mini

true|false

规定可折叠集合大小

data-inset

true|false

规定可折叠集合是否有圆角和外边距

data-theme

a-z

规定可折叠集合的主题颜色

 

 

content：

带有 data-role="content" 属性的容器

属性

值

描述

data-theme

a-z

规定可折叠集合的主题颜色

 

 

controlgroup：

带有 data-role="controlgroup" 属性的<div>或<fieldset>

属性

值

描述

data-mini

true|false

规定组合是小型还是常规属性

data-type

Horizontal|vertical

规定组合的排列方式

 

 

dialog：

带有 data-role="controlgroup" 属性的<div>或<fieldset>

属性

值

描述

Data-close-btn-text

Some text

规定仅用于dialog关闭按钮的文字

data-dom-cache

true|false

规定是否为个别页面清除 jQuery DOM 缓存（如果设置 true，则需要注意对 DOM 的管理，并全面测试所有移动设备）。

data-overlay-theme

a-z

规定对话页面的叠加（背景）色。

data-theme

a-z

规定对话页的主题颜色

data-title

Some text

规定对话页面的标题

 

 

fieldcontainer：

包装label/form元素对的data-role=”fieldcontain”的容器

属性

值

描述

 

 

 

 

 

enhancement：

带有 data-enhance="false" 或 data-ajax="false" 属性的容器。

属性

值

描述

data-enhance

true|false

如果设置为 "true"，, (default) jQuery Mobile 会自动为页面添加样式，使其更适合移动设备。如果设置为 "false"，则框架不会设置页面的样式。

data-ajax

true|false

规定是否通过 AJAX 来加载页面。

 

fixed toolbar：

带有data-role=”header”或data-role=”footer”属性及data-position=”fixed”属性的容器

属性

值

描述

data-disable-page-zoom

true|false

规定用户是否有能力缩放页面

data-fullscreen

true|false

规定工具栏始终位于顶部以及/或者底部。

data-tap-toggle

true|false

规定用户是否有能力通过点击/敲击来切换工具栏的可见性。

data-transition

slide | fade | none

规定当敲击/点击发生时的过渡效果。

data-update-page-padding

true | false

规定当发生 resize、transition 以及 "updatelayout" 事件时更新页面上下内边距（jQuery Mobile 总是在 "pageshow" 事件发生时更新内边距）

data-visible-on-page-show

true | false

规定在显示父页面时的工具栏可见性。

 

Flip toggle switch：

带有data-role=”slider”的select（翻转切换开关）

属性

值

描述

data-mini

true | false

规定开关是小型的还是常规尺寸的。

data-role

none

防止 jQuery Mobile 将切换开关设置为按钮样式

data-theme

a-z

规定切换开关的主题

data-track-theme

a-z

规定切换开关轨道的主题

 

footer：

带有的data-role=”footer”的容器

属性

值

描述

data-id

Some text

规定唯一 ID。对于 persistent footers 是必需的。

data-theme

a-z

规定页脚的主题颜色

data-position

inline|fixed

规定页脚与页面内容是行内关系，还是固定在底部。

data-fullscreen

true | false

规定页脚是否始终位于底部并覆盖页面内容 (slightly see-through)。

 

header：

带有的data-role=”header”的容器

属性

值

描述

data-id

Some text

规定唯一 ID。对于 persistent footers 是必需的。

data-theme

a-z

规定页眉的主题颜色

data-position

inline|fixed

规定页眉与页面内容是行内关系，还是固定在底部。

data-fullscreen

true | false

规定页眉是否始终位于底部并覆盖页面内容 (slightly see-through)。

 

 

link：

所有链接，包括data-role=”button”的链接以及表单提交按钮

属性

值

描述

data-ajax

true | false

规定是否通过 AJAX 来加载页面。

data-direction

reverse

反转过渡动画（仅用于页面或对话）

data-dom-cache

true | false

规定是否清除个别页面的 jQuery DOM 缓存（如果设置为 true，则您需要注意对 DOM 的管理，并全面测试所有移动设备）。

data-prefetch

true | false

规定是否把页面预取到 DOM 中，以使其在用户访问时可用。

data-rel

dialog | back

external | popup

规定有关链接如何行为的选项。 Back - 在历史记录中向后移动一步。 Dialog - 将页面作为对话来打开，不在历史中记录。 External - 链接到另一域。 opens - 打开弹出窗口。

data-transition

fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

规定链接跳转至下一页时的过渡样式

data-position-to

origin | jQuery selector | window

规定弹出框的位置。 Origin - 默认。在打开它的链接上弹出。 jQuery selector - 在指定元素上弹出。 Window - 在窗口屏幕中间弹出。

 

 

 

 

 

 

 

 

 

List：

带有data-role=”listview”属性的<ol>或者<ul>

属性

值

描述

data-autodividers

true | false

规定是否自动分隔列表项。

data-count-theme

a-z

规定计数泡沫的主题颜色。默认是 "c"。

data-divider-theme

a-z

规定列表分隔符的主题颜色。默认是 "b"。

data-filter

true | false

规定是否在列表中添加搜索框。

data-filter-placeholder

Some text

规定搜索框中的文本。默认是 "Filter items..."

data-filter-theme

a-z

规定搜索过滤程序的主题颜色。默认是 "c"。

data-icon

Icons Reference

规定列表的图标。

data-inset

true | false

规定是否为列表添加圆角和外边距样式。

data-split-icon

Icons Reference

规定划分按钮的图标。默认是 "arrow-r"。

ta-split-theme

a-z

规定划分按钮的主题颜色。默认是 "b"。

data-theme

a-z

规定列表的主题颜色。

 

List item：

带有data-role=”listview”属性的<ol>或者<ul>中的<li>

属性

值

描述

data-filtertext

Some text

规定在过滤元素时搜索的文本。该文本而不是实际的列表项文本将会被搜索。

data-icon

Icons Reference

规定列表项的图标。

data-role

list-divider

规定列表项的分隔符。

data-theme

a-z

规定列表项的主题颜色。

注释：data-icon属性仅适用于含有链接的列表项

 

navbar：

带有data-role=”navbar”属性的容器内部的<li>元素

属性

值

描述

data-icon

Icons Reference

规定列表项的图标。

data-iconpos

left | right | top | bottom | notext

规定按钮图片的位置

 

Radio button：

label 与 type="radio" 的 input 对。会被自动设置为按钮样式，无需 data-role

属性

值

描述

data-mini

true | false

规定按钮是否小型的或者是常规尺寸的。

data-role

none

放置 jQuery Mobile 将单选按钮设置为 enhanced buttons 的样式。

data-theme

letter (a-z)

规定单选按钮的主题颜色。

提示：如需组合多个单选按钮，请使用data-role="controlgroup" 以及data-type="horizontal|vertical" 来规定水平还是垂直地组合按钮。

 

 

page：

带有data-role=”page”属性的容器

属性

值

描述

data-add-back-btn

true | false

自动添加后退按钮，仅用于页眉。

data-back-btn-text

Some text

规定后退按钮的文本。

data-back-btn-theme

a-z

规定后退按钮的主题颜色。

data-close-btn-text

Some text

规定对话上的关闭按钮的文本。

data-dom-cache

true | false

规定是否清除个别页面的 jQuery DOM 缓存（如果设置为 true，则您需要注意对 DOM 的管理，并全面测试所有移动设备）。

data-overlay-theme

a-z

规定对话页面的叠加（背景）色。

data-theme

a-z

规定页面的主题颜色。默认是 "c"。

data-title

Some text

规定页面的标题。

data-url

url

该值用于更新 URL，而不是用于请求页面。

 

 

 

popup：

带有data-role=”popup”属性的容器

属性

值

描述

data-corners

true | false

规定弹出框是否有圆角。

data-overlay-theme

a-z

规定弹出框的叠加（背景）色。默认是透明背景（none）。

data-shadow

true | false

规定弹出框是否有阴影。data-theme

data-theme

a-z

规定弹出框的主题颜色。默认是继承，"none" 设置为透明。

data-tolerance

30, 15, 30, 15

规定距离窗口边缘 (top, right, bottom, left) 的距离。

带有data-role=”popup”属性的锚

属性

值

描述

data-position-to

origin | jQuery selector | window

规定弹出框的位置。 Origin - 默认。弹出框位于打开它的链接上。 jQuery selector - 弹出框位于指定元素上。 Window - 弹出框位于窗口屏幕中央。

data-rel

popup

用于打开的弹出框。

data-transition

fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。

 

 

 

select：

所有 <select> 元素。会被自动设置按钮的样式，无需 date-role

属性

值

描述

data-icon

Icons Reference

规定 select 元素的图标。默认是 "arrow-d"。

data-iconpos

left | right | top | bottom | notext

规定图标的位置。

data-inline

true | false

规定 select 元素是否是行内。

data-mini

true | false

规定 select 元素是小型的还是常规尺寸的。

data-native-menu

true | false

如果设置为 false，则使用 jQuery 自己的自定义选择菜单（如果您希望选择菜单在所有移动设备上拥有一致的外观，则推荐使用）。

data-overlay-theme

a-z

规定 jQuery 自定义选择菜单的主题颜色（与 data-native-menu="false" 一起使用）。

data-placeholder

true | false

可以在非原生 select 的 <option> 元素上设置。

data-role

data-role

放置 jQuery Mobile 将 select 元素设置为按钮样式。

data-theme

a-z

规定 select 元素的主题颜色。

 

提示：如需组合多个 select 元素，请使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 来规定把该元素水平还是垂直地进行组合。

 

slider：

type="range" 的 input 元素。会被自动设置为按钮样式，无需 data-role

属性

值

描述

data-highlight

true | false

规定是否突出显示滑块轨道。

data-mini

true | false

规定滑块是小型的还是常规尺寸的。

data-role

none

防止jQuery Mobile 将滑块设置按钮的样式。

data-theme

a-z

规定滑块控件（input、handle 和 track）的主题颜色。

data-track-theme

a-z

规定滑块轨道的主题颜色

 

Text input &Textarea：

type="range" 的 input 元素。会被自动设置为按钮样式，无需 data-role

属性

值

描述

data-mini

true | false

规定是否 input 元素是小型的还是常规尺寸的。

data-role

none

防止jQuery Mobile 将滑块设置按钮的样式。

data-theme

a-z

规定输入字段的主题颜色。

 

 

 

 

jQuery Mobile事件参考手册

下表列出了所有的jQuery Mobile 事件。

注释：请通过使用 on() 方法来绑定事件。

事件

描述

hashchange

启用 bookmarkable #hash 历史记录。

navigate

针对 hashchange 和 popstate 的 wrapper 事件。

orientationchange

当用户垂直或水平旋转其移动设备时触发。

pagebeforechange

在页面变化周期内触发两次：任意页面加载或过渡之前触发一次，接下来在页面成功完成加载后，但是在浏览器历史记录被导航进程修改之前触发。

pagebeforecreate

当页面即将被初始化，但是在增强开始之前触发。

pagebeforehide

在过渡动画开始前，在“来源”页面上触发。

pagebeforeload

在作出任何加载请求之前触发。

pagebeforeshow

在过渡动画开始前，在“到达”页面上触发。

pagechange

在 changePage() 请求已完成将页面载入 DOM 并且所有页面过渡动画已完成后触发。

pagechangefailed

当 changePage() 请求对页面的加载失败时触发。

pagecreate

当页面已创建，但是增强完成之前触发。

pagehide

在过渡动画完成后，在“来源”页面触发。

pageinit

当页面已经初始化并且完成增强时触发。

pageload

在页面成功加载并插入 DOM 后触发。

pageloadfailed

如果页面加载请求失败，则触发。

pageremove

在窗口视图从 DOM 中移除外部页面之前触发。

pageshow

在过渡动画完成后，在“到达”页面触发。

scrollstart

当用户开始滚动页面时触发。

scrollstop

当用户停止滚动页面时触发。

swipe

当用户在元素上水平滑动时触发。

swipeleft

当用户从左划过元素超过 30px 时触发。

swiperight

当用户从右划过元素超过 30px 时触发。

tap

当用户敲击某元素时触发。

taphold

当元素敲击某元素并保持一秒时触发。

throttledresize

启用 bookmarkable #hash 历史记录

updatelayout

由动态显示/隐藏内容的 jQuery Mobile 组件触发。

vclick

虚拟化的 click 事件处理器

vmousecancel

虚拟化的 mousecancel 事件处理器

vmousedown

虚拟化的 mousedown 事件处理器

vmousemove

虚拟化的 mousemove 事件处理器

vmouseout

虚拟化的 mouseout 事件处理器

vmouseover

虚拟化的 mouseover 事件处理器

vmouseup

虚拟化的 mouseup 事件处理器