一、 使用jQueryMobile的第一步,先创建一个html页面,并在head标签中加入以下内容:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
注意:顺序不能错:(
二、动态给列表增加数据
html代码:
<div data-role="content">
<ul data-role="listview" id="contentList">
<li><a href="#">测试数据1</a></li>
<li><a href="#">测试数据2</a></li>
</ul>
<p> </p>
<div id="moreDiv">
<button id="btnMore" data-icon="refresh">显示更多</button>
</div>
</div>
js代码:
function loadData()
{
var content = "<li><a href=\"#\">这是加载的数据</a></li>";
$("#contentList").append(content).listview('refresh');
}
总结:
1、列表的显示已经抛弃table元素了,通过ul无序、ol有序代替;
2、append函数代替给innerHTML属性赋值;
3、添加数据后,需要通过listview('refresh') 方式进行刷新。
三、显示“加载中”提示
//显示loading
function showLoading()
{
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg("a", "加载中..." );
}
//隐藏loading
function hideLoading()
{
$.mobile.hidePageLoadingMsg();
}
四、HTML5设置字符集编码,避免出现乱码;
<!DOCTYPE html>
<meta charset="utf-8">