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 事件处理器 |