下次自动登录
现在的位置:
& 综合 & 正文
jquerymobile知识点二:动态ListView
这里要讲的是jqueryMobile 中的ListView 动态的列表
废话不多说，先上效果图，在上。。。。
&ul data-role="listview" data-inset="true" id="uiList"&
&script type="text/javascript"&
$(document).ready(function () {
InitDataBind();
function InitDataBind() {
var dataLi = $("#uiList");
type: "POST",
url: "/ajax/Test_News.ashx?date=" + new Date().getTime(),
dataType: "json",
success: function (data) {
data = eval(data);
var listHtml = "";
listHtml += "&li data-role='list-divider' data-theme='g'&今天是：日&span class='ui-li-count'&2&/span&&/li&";
$.each(data.Test_News, function (i, item) {
listHtml += "&li&";
listHtml += "&a href='#'&";
listHtml += "&img src='/Img/2.jpg'&";
listHtml += "&h2&" + item.username + "&/h2&";
listHtml += "&p&" + item.usercontent + "&/p&";
listHtml += "&p class='ui-li-aside'&&strong&" + item.userdate + "&/strong&&/p&";
dataLi.html(listHtml.replace("undefined", ""));
$("#uiList").listview('refresh'); // 重要
error: function (data) {
dataLi.append("数据有误！");
代码很简单
希望对初学者有用
下一篇讲jquerymobile里面的popup实现弹出层 实现发布评论。。。
&&&&推荐文章:
【上篇】【下篇】JQuery Mobile列表内容分版面异步加载（二） - CODING WAY - ITeye技术网站
博客分类：
上一文章主要分析了一下“JQuery Mobile列表内容分版面异步加载”的实现方法，下面贴上代码，有兴趣的朋友可以看看，有什么好的建议请回复吧
备注：
1、框架使用SSH
2、引用jquery1.6和jquery.mobile-1.0b1两个js框架
&%@ page language="java" contentType="text/ 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"&
&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' /&;
//根据屏幕大小计算出的每页显示数量
&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' /&";
&style type="text/css"&
.show{display:}
.notshow{display:}
&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 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&
&ww:if test="list.size==0"&
不存在任何数据.
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);});
/mobile/js/lazybind.js：
var curPageNumber = 2; //加载第几屏
//延迟加载数据，数组格式，例：[{id:'1',topic:'第[1]期', startTime:' 11:40:30'}, {id:'2',topic:'第[2]期', startTime:' 12:00:00'}]
//AJAX异步延迟加载的参数
var isLoading= //正在加载的标识
var isFinalPage= //已经是最后一屏
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"));
$('#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);
function calPosition(order){
return (curPageNumber-1) * pageSize +
//参数检查
function checkParam(args){
if(args==undefined || args.url==undefined || args.linkHrefFormat==undefined || args.linkTextFormat==undefined){
/** 是否为最后一个版面*/
function isLastScreen(position){
//最后一屏序号的下限与上限
var minPos = (curPageNumber-2)*pageS
var maxPos = (curPageNumber-1)*pageSize-1;
if(position&=minPos && position&=maxPos){
//alert("curPageNumber="+curPageNumber+";position="+position + ";minPos="+minPos + ";maxPos="+maxPos);
//calFooter();
/** 延迟加载列表版面 */
function lazyBind(event,args){
//正在加载或已经是最后一屏，则退出
if(isLoading || isFinalPage){}
if(!checkParam(args)){}
//手指触点在最后一屏才触发异步加载
var position = getScrollPosition(event);
if(!isLastScreen(parseInt(position))){}
isLoading =
//显示正在加载的提示
handleFooter(false);
params = {pageSize:pageSize, pageNum:curPageNumber};
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.linkHrefF
var linkText = args.linkTextF
var regExp = /\$\{\w+\}/g; //正则表达式，匹配所有"${字段名}"的内容
var linkHrefArray = linkHref.match(regExp);
var linkTextArray = linkText.match(regExp);
//数据绑定
for(var i=0; i&lazyData. i++){
var item = lazyData[i];
var href = linkH
for(var j=0; j&linkHrefArray. j++){
var field = linkHrefArray[j]; //field 类似:${id}
href = href.replace(field,eval("item."+field.substr(2,field.length-3)));
var text = linkT
for(var j=0; j&linkTextArray. 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&"+
&SPAN class=\""+spanClass+"\"&&/SPAN&"+
" &/DIV&"+
$('#list').append(li);
}//end for
curPageNumber+=1;
if(lazyData.length&pageSize){
isFinalPage =
isLoading =
handleFooter(true);
//执行ajax时出错
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
浏览: 300577 次
来自: 珠海
什么呀，写的不清不楚的。你是采用的什么监听事件呀
谢谢，解决了。
其实解决办法很简单的，只要架上对应的jar包就可以了。
受教了，感谢！
好,太好了.谢谢本帖子已过去太久远了，不再提供回复功能。}