JQuery Mobile列表内容分版面异步加载（二）

最新推荐文章于 2025-11-24 11:38:41 发布

最新推荐文章于 2025-11-24 11:38:41 发布 · 232 阅读

文章标签：

#JavaScript #Ajax #jQuery #Mobile #ViewUI

js 同时被 3 个专栏收录

11 篇文章

订阅专栏

平板电脑-网页

4 篇文章

订阅专栏

JQuery Mobile

3 篇文章

订阅专栏

本文介绍了一种基于JQuery Mobile框架实现的列表内容分版面异步加载方法。通过AJAX技术，当用户滚动到页面底部时自动加载更多数据，有效提升了用户体验。

[size=medium][color=blue]上一文章主要分析了一下“JQuery Mobile列表内容分版面异步加载”的实现方法，下面贴上代码，有兴趣的朋友可以看看，有什么好的建议请回复吧[/color][/size] :)

[b]备注：[/b]
1、框架使用SSH
2、引用jquery1.6和jquery.mobile-1.0b1两个js框架

[b]list.jsp:[/b]


<%@ 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>

[b]/mobile/js/lazybind.js：[/b]


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);
		}
	});
}