移動開發學習記錄點滴-動態增長列表行數據

時間 2019-12-01

標籤移動開發學習記錄點滴動態增長列表數據欄目無線简体版

原文原文鏈接

1、使用jQueryMobile的第一步，先建立一個html頁面，並在head標籤中加入如下內容：css

<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

2、動態給列表增長數據
jquery

html代碼：app

<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代碼：ide

function loadData()
{
  var content = "<li><a href=\"#\">這是加載的數據</a></li>";
  $("#contentList").append(content).listview('refresh');
}

總結：函數

一、列表的顯示已經拋棄table元素了，經過ul無序、ol有序代替；測試

二、append函數代替給innerHTML屬性賦值；編碼

三、添加數據後，須要經過listview('refresh') 方式進行刷新。spa

3、顯示「加載中」提示code

//顯示loading
function showLoading()
{
  $.mobile.loadingMessageTextVisible = true;
  $.mobile.showPageLoadingMsg("a", "加載中..." );
} 
//隱藏loading
function hideLoading()
{
  $.mobile.hidePageLoadingMsg();
}

4、HTML5設置字符集編碼，避免出現亂碼；

<!DOCTYPE html>
<meta charset="utf-8">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。