Jquery Mobile入门笔记
最后更新于：2022-04-01 10:28:36
1、初始化移动浏览显示
<meta name=”viewport” content=”width=device-width,initial-scale=1”/>
2、引入jquery mobile的css文件和js文件
3、HTML5 date=*属性用于通过jquery mobile为移动设备创建交互外观
示例：
~~~
<div date-role = “page”>
<div date-role = “header“>
<h1>标题</h1>
</div>
<div role = “main” class=”ui-content”>
<p>内容</p>
</div>
<div data-role = “footer”>
<h1>页脚</h1>
</div>
</div>
~~~
在一个html文件中可以放多个date-page，但默认显示第一个data-page
可以通过href的形式进行跳转，示例：
~~~
<div date-role = “page” id=”index1”>
<a href=”#index1”>页面跳转</a>
</div>
<div date-role = “page” id=”index2”></div>
~~~
4、设置页面过度效果data-transition
~~~
<div date-role = “page” id=”index1”>
<a href=”#index1” data-transition=”slide”>页面跳转</a>
</div>
<div date-role = “page” id=”index2”></div>
~~~
包括：slide/slideup/slidedown/pop/fade/flip/none
5、事件
(1)页面初始化事件：pagebeforecreate,pagecreate,pageinit
(2)页面加载事件：pagebeforeload,pageload
(3)页面过度事件：pagebeforeshow,pageshow,pagebeforehide,pagehide
示例：
~~~
$(document).on(“pagebeforecreate”,function(){
//do something
})
$(document.on(“pagebeforehide”,”#index”,function(){
//do something[index页面消失时]
})
~~~
6、jquery moblie按钮
示例：<a class=”ui-btn”>按钮</a>
<input type=”submit” value=”按钮”/>//JQM直接添加了一些样式
让多个按钮并排显示(ui-btn-inline)：
<a class=”ui-btn ui-btn-inline”>按钮</a><a class=”ui-btn ui-btn-inline”>按钮</a>
此外还有不同样式：ui-btn-a;ui-btn-b;ui-corner-all;ui-shadow
7、导航栏制作示例：
~~~
<div data-role=”navbar”>
<ul>
<li><a href=”#” data-icon=”camera”>导航1</a></li>
<li><a href=”#” data-icon=”carat-l”>导航2</a></li>
<li><a href=”#” data-icon=”carat-2”>导航3</a></li>
</ul>
</div>
~~~
data-icon可以设置导航图标，还可以自己制定
8、设置标题和当行蓝位置固定
设置data-position=”fixed”
9、列表
~~~
<ul data-role=”listview data-inset=true”>
<li>列表1</li>
<li><a href=”#” >列表2</a></li>
<li><a href=”#” >列表3</a></li>
</ul>
~~~
listview指定列表样式；data-inset设置为true使列表留边距显示
复杂的列表：（详情见api）
~~~
<ul data-role=”listview data-inset=true”>
<li><a href=”#” >
<h2>G1次</h2>
<p>北京-大连</p>
<p>大连-北京</p>
<p class=”ul-li-aside”>9:00开</p>//设置为右上角显示
</li>
</ul>
~~~
10、表单：直接使用html的默认表单就可以
表单自适应功能：ui-feild-content
~~~
<form>
<div class=”ui-feild-content”><input type=”text”/></div>
<div class=”ui-feild-content”><input type=”text”/></div>
</form>
~~~
11、表格
~~~
<table data-role=”table” data-mode=”reflow” class=”ui-responsive table-stroke”>
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
</table>
~~~