移动开发学习记录点滴-动态增加列表行数据

一、 使用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>&nbsp;</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">


你可能感兴趣的:(移动开发学习记录点滴-动态增加列表行数据)