JQuery Mobile列表内容分版面异步加载（二）
上一文章主要分析了一下“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 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)));}//列表itemvar 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 forcurPageNumber+=1;}//end ifif(lazyData.length<pageSize){isFinalPage = true;}isLoading = false;handleFooter(true);},//执行ajax时出错error: function(XMLHttpRequest, textStatus, errorThrown) {alert(textStatus);}});} 1 楼 ghlong 2012-07-13 你好，楼主，有没有完整的demo给来参考呢？