上一文章主要分析了一下“JQuery Mobile列表内容分版面异步加载”的实现方法，下面贴上代码，有兴趣的朋友可以看看，有什么好的建议请回复吧
备注：
1、框架使用SSH
2、引用jquery1.6和jquery.mobile-1.0b1两个js框架
list.jsp:
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%>
<%@ include file="/ipms/jsp/common/init.jsp" %>
<?xml version="1.0" encoding="GBK" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html lang="zh-CN">
<head>
<title>审批列表</title>
<meta charset="GBK">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
var _CONTEXTPATH = "<%=request.getContextPath()%>";
var pageSize = <ww:property value='pageSize' />; //根据屏幕大小计算出的每页显示数量
</script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/mobile/jquery.mobile-1.0b1/jquery.mobile-1.0b1.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/mobile/jquery.mobile-1.0b1/jqm-docs.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/mobile/css/mobile.css" />
<script src="<%=request.getContextPath()%>/mobile/jquery/jquery-1.6.2.min.js"></script>
<script src="<%=request.getContextPath()%>/mobile/jquery.mobile-1.0b1/jquery.mobile.themeswitcher.js"></script>
<script src="<%=request.getContextPath()%>/mobile/jquery.mobile-1.0b1/jqm-docs.js"></script>
<script src="<%=request.getContextPath()%>/mobile/jquery.mobile-1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script src="<%=request.getContextPath()%>/mobile/jsp/login/login.js"></script>
<script src="<%=request.getContextPath()%>/mobile/js/lazybind.js"></script>
<script type="text/javascript">
//alert(pageSize);
function toAudit(taskId) {
location.href = "<ww:url value='/mobileMiddlePay!toAudit.action' />?flowTask.id=" + taskId;
}
function goDesktop() {
location.href= "<ww:url value='/mobileNav.action' />";
}
</script>
<style type="text/css">
.show{display:block;}
.notshow{display:none;}
</style>
</head>
<body>
<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" />">[url=javascript:toAudit('<ww:property value='id'/>')]<ww:property value="topic" />(<ww:property value="startTime" />)[/url]</li>
</ww:iterator>
</ul>
</ww:if>
<ww:if test="list.size==0">
不存在任何数据.
</ww:if>
</div>
</div>
</body>
</html>
<script>
var args={
url:"<ww:url value='/mobileMiddlePay!lazyBind.action'/>",
linkHrefFormat:"javascript:toAudit('${id}')",
linkTextFormat:"${topic}(${startTime})"
}
$(document).ready(function(){
$('#mainPage').bind('scrollstart',function(){lazyBind(event,args);});
});
</script>
/mobile/js/lazybind.js：
var curPageNumber = 2; //加载第几屏
var lazyData; //延迟加载数据，数组格式，例：[{id:'1',topic:'第[1]期', startTime:'2011-07-21 11:40:30'}, {id:'2',topic:'第[2]期', startTime:'2011-07-21 12:00:00'}]
var params; //AJAX异步延迟加载的参数
var isLoading=false; //正在加载的标识
var isFinalPage=false; //已经是最后一屏
var footer = "<div id=\"footer\" data-role=\"footer\"><center><img src='" + _CONTEXTPATH + "/ipms/images/blue-loading.gif' width='32' height='32'><p5>正在加载，请稍候...<p5></center></div>";
function handleFooter(isRemove){
if(isRemove){
document.getElementById("footer").parentNode.removeChild(document.getElementById("footer"));
}else{
$('#mainPage').append(footer);
}
}
/** 手指触点DOM元素的序号 */
function getScrollPosition(event){
var target = $(event.target);
while(target.attr("id")==undefined){
target = target.parent();
}
var targetId = target.attr('id');
var position="0";
var targetTag = "li";
if(targetId!=undefined && targetId.indexOf(targetTag)==0){
position = targetId.substring(targetTag.length);
}
return position;
}
function calPosition(order){
return (curPageNumber-1) * pageSize + order;
}
//参数检查
function checkParam(args){
if(args==undefined || args.url==undefined || args.linkHrefFormat==undefined || args.linkTextFormat==undefined){
return false;
}
return true;
}
/** 是否为最后一个版面*/
function isLastScreen(position){
//最后一屏序号的下限与上限
var minPos = (curPageNumber-2)*pageSize;
var maxPos = (curPageNumber-1)*pageSize-1;
if(position>=minPos && position<=maxPos){
//alert("curPageNumber="+curPageNumber+";position="+position + ";minPos="+minPos + ";maxPos="+maxPos);
return true;
}
//calFooter();
return false;
}
/** 延迟加载列表版面 */
function lazyBind(event,args){
//正在加载或已经是最后一屏，则退出
if(isLoading || isFinalPage){return;}
if(!checkParam(args)){return;}
//手指触点在最后一屏才触发异步加载
var position = getScrollPosition(event);
if(!isLastScreen(parseInt(position))){return;}
isLoading = true;
//显示正在加载的提示
handleFooter(false);
params = {pageSize:pageSize, pageNum:curPageNumber};
$.ajax({
url: args.url,
data: params,
async: true,
dataType: "text",
success: function(data){
lazyData=eval(data);
if(lazyData.length>0){
//复制样式
var liClass = $('li:first').attr('class');
var liTheme = $('li:first').attr('data-theme');
var divClass = $('li:first div:first').attr('class');
var divClass2 = $('li:first div:last').attr('class');
var linkClass = $('li:first a:first').attr('class');
var spanClass = $('li:first span:first').attr('class');
//处理列表的link和显示文本
var linkHref = args.linkHrefFormat;
var linkText = args.linkTextFormat;
var regExp = /\$\{\w+\}/g; //正则表达式，匹配所有"${字段名}"的内容
var linkHrefArray = linkHref.match(regExp);
var linkTextArray = linkText.match(regExp);
//数据绑定
for(var i=0; i<lazyData.length; i++){
var item = lazyData[i];
//超链接
var href = linkHref;
for(var j=0; j<linkHrefArray.length; j++){
var field = linkHrefArray[j]; //field 类似:${id}
href = href.replace(field,eval("item."+field.substr(2,field.length-3)));
}
//文本
var text = linkText;
for(var j=0; j<linkTextArray.length; j++){
var field = linkTextArray[j];
text = text.replace(field,eval("item."+field.substr(2,field.length-3)));
}
//列表item
var li = "<LI id=\""+calPosition(i)+"\" class=\""+liClass+"\" data-theme=\""+liTheme+"\">"+
" <DIV class=\""+divClass+"\">"+
" <DIV class=\""+divClass2+"\">"+
" <A class=\""+linkClass+"\" href=\""+href+"\">"+text+"</A>"+
" </DIV>"+
" <SPAN class=\""+spanClass+"\"></SPAN>"+
" </DIV>"+
"</LI>";
$('#list').append(li);
}//end for
curPageNumber+=1;
}//end if
if(lazyData.length<pageSize){
isFinalPage = true;
}
isLoading = false;
handleFooter(true);
},
//执行ajax时出错
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
分享到：
相关推荐
在“jQuery异步加载页面”的场景中，我们通常指的是利用jQuery的Ajax功能来实现页面内容的动态加载，以提高用户体验，减少网络传输负担。这种技术尤其适用于选项卡式布局，因为用户通常只需看到一两个选项卡的内容，...
本篇将深入探讨如何利用jQuery Mobile和Ajax实现滚动加载内容这一功能，这对于创建无限滚动的网页尤其重要。 一、jQuery Mobile 概述 jQuery Mobile是一个基于jQuery库的轻量级框架，它为移动设备提供了一套统一的...
当我们谈论“jQuery Mobile 滚动加载内容”时，我们实际上是在讨论一种动态加载技术，即在用户滚动页面到接近底部时，通过 AJAX（异步 JavaScript 和 XML）技术从服务器获取并插入更多内容，以实现无尽滚动的效果。...
在网页设计中，jQuery选项卡切换图片异步加载是一种常见的用户体验优化技术，它能提高页面加载速度并降低服务器压力。这种技术尤其适用于图片丰富的网站，如图片相册、产品展示等场景。本压缩包"jQuery选项卡切换...
jQuery异步treeTable插件是用于在网页上实现这种功能的一种高效工具，它结合了表格与树形结构的优点，可以动态加载数据，节省页面资源，提升用户体验。本文将深入探讨这一插件的工作原理、使用方法以及实际应用中的...
**jQuery 异步加载页面详解** 在Web开发中，异步加载页面是一种常见的优化技术，它允许我们在不刷新整个页面的情况下动态地加载新的内容。jQuery，一个强大的JavaScript库，提供了丰富的API来实现这一功能，使得...
在本文中，我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架，它提供了丰富的UI组件，包括我们这里关注的Tree组件。异步加载是提升用户体验的...
如何异步加载图片，如果图片多了，这个脚本的效果还不错..
本篇文章将深入探讨jQuery插件中的“TreeView”组件，特别是关于其异步加载树的实现。 TreeView是一种常见的UI元素，它通常用于展示层次结构的数据，如文件系统、组织结构等。在网页应用中，TreeView插件能够以树形...
"jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画，它能够以吸引人的视觉方式展示网页内容正在加载的过程，使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用，尤其在内容分块...
学习jQuery Mobile，你将了解到如何创建可滚动的列表（listviews），可滑动的面板（panels），可滑动的选项卡（tabs），可折叠的块（collapsible sets），以及各种表单组件的优化。它还支持动态页面加载，这意味着你...
在介绍如何使用PHP、jQuery和MySQL实现异步加载ECharts地图数据之前，需要了解几个关键的技术点，以便更好地理解整篇教程。 首先，ECharts是由百度开源的一个强大的数据可视化工具库，它支持多样的数据展示形式，...
### jQuery ZTree异步加载详解 #### 一、概述 jQuery ZTree插件是一款功能强大的树形控件，被广泛应用于Web开发中，用于展示层级结构数据。在大数据量的场景下，同步加载所有节点数据可能会导致页面加载缓慢，用户...
2. **自动页面导航**：通过数据-URL（data-url）属性和页面容器，jQuery Mobile可以自动管理页面的加载和切换，实现平滑的页面过渡效果。 3. **可定制的主题系统**：jQuery Mobile提供了一套主题引擎，允许开发者...
本教程将详细讲解如何使用jQuery库来实现页面的异步加载，主要涉及两种不同的实现方法。 首先，我们要理解jQuery的核心理念——简化JavaScript的DOM操作和事件处理。jQuery的$.ajax()方法是实现异步加载的基础，它...
总的来说，结合JqueryMobile的易用性和iScroll的高性能滚动，开发者可以轻松地为WebApp添加下拉刷新和上拉加载功能，提供更加流畅、动态的用户体验。在实际项目中，还需要考虑性能优化、错误处理以及适应不同设备和...
**jQuery ZTree 异步动态加载详解** 在Web开发中，数据展示往往涉及到大量信息的处理，特别是树形结构的数据。jQuery ZTree是一款强大的JavaScript组件，用于构建具有丰富交互效果的树状菜单或树形控件。在面对大...
**jQuery+Ajax异步加载分页代码详解** 在网页开发中，为了提高用户体验，我们常常会采用异步加载（Ajax）技术来实现分页功能，这样用户无需等待整个页面刷新，仅需加载新数据即可。本示例是基于jQuery库实现的简单...
**jQuery AJAX 异步加载详解** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。jQuery 是一个广泛...
在IT行业中，jQuery Mobile是一种广泛使用的前端框架，它专门用于构建响应式和触屏友好的移动Web应用。jQuery Mobile提供了一系列的UI组件和交互效果，其中包括我们今天要讨论的主题——相册样式。在这个主题下，...