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

最新推荐文章于 2024-05-21 10:10:55 发布

weixin_34320724

最新推荐文章于 2024-05-21 10:10:55 发布

阅读量107

点赞数

文章标签：移动开发 javascript python ViewUI

原文链接：https://my.oschina.net/u/2426537/blog/485667

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、使用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">

转载于:https://my.oschina.net/u/2426537/blog/485667

weixin_34320724

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动开发学习记录点滴-动态增加列表行数据

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

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

“相关推荐”对你有帮助么？