動態增加清單項目是一個基本的功能，今天測試了一下。先貼下：
點擊“更多。。。”，就會增加清單項目。
代碼如下：
<!DOCTYPE html><html><head><title>Page Title</title><meta charset="GBK" /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /><script src="http://code.jquery.com/jquery-1.5.2.min.js"></script><script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script><script>$(function() {$("#more").live("click", function() {var i = 0;for( i = 0; i <= 3; i++) {var list = $("<li><a href='http://blog.csdn.net/actual_'>新增清單項目" + i + "</a></li>");$("#list").append(list).find("li:last").hide();$('ul').listview('refresh');$("#list").find("li:last").slideDown(300);}});});</script></head><body><div data-role="page"><div data-role="header"><h1>maria</h1></div><!-- /header --><div data-role="content"><ul data-role="listview" id="list" data-inset="true"><li><a href="#">maria</a></li></ul></div><!-- /content --><div data-role="footer" class="ui-bar"><a href="#" data-role="button" id="more" >更多...</a></div><!-- /footer --></div><!-- /page --></body></html>
以下轉自網路：
前言：
用智能手機和平板電腦上網看微博、文章、小說時，手指往上滑動頁面，經常看到下面有“正在載入，請稍後...”。 公司移動運用這塊由我來搞，也有這個方面的運用需求，所以我也做了一個類似的非同步載入版面的例子。
好處：
只有在使用者手指滑動螢幕時才載入下一個版面的資料，一方面可以為使用者節省流量；另一方面改善了第一次載入時的響應速度。
名詞註解
JQuery Mobile: 它是一個為行動裝置瀏覽器寫的一個開源js架構,官方描述：
jQuery Mobile: Touch-Optimized Web Framework for Smartphones & TabletsA unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
官方連結：
http://jquerymobile.com/
版面：
在IPAD上的safari瀏覽器，頁面列表的內容如果很長的話，需要用手指向上滑動螢幕來查看下面的列表資料，一個螢幕就是一個版面啦 ，當然這個不是嚴格意義上的版面。
本文要解決的問題：
非同步載入列表內容，就是說， 剛進入頁面時，載入大概兩個版面的資料，然後手指向上滑動螢幕，如果手指觸摸點還沒有進入第二個版面則不會載入第三個版面的列表資料，當手指觸摸點在第三個版面時，在頁面的最下方顯示“正在載入，請稍後...”，並調用jquery的ajax非同步要求方法，來載入第四個版面的資料，載入完成後會移除“正在載入，請稍後...”的提示文字。
需要考慮的問題：
1、如何確定列表的版面個數？
不需要。
2、如何確定每個版面顯示的記錄條數？
因為列表頁面的url是在後台配置的，不能將pageSize寫死在URL裡。而在js裡計算出的pageSize是不能夠作為這個URL的參數,struts2的action調用時，如果沒有找到pageSize這個參數值，則預設pageSize=15，所以呢，第一次進入列表頁面時，pageSize只能是15。也就是說列表頁面只顯示15條記錄，這個在7寸的三星TP-1000平板及小於7寸的螢幕上還行。估計在大螢幕的IPAD上有點少，到時候具體考慮一下怎麼定這個數。
js中計算的pageSize在AJAX非同步載入版面時會作為請求的參數。比如IPAD2螢幕每個版面適合顯示20條記錄，則以後每個版面載入時都取20條出來。
3、如何確定是否要載入下一個版面？
手指解決進入了已經載入的版面的最後一個時，就要載入下一個版面，如何確定觸點在最後一個版面呢？經過分析，可以給<li>指定id。然後就可以擷取<li>元素的序號，來判斷觸點是在哪個版面。
<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" />"><a href="javascript:toAudit('<ww:property value='id'/>')"><ww:property value="topic" />(<ww:property value="startTime" />)</a></li></ww:iterator></ul></ww:if><ww:if test="list.size==0">不存在任何資料.</ww:if></div></div>
/** 計算手指滑動時起始點處的DOM元素的序號 */function getScrollPosition(event){var target = $(event.target);while(target.attr("id")==undefined){target = target.parent();}//手指滑動觸點的<li>元素的IDvar targetId = target.attr('id');//手指滑動觸點的<li>元素的序號var position;//手指滑動觸點的Tagvar targetTag = "li";if(targetId!=undefined && targetId.indexOf(targetTag)==0){position = targetId.substring(targetTag.length);}return position;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
