上一文章主要分析了一下“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异步加载页面，适合用于选项卡页面。
使用jquerymobile移动框架，利用jquery的ajax滚动加载内容。
使用jquerymobile移动框架，利用jquery的ajax滚动加载内容。
jQuery选项卡切换图片异步加载代码是一款精简的异步加载图片代码，展示图片的网页必备的功能。
如何异步加载图片，如果图片多了，这个脚本的效果还不错..
jquery 异步加载页面小例子，可运行。
完整的jquery easyui tree 树形列表节点异步加载demo，比官方demo详细得多。是前后台交互的web应用。
jquery ajax选项卡使用jQuery选项卡切换异步加载请求数据
资源名称：jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介：《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库，从...
jquery ztree 异步加载 延迟加载效果
jQuery+ajax实现一款简单实用的异步加载分页代码，支持自定义设置分页列表数量。
jquery mobile listview动态加载json
jquery 图片延迟加载插件制作tab选项卡图片异步加载
vs2013 利用Ajax+Jquery实现异步进度条效果
jquery实现页面的异步加载，增强客户的体验，此demo中包含了两种方式实现页面的异步加载
1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上，如果您了解 jQuery，您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 ...
作为jQuery Mobile的入门级读物，《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性，内容系统全面，便于理解。 《jQuery Mobile快速入门》总共分为10章，内容包括jQuery Mobile的基础...
jQuery-ajax-用户名异步请求,转载请注明出处：https://blog.csdn.net/qq_40374604（如有需要欢迎留言，我一定会尽快解答）
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
jQuery Mobile API文档。jQuery Mobile是jQuery框架的一个组件（而非jquery的移动版本）。jQuery Mobile是一款基于HTML5的用户界面系统，旨在使所有智能手机，平板电脑和桌面设备上都可以访问的响应网站和应用。...