Jquery Mobile入门笔记

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>