分类： Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报

动态增加列表项是一个基本的功能，今天测试了一下。先贴下效果图：

点击“更多。。。”，就会增加列表项。

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Page Title</title>
  5. <meta charset="GBK" />
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
  7. <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  8. <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
  9. <script>
  10. $(function() {
  11. $("#more").live("click", function() {
  12. var i = 0;
  13. for( i = 0; i <= 3; i++) {
  14. var list = $("<li><a href='http://blog.csdn.net/actual_'>新增列表项" + i + "</a></li>");
  15. $("#list").append(list).find("li:last").hide();
  16. $('ul').listview('refresh');
  17. $("#list").find("li:last").slideDown(300);
  18. }
  19. });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <div data-role="page">
  25. <div data-role="header">
  26. <h1>maria</h1>
  27. </div>
  28. <!-- /header -->
  29. <div data-role="content">
  30. <ul data-role="listview" id="list" data-inset="true">
  31. <li>
  32. <a href="#">maria</a>
  33. </li>
  34. </ul>
  35. </div>
  36. <!-- /content -->
  37. <div data-role="footer" class="ui-bar">
  38. <a href="#" data-role="button" id="more" >更多...</a>
  39. </div>
  40. <!-- /footer -->
  41. </div>
  42. <!-- /page -->
  43. </body>
  44. </html>

以下转自网络：

前言： 
    用智能手机和平板电脑上网看微博、文章、小说时，手指往上滑动页面，经常看到下面有“正在加载，请稍后...”。 公司移动运用这块由我来搞，也有这个方面的运用需求，所以我也做了一个类似的异步加载版面的例子。

好处： 
    只有在用户手指滑动屏幕时才加载下一个版面的数据，一方面可以为用户节省流量；另一方面改善了第一次加载时的响应速度。

名词注解 
JQuery Mobile: 它是一个为移动设备浏览器写的一个开源js框架,官方描述：

  1. jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
  2. A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

官方链接： 
    http://jquerymobile.com/

版面： 
    在IPAD上的safari浏览器，页面列表的内容如果很长的话，需要用手指向上滑动屏幕来查看下面的列表数据，一个屏幕就是一个版面啦 ，当然这个不是严格意义上的版面。

本文要解决的问题： 
    异步加载列表内容，就是说， 刚进入页面时，加载大概两个版面的数据，然后手指向上滑动屏幕，如果手指触摸点还没有进入第二个版面则不会加载第三个版面的列表数据，当手指触摸点在第三个版面时，在页面的最下方显示“正在加载，请稍后...”，并调用jquery的ajax异步请求方法，来加载第四个版面的数据，加载完成后会移除“正在加载，请稍后...”的提示文字。

需要考虑的问题： 
1、如何确定列表的版面个数？ 
   不需要。

2、如何确定每个版面显示的记录条数？ 
     因为列表页面的url是在后台配置的，不能将pageSize写死在URL里。而在js里计算出的pageSize是不能够作为这个URL的参数,struts2的action调用时，如果没有找到pageSize这个参数值，则默认pageSize=15，所以呢，第一次进入列表页面时，pageSize只能是15。也就是说列表页面只显示15条记录，这个在7寸的三星TP-1000平板及小于7寸的屏幕上还行。估计在大屏幕的IPAD上有点少，到时候具体考虑一下怎么定这个数。
  
      js中计算的pageSize在AJAX异步加载版面时会作为请求的参数。比如IPAD2屏幕每个版面适合显示20条记录，则以后每个版面加载时都取20条出来。

3、如何确定是否要加载下一个版面？
      手指解决进入了已经加载的版面的最后一个时，就要加载下一个版面，如何确定触点在最后一个版面呢？经过分析，可以给<li>指定id。然后就可以获取<li>元素的序号，来判断触点是在哪个版面。

<div id="mainPage" data-role="page">

	<div data-role="header" data-position="inline" data-theme="b">

		<h1>中间计量审批列表</h1>

		<a class="ui-btn-right" href="javascript:goDesktop();" data-role="button" data-icon="back">返回桌面</a>

	</div>

	<div data-role="content">

		<ww:if test="list.size>0">

			<ul id="list" data-role="listview">

				<ww:iterator value="list" status="status">

					<li id="li<ww:property value="#status.index" />"><a href="javascript:toAudit('<ww:property value='id'/>')"><ww:property value="topic" />(<ww:property value="startTime" />)</a></li>

				</ww:iterator>

			</ul>

		</ww:if>

		<ww:if test="list.size==0">

			不存在任何数据.

		</ww:if>

	</div>

</div>
  1. /** 计算手指滑动时起始点处的DOM元素的序号 */
  2. function getScrollPosition(event){
  3. var target = $(event.target);
  4. while(target.attr("id")==undefined){
  5. target = target.parent();
  6. }
  7. //手指滑动触点的<li>元素的ID
  8. var targetId = target.attr('id');
  9. //手指滑动触点的<li>元素的序号
  10. var position;
  11. //手指滑动触点的Tag
  12. var targetTag = "li";
  13. if(targetId!=undefined && targetId.indexOf(targetTag)==0){
  14. position = targetId.substring(targetTag.le

【Jquery mobile】动态加载ListView 转的更多相关文章

  1. jquery mobile动态加载数据后无法渲染

    引自:http://blog.sina.com.cn/s/blog_025270e901016lst.html jquery mobile在动态添加html之后无法渲染控件,无法转换控件的办法! jq ...

  2. jquery mobile 动态加载标签时，无法正常展示样式

    原因 在chrome中审查元素,发现其增加了很多没有直接写在页面上的标签和样式.页面标签首先经过jquery.mobile-1.4.5.min.js的处理,添加了许多标签,然后再用css布局 解决方案 ...

  3. jquery:为动态加载的元素添加点击事件

    jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...

  4. jQuery EasyUI-DataGrid动态加载表头

    项目总结—jQuery EasyUI-DataGrid动态加载表头     目录(?)[-] 概要 实现 总结   概要 在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid ...

  5. 项目总结—jQuery EasyUI-DataGrid动态加载表头

    http://blog.csdn.net/zwk626542417/article/details/19248747 概要 在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGri ...

  6. jquery getScript动态加载JS方法改进详解[转载]

    转载自http://www.jb51.net/article/31973.htm 有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法     $.getScript( ...

  7. js与jquery的动态加载脚本文件

    jquery动态加载 jQuery.getScript(url,[callback]) js动态加载 function loadJs(name) { document.write('<scrip ...

  8. Android动态加载ListView中的Item

    我这周上网看到动态增加listview的每一项item的布局,今天抽空自己写了一个,方便自己日后使用,这个效果还是很不错的,用到了Adapter的notifyDataSetChanged()方法,当点 ...

  9. jquery getScript动态加载JS方法改进详解

    有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法 $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当 ...

随机推荐

  1. Objective－c——多线程开发第一天（pthread／NSThread）

    一.为什么要使用多线程? 1.循环模拟耗时任务 1.同步执行 2.异步执行 (香烟编程小秘书) 3.进程 系统中正在运行的一个应用程序 每个进程之间是独立的, 均运行在其专用的且受保护的内存空间 通过 ...

  2. 2016HUAS_ACM暑假集训3C - Til the Cows Come Home

    单源最短路径,首先想到的是Dijkstra.Dijkstra算法的思路就不啰嗦了,概括起来就是时刻保持当前节点到目标节点的距离最短. 题目大意(不进行翻译解释了,就抽离为图来表达):有N个顶点和T条边 ...

  3. Openstack Neutron DVR workflow

    目前在Juno版本的trunk中已经合入了DVR相关的代码,我的理解是在Juno版本中DVR是一个experimental feature.最好需要稳定一个版本以后再上生产环境.之前写过一篇博文是DV ...

  4. innodb insert buffer 插入缓冲区的理解

    今天在做一个大业务的数据删除时,看到下面的性能曲线图 在删除动作开始之后,insert buffer 大小增加到140.对于这些状态参数的说明 InnoDB Insert Buffer 插入缓冲,并不 ...

  5. 电脑控制台灯(c# hook,显示室温,联网校正时间)

          突发奇想,于是便写了一个小程序用于控制台灯,这几天功能也在不断的完善中,目前基本已经完成.下面进行功能的简述的代码的分析. 整体设计包含下位机程序和上位机程序.下位机用的c语言,上位机用的 ...

  6. H5课程大纲

    K1模块课程: 课程模块 课程阶段 课程内容 K1 模块 第1阶段 认识前端开发 环境配置.使用标签的分类.写法及使用规范CSS样式的使用.各类常见样式Photoshop使用16大常用样式盒模型.语义 ...

  7. Markdown中插入数学公式

    如果想复杂使用的话,百度Latex公式,找些看一下. 使用MathJax引擎 大家都看过Stackoverflow上的公式吧,漂亮,其生成的不是图片.这就要用到MathJax引擎,在Markdown中 ...

  8. CSS布局概述

    1.HTML5文档类型 由于Bootstrap使用了HTML5特定的HTML元素和CSS属性,所以使用Bootstrap的时候,所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性,如下 ...

  9. android studio This client is too old to work with the working copy at

    http://www.cnblogs.com/maijin/archive/2013/01/09/2852330.html http://stackoverflow.com/questions/283 ...

  10. mysql 数据库乱码解决

    mysql 数据库乱码解决, 进入前加入 set names 'utf8'  即可.