<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/tld/taglibs.jsp"%>
<%@page import="cn.com.jsoft.global.Global"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天翼俱乐部---首页</title>
<link href="css/tyjlb.css" rel="stylesheet" media="all" type="text/css" />
<script src="js/dragloader.js"></script>
<script type="text/javascript" src="/admin/js/jquery-1.8.2.js"></script>
</head>
<body>
<!--page_start-->
<div class="page">
<!--main_start-->
<div class="main">
<!--banner_start-->
<div class="banner clear-fix">
<ul>
<c:forEach items="${imgClubList}" var="img">
<li><a href="${img.url }"><img src="${basePath }${img.uploadaddress}"></a></li>
</c:forEach>
</ul>
</div><!--banner_end-->
<!--main_news_start-->
<div class="new clear-fix">
<!-- newList_bigTitleType_start -->
<div class="new-title clear-fix">
<div class="new-title-left">最新活动 </div>
<div class="new-title-middle">
<span class="new-title-line"></span>
</div>
<div class="new-title-right" onclick="location.href='${basePath}/public/sjkf/clubcolumn/columnList.jspx?${ urlParam}&mobile=${mobile }'">更多<img src="images/zxhd_more.png"> </div>
</div><!-- NewList_BigTitleType_end -->
<!--newList_start-->
<div class="new-list clear-fix">
<!--newlist_main_start-->
<ul class="new-list-main" id="list_main">
<c:forEach items="${finalClubDataList}" var="item">
<li>
<a href="${item.url }">
<!--NewList_L_Img-->
<div class="new-list-l"><img src="${basepath }${item.uploadaddress}"></div>
<!--NewList_R_main-->
<div class="new-list-r">
<!--NewList_R_title-->
<h2 class="h2-font">${item.title }</h2>
<!--NewList_R_main-->
<p>
<c:if test="${fn:length(item.introduce) >= 107}">
${fn:substring(item.introduce,0,107) }...
</c:if>
<c:if test="${fn:length(item.introduce) < 107}">
${item.introduce }
</c:if>
</p>
<!--NewList_R_tag-->
<span class="tag"><img src="${basePath }${item.sLogo}"></span>
</div>
</a>
</li>
</c:forEach>
</ul><!--NewList_main_end-->
<div id="sp1" class="new-list-more" style="display:none">已无更多数据</div>
</div><!--newlist_end-->
</div><!--main_news_end-->
<!--up_slide_start-->
<div id="up-refresh" class="new-list-more">
<span class="up-refresh-ico"></span>
<span class="up-refresh-text" onclick="ajaxChangePage()">向上滑动加载更多数据</span>
</div><!--up_slide_end-->
<!--滑动脚本-->
<form method="post" action="" id="theForm" enctype="multipart/form-data">
<input type="hidden" id="prov" name="prov" value="${prov }" />
<input type="hidden" id="mobile" name="mobile" value="${mobile }" />
<input type="hidden" id="urlParam" name="urlParam" value="${urlParam }" />
<input type="hidden" id="pageIndex" name="pageIndex" value="2" />
</form>
<script type="text/javascript">
(function() {
var uprefresh=document.getElementById('up-refresh');
var downrefresh=document.getElementById('down-refresh');
var list_main = document.getElementById('list_main');
var dragger = new DragLoader(document.getElementsByClassName('main')[0], {
dragDownThreshold:60,/*向下滑动区域*/
dragUpThreshold:20,/*向上滑动区域*/
dragDownRegionCls: 'DownRefresh',/*向下滑动样式*/
dragUpRegionCls: 'UpRefresh',/*向上滑动样式*/
disableDragDown: true,
/*向下滑动时的状态显示*/
dragDownHelper: function(status) {
if (status == 'default') {
return '<div> <span class="down-refresh-ico"></span>向下滑动加载更多数据</div>';
} else if (status == 'prepare') {
return '<div> <span class="down-refresh-ico flip"></span>松开加载更多数据</div>';
} else if (status == 'load') {
return '<div> <span class="loading-img"></span>正在加载中，请稍后...</div>';
}
},
/*[主要code]向上滑动时的状态显示*/
dragUpHelper: function(status) {
uprefresh.querySelector('.up-refresh-ico').style.display='none';
if (status == 'default') {
uprefresh.querySelector('.up-refresh-text').innerHTML = '<span class="up-refresh-ico"></span>向上滑动加载更多数据';
return '';
} else if (status == 'prepare') {
uprefresh.querySelector('.up-refresh-text').innerHTML = '<span class="up-refresh-ico"></span>松开加载更多数据';
return '';
} else if (status == 'load') {
uprefresh.querySelector('.up-refresh-text').innerHTML = '<span class="loading-img"></span>正在加载中，请稍后...';
return '';
}
}
});
dragger.on('dragDownLoad', function() {
setTimeout(function() {
/*备注：此处放置数据刷新的脚本，主要是新闻列表页的 li */
// 无论何时，必须由业务功能主动调用reset()接口，以还原状态
// 比如在onDragDownLoad()回调中使用ajax加载数据时，在ajax的回调函数中应当调用reset()重置drag状态
// 如果不重置，drag操作将失效
dragger.reset();
//alert('down刷新');
}, 500);
});
dragger.on('dragUpLoad', function() {
/*备注：此处放置数据刷新的脚本，主要是新闻列表页的 li */
setTimeout(function() {
dragger.reset();
ajaxChangePage();
}, 500);
//list_main.innerHTML('asdasdasdasd');
//alert('up刷新');
});
})();
function ajaxChangePage(){
var prov = $("#prov").val();
var pageIndex = $("#pageIndex").val();//下一页就是第二页
//alert('当前pageindex:'+pageIndex);
var ip = '<%=Global.getProperty("tianyiClub_ip") %>';
//alert(ip);
$.ajax({
data:$("#theForm").serialize(),
url: ip + "/tianyiClub/changePage.jspx",
type: 'POST',
dataType: 'JSON',
timeout: 5000,
error: function() { alert('翻页失败!'); },
success: function(msg) {
//记下当前是第几页了
$("#pageIndex").attr("value",(pageIndex-0+1));//很奇怪，直接+1居然变成11；
//alert("翻页后pageIndex"+$("#pageIndex").val());
//alert(eval(msg));
if(null == eval(msg)){
$("#up-refresh").attr("style","display:none");
$("#sp1").attr("style","display:block");
setTimeout(function() {
$("#sp1").attr("style","display:none");
}, 1000);
return;
}
$.each(eval(msg), function(i, item) {
//alert(item.URL);
var msg = "<li><a href='"+item.url+"'><div class='new-list-l'><img src='${basepath }"+item.uploadaddress+"'></div><div class='new-list-r'><h2 class='h2-font'>"+item.title+"</h2><p>"+substrStr(item.introduce)+"</p><span class='tag'><img src='"+item.sLogo+"' /></span></div></a></li>";
$("#list_main").append(msg);
});
}
});
}
function substrStr(Str){
var i,len,code;
if(Str==null || Str == "") return 0;
len = Str.length;
for (i = 0;i < Str.length;i++)
{
code = Str.charCodeAt(i);
if (code > 255) {len ++;}
}
if(len >=107){
return Str.substr(0,107)+"...";
}else{
return Str;
}
}
</script>
<!--<input type="button" value="我来触发ajax" onclick="ajaxChangePage()" />
--></div><!--main_end-->
</div><!--page_end-->
</body>
</html>
特别说明：
将ajax获取到的数据填充到dragger中，即可模拟！
需要的js：https://github.com/maxzhang/dragloader/blob/master/dragloader.js
参考地址：maxzhang/dragloader
dragloader.js是一个面向移动Web开发的JavaScript库，帮助开发者在使用页面原生滚动时，模拟上/下拉手势，实现Pull to Request操作。