jQuery Mobile学习笔记案例实现-jquery mobile 案例

jQuery Mobile学习笔记是本文要介绍的内容，主要是来了解jQuery Mobile的使用，通过案例的实现可以学习到jQuery Mobile应用，具体内容的实现来看本文详解。

1、jQuery Mobile 重点讲解：列表(listview)的操作

jQuery Mobile有一个列表控件(listview)，可能会根据需要在后台加载该列表控件，可以通过以下方法加载：
HTML中的List控件：

<ul data-role="listview" id="list" data-inset="true"> 
</ul>

代码中加入一个列表项：

var list = $("<li><a  href='mission/mission.html>新增项</a></li>");  
$("#list").append(list).find("li:last").hide();  
$('ul').listview('refresh');  
$("#list").find("li:last").slideDown(300);

2、jQuery Mobile 页面切换动画的使用（data-transition）

页面中页面切换动画：

jQuery Mobile可以实现页面的切换效果。在同一个Html文件里面，可以定义多个page，切换时直接使用超链接就可以了。

<body> 
<div  data-role="page" id="main" data-transition="pop">   
<a  href="#page2" >链接2</a> 
</div> 
 
 
<div  data-role="pag" id="page2">   
</div> 
</body>

系统默认显示page的内容，不显示page2的内容，点击链接后切换到page2的内容。通过“data-transition”实现动画定义。jQuery Mobile实现了上下左右滑动，淡出，弹出，反转等动画。

如果需要转到的HTML是其他链接，不是内部page，需要加上rel='external'属性，此时动画效果无效。

小结：jQuery Mobile学习笔记案例实现的内容介绍完了，希望通过本文的学习能对你有所帮助！