我在包含listview的页面上使用jquery mobile和iscroll / iscrollview，以便滚动listview内容。列表视图滚动得很好。 问题是滚动列表后意外点击列表视图项。
如果您有任何解决方案，请告诉我们。
我一直尝试绑定到onScrollEnd事件，但未成功，因此我可以将变量（scroll_stop_time）设置为滚动停止的时间。
我还有一个pagebeforechange事件正在检查scroll_stop_time变量的时间值，如果时间太近（不到200ms），那么我就停止点击。
但是，我无法触发onscrollend事件，因此scroll_stop_time永远不会更新，所有点击都会通过。
我的代码：
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="mobile/resources/js/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="mobile/resources/css/jqm-icon-pack-2.0-original.css" />
<link rel="stylesheet" href="mobile/resources/js/jquery.mobile.simpledialog.min.css" />
<link rel="stylesheet" href="mobile/resources/css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="mobile/resources/css/fileuploader.css" type="text/css" media="all" />
<script src="mobile/resources/js/json2.js"></script>
<script src="mobile/resources/js/jquery-1.9.1.min.js"></script>
<script src="mobile/resources/js/jquery.postjson.js"></script>
<script>
var scroll_stop_time = (new Date).getTime(); // initialize the variable
$(document).on("iscroll_init", function() {
console.log('iscroll INIT');
$.mobile.iscrollview.prototype.options.onScrollEnd = function(){
console.log('--iscroll onScrollEnd');
scroll_stop_time=(new Date).getTime(); // update the variable with the current time
};
});
</script>
<script src="mobile/resources/js/iscroll4.2.js"></script>
<script src="mobile/resources/js/jstorage.js"></script>
<script src="mobile/resources/js/jquery.validate-1.7.min.js"></script>
<script type="text/javascript" src="mobile/resources/js/fileuploader.js"></script>
<script type="text/javascript">
console.log('head javascript - before JQM is loaded');
// ==============================================
// ALL PAGES - EVERY TIME THEY ARE DISPLAYED
// ==============================================
// -- all pages - pagebeforechange event --
$(document).on( "pagebeforechange", function( event, data ){
if ( typeof data.toPage === "string" ) {
console.log('all pages - pagebeforechange event - (every time ANY page is about to be displayed)');
console.log(data);
// intercept a page change request
// can alter any aspect of this request, if needed
if(data.toPage.indexOf("manage-inventory") != -1){
// make sure we haven't just recently stopped an iScroll scroller (not really a clicked link)
elapsed_time = ((new Date).getTime()) - scroll_stop_time;
console.log('scroller has been stopped for '+ elapsed_time);
if(elapsed_time < 200){
// user just stopped the scroller and really didnt mean to click on the listview item link
console.log('not really a click');
event.preventDefault();
return false;
}
}
}
});
</script>
<script src="mobile/resources/js/jquery.mobile-1.3.1.min.js"></script>
<script src="mobile/resources/js/jquery.mobile.iscrollview.js"></script>
<script src="mobile/resources/js/jquery.mobile.simpledialog2.min.js"></script>
</head>
<body>
<div data-role="page" id="page_manage-inventory-items_by_type" data-theme="b" data-content-theme="b">
<div data-role="header">
<a href="#panel_nav_manage-inventory-items_by_type" data-icon="direction" data-iconpos="notext" data-inline="true" data-role="button"></a>
<a href="#panel_settings_manage-inventory-items_by_type" data-icon="menu" data-iconpos="notext" data-inline="true" data-role="button" class="ui-btn-right"></a>
<h1>Items by Type</h1>
</div>
<div data-role="content">
<style type="text/css" media="all">
.listview-wrapper, .listview-wrapper div.iscroll-scroller {
width: 100% !important;
}
</style>
<div data-role="fieldcontain" style="margin-bottom:40px;">
<label for="iibt_search">Item Search:</label>
<input type="search" class="item_search" name="iibt_search" id="iibt_search" value="" />
</div>
<h2>Items by Type:</h2>
<style type="text/css">
</style>
<div class="listview-wrapper" data-iscroll>
<ul id="iibt_listview" data-role="listview" data-inset="true" data-filter="true">
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=1&specific_name=Blu-Ray Players&specific_class=t">Blu-Ray Players<span class="ui-li-count">187</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=2&specific_name=CD-ROM Players&specific_class=t">CD-ROM Players<span class="ui-li-count">416</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=3&specific_name=Computers&specific_class=t">Computers<span class="ui-li-count">104</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=4&specific_name=Data Panels&specific_class=t">Data Panels<span class="ui-li-count">253</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=5&specific_name=Data Projectors&specific_class=t">Data Projectors<span class="ui-li-count">160</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=6&specific_name=Digital Cameras&specific_class=t">Digital Cameras<span class="ui-li-count">424</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=7&specific_name=DVD Players&specific_class=t">DVD Players<span class="ui-li-count">347</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=8&specific_name=Easels&specific_class=t">Easels<span class="ui-li-count">372</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=9&specific_name=Flipcharts&specific_class=t">Flipcharts<span class="ui-li-count">441</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=10&specific_name=Laptops&specific_class=t">Laptops<span class="ui-li-count">125</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=11&specific_name=MAC Monitor Cables&specific_class=t">MAC Monitor Cables<span class="ui-li-count">166</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=18&specific_name=Monitors&specific_class=t">Monitors<span class="ui-li-count">315</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=12&specific_name=Overheads&specific_class=t">Overheads<span class="ui-li-count">255</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=13&specific_name=Podiums&specific_class=t">Podiums<span class="ui-li-count">500</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=14&specific_name=Power Supplies&specific_class=t">Power Supplies<span class="ui-li-count">174</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=15&specific_name=Screens&specific_class=t">Screens<span class="ui-li-count">398</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=16&specific_name=Stereos&specific_class=t">Stereos<span class="ui-li-count">469</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=17&specific_name=TVs&specific_class=t">TVs<span class="ui-li-count">101</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=19&specific_name=VGV/MCGA Cables&specific_class=t">VGV/MCGA Cables<span class="ui-li-count">111</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=20&specific_name=Video Cameras&specific_class=t">Video Cameras<span class="ui-li-count">470</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=21&specific_name=Video Projectors&specific_class=t">Video Projectors<span class="ui-li-count">495</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=22&specific_name=Visualizers&specific_class=t">Visualizers<span class="ui-li-count">470</span></a>
</li>
</ul>
</div>
</div>
<div id="fixed_footer" data-theme="a" data-role="footer" data-position="fixed" style="text-align: center;">
<div style="display:inline-block; margin-top:10px; margin-bottom:10px;">manage-inventory-items_by_type</div>
</div>
</div>
</body>
</html>
我在浏览器控制台中收到以下输出：
head javascript - before JQM is loaded
mobileinit
iscroll INIT
{Note: I scroll around now until I accidentally click a listview link}
{this is where the onScrollEnd console log info would show up if I were capturing it}
all pages - pageshow event - (every time ANY page is displayed)
scroller has been stopped for 28995
{ajax post info, other page is loaded, etc..}
答案 0 :(得分：0)
我发现iscrollview下载包中包含的一些示例绑定到某些iscroll事件。以这些示例为指导，我提出了以下工作解决方案：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="mobile/resources/js/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="mobile/resources/css/jqm-icon-pack-2.0-original.css" />
<link rel="stylesheet" href="mobile/resources/js/jquery.mobile.simpledialog.min.css" />
<link rel="stylesheet" href="mobile/resources/css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="mobile/resources/css/fileuploader.css" type="text/css" media="all" />
<script src="mobile/resources/js/json2.js"></script>
<script src="mobile/resources/js/jquery-1.9.1.min.js"></script>
<script src="mobile/resources/js/jquery.postjson.js"></script>
<script src="mobile/resources/js/jstorage.js"></script>
<script src="mobile/resources/js/jquery.validate-1.7.min.js"></script>
<script type="text/javascript" src="mobile/resources/js/fileuploader.js"></script>
<script type="text/javascript">
console.log('head javascript - before JQM is loaded');
var scroll_stop_time = (new Date).getTime(); // initialize the variable
var is_scrolling = false;
// ==============================================
// ALL PAGES - EVERY TIME THEY ARE DISPLAYED
// ==============================================
// -- all pages - pagebeforechange event --
$(document).on( "pagebeforechange", function( event, data ){
if ( typeof data.toPage === "string" ) {
console.log('all pages - pagebeforechange event - (every time ANY page is about to be displayed)');
console.log(data);
// intercept a page change request
// can alter any aspect of this request, if needed
if(data.toPage.indexOf("manage-inventory") != -1){
// make sure we haven't just recently stopped an iScroll scroller (not really a clicked link)
elapsed_time = ((new Date).getTime()) - scroll_stop_time;
if(elapsed_time < 200 || is_scrolling){
//console.log('not really a click');
event.preventDefault();
return false;
}
}
}
});
// ==============================================
// SPECIFIC PAGES - ON INITIAL LOAD ONLY
// ==============================================
$(document).on("pageinit", "#page_manage-inventory-items_by_type2", function() {
console.log('#page_manage-inventory-items_by_type2 - pageinit event -- (only once for THIS page)');
$(".iscroll-wrapper", this).bind( {
//iscroll_onscrollstart : function(){
// console.log('ON SCROLL START');
// is_scrolling=true;
// didn't work here because even a static click would
// fire this event but the onscrollend would never fire
// because it really wasn't scrolling
//},
iscroll_onscrollmove : function(){
//console.log('ON SCROLL MOVE');
is_scrolling=true;
},
iscroll_onscrollend : function(){
//console.log('ON SCROLL END');
is_scrolling=false;
scroll_stop_time=(new Date).getTime();
}
});
});
</script>
<script src="mobile/resources/js/jquery.mobile-1.3.1.min.js"></script>
<script src="mobile/resources/js/iscroll4.2.js"></script>
<script src="mobile/resources/js/jquery.mobile.iscrollview.js"></script>
<script src="mobile/resources/js/jquery.mobile.simpledialog2.min.js"></script>
</head>
<body>
<div data-role="page" id="page_manage-inventory-items_by_type" data-theme="b" data-content-theme="b">
<div data-role="header">
<a href="#panel_nav_manage-inventory-items_by_type" data-icon="direction" data-iconpos="notext" data-inline="true" data-role="button"></a>
<a href="#panel_settings_manage-inventory-items_by_type" data-icon="menu" data-iconpos="notext" data-inline="true" data-role="button" class="ui-btn-right"></a>
<h1>Items by Type</h1>
</div>
<div data-role="content">
<style type="text/css" media="all">
.listview-wrapper, .listview-wrapper div.iscroll-scroller {
width: 100% !important;
}
</style>
<div data-role="fieldcontain" style="margin-bottom:40px;">
<label for="iibt_search">Item Search:</label>
<input type="search" class="item_search" name="iibt_search" id="iibt_search" value="" />
</div>
<h2>Items by Type:</h2>
<style type="text/css">
</style>
<div class="listview-wrapper" data-iscroll>
<ul id="iibt_listview" data-role="listview" data-inset="true" data-filter="true">
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=1&specific_name=Blu-Ray Players&specific_class=t">Blu-Ray Players<span class="ui-li-count">187</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=2&specific_name=CD-ROM Players&specific_class=t">CD-ROM Players<span class="ui-li-count">416</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=3&specific_name=Computers&specific_class=t">Computers<span class="ui-li-count">104</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=4&specific_name=Data Panels&specific_class=t">Data Panels<span class="ui-li-count">253</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=5&specific_name=Data Projectors&specific_class=t">Data Projectors<span class="ui-li-count">160</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=6&specific_name=Digital Cameras&specific_class=t">Digital Cameras<span class="ui-li-count">424</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=7&specific_name=DVD Players&specific_class=t">DVD Players<span class="ui-li-count">347</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=8&specific_name=Easels&specific_class=t">Easels<span class="ui-li-count">372</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=9&specific_name=Flipcharts&specific_class=t">Flipcharts<span class="ui-li-count">441</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=10&specific_name=Laptops&specific_class=t">Laptops<span class="ui-li-count">125</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=11&specific_name=MAC Monitor Cables&specific_class=t">MAC Monitor Cables<span class="ui-li-count">166</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=18&specific_name=Monitors&specific_class=t">Monitors<span class="ui-li-count">315</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=12&specific_name=Overheads&specific_class=t">Overheads<span class="ui-li-count">255</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=13&specific_name=Podiums&specific_class=t">Podiums<span class="ui-li-count">500</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=14&specific_name=Power Supplies&specific_class=t">Power Supplies<span class="ui-li-count">174</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=15&specific_name=Screens&specific_class=t">Screens<span class="ui-li-count">398</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=16&specific_name=Stereos&specific_class=t">Stereos<span class="ui-li-count">469</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=17&specific_name=TVs&specific_class=t">TVs<span class="ui-li-count">101</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=19&specific_name=VGV/MCGA Cables&specific_class=t">VGV/MCGA Cables<span class="ui-li-count">111</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=20&specific_name=Video Cameras&specific_class=t">Video Cameras<span class="ui-li-count">470</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=21&specific_name=Video Projectors&specific_class=t">Video Projectors<span class="ui-li-count">495</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=22&specific_name=Visualizers&specific_class=t">Visualizers<span class="ui-li-count">470</span></a>
</li>
</ul>
</div>
</div>
<div id="fixed_footer" data-theme="a" data-role="footer" data-position="fixed" style="text-align: center;">
<div style="display:inline-block; margin-top:10px; margin-bottom:10px;">manage-inventory-items_by_type</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
你有一个很好的demmo。 小心链接。 http://davidwalsh.name/iphone-scrollbars
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>example up and load</title>
<link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#list").bind('pageinit', function () {
$.ajax({
type: "get",
async: false,
url: "http://www.57lehuo.com/index.php?a=index&m=api&method=itemsSearchGet&keyword=连衣裙&sign=5cb85c3eed22c1908e05c584813c8dd2",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"itemsSearchGet",
success: function(json){
var content='';
$.each( json['result'], function(i, n){
var url=n.url!='undefined'?n.url:'';
var bimg=n.bimg!='undefined'?n.bimg:'';
var title=n.title!='undefined'?n.title:'';
content = content + "<li>";
content = content + "<a target=\"_blank\" href=\"http://s.click.taobao.com/t?e=zGU34CA7K%2BPkqB05%2Bm7rfGGjlY60oHcc7bkKOQiRddrNEyGLx31dnc6%2Fz%2BaQS2UNDUWpebTcEEjBuk1W5odmLS8%3D&pid=mm_30949159_0_0\">";
content = content + "<img src=\""+bimg+"_100x100.jpg\" />";
content = content + "<h2>";
content = content + "clothes";
content = content + "</h2>";
content = content + "<p>";
content = content + title;
content = content + "</p>";
content = content + "</a>";
content = content + "</li>";
});
$("#thelist").append(content).listview('refresh');
},
error: function(){
//alert('fail');
}
});
});
$("#list").bind("pagebeforeshow", function(){
setTimeout(loaded, 10);
});
})
</script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
/**
* down update
* myScroll.refresh();
*/
var p=2;
function pullDownAction () {
$.ajax({
type: "get",
async: false,
url: "http://www.57lehuo.com/index.php?a=index&m=api&method=itemsSearchGet&keyword=连衣裙&p="+p+"",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"itemsSearchGet",
success: function(json){
var content='';
$.each( json['result'], function(i, n){
var url=n.url!='undefined'?n.url:'';
var bimg=n.bimg!='undefined'?n.bimg:'';
var title=n.title!='undefined'?n.title:'';
content = content + "<li>";
content = content + "<a target=\"_blank\" href=\"http://s.click.taobao.com/t?e=zGU34CA7K%2BPkqB05%2Bm7rfGGjlY60oHcc7bkKOQiRddrNEyGLx31dnc6%2Fz%2BaQS2UNDUWpebTcEEjBuk1W5odmLS8%3D&pid=mm_30949159_0_0\">";
content = content + "<img src=\""+bimg+"_100x100.jpg\" />";
content = content + "<h2>";
content = content + "clothes";
content = content + "</h2>";
content = content + "<p>";
content = content + title;
content = content + "</p>";
content = content + "</a>";
content = content + "</li>";
});
$("#thelist").prepend(content).listview('refresh');
},
error: function(){
// alert('fail');
}
});
p++;
myScroll.refresh(); //update new page Remember to
}
/**
* do itself
* myScroll.refresh(); // update new page
*/
function pullUpAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
/*
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<3; i++) {
li = document.createElement('li');
li.innerText = 'Generated row ' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
}
*/
var content = "";
for (var i=1;i<3;i++){
content = content + "<li>";
content = content + "<a href=\"#\">";
content = content + "<img src=\"images/album-bb.jpg\" />";
content = content + "<h2>";
content = content + "add new content<br/>"+new Date();
content = content + "</h2>";
content = content + "<p>";
content = content + "Broken Bells";
content = content + "</p>";
content = content + "</a>";
content = content + "</li>";
}
$("#thelist").append(content).listview('refresh');
myScroll.refresh(); // update new page Remember to Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* began iScroll
*/
function loaded() {
if(myScroll!=null){
myScroll.destroy();
}
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll('wrapper', {
useTransition: true, //default true
//useTransition: false,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'down update...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'up update...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'down update...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'down update...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'update...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'up date...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'loading...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'loading...';
pullUpAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
//document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<link rel="stylesheet" type="text/css" href="css/iscroll.css">
</head>
<body>
<div data-role="page" id="list">
<div id="header"><a href="#">product list</a></div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
</div>
<ul data-role="listview" data-icon="false" id="thelist">
<li><a href="#">
<img src="images/album-p.jpg">
<h3> Amadeus Phoenix</h3>
<p>Phoenix</p></a>
</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-grid="a">
<ul>
<li><a href="index.html" class="ui-btn-active" data-ajax="false">index</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>