jQuery ScrollPagination修改之后
jQuery ScrollPagination修改之后代码
/*
** Anderson Ferminiano
** contato@andersonferminiano.com -- feel free to contact me for bugs or new implementations.
** jQuery ScrollPagination
** 28th/March/2011
** http://andersonferminiano.com/jqueryscrollpagination/
** You may use this script for free, but keep my credits.
** Thank you.
*/ (function( $ ){ $.fn.scrollPagination = function(options) {
var opts = $.extend($.fn.scrollPagination.defaults, options || {});
var target = opts.scrollTarget;
if (target == null) {
target = obj;
}
opts.scrollTarget = target;
return this.each(function() {
$.fn.scrollPagination.init($(this), opts);
}); }; $.fn.stopScrollPagination = function() {
return this.each(function() {
$(this).attr('scrollPagination', 'disabled');
}); }; $.fn.scrollPagination.loadContent = function(obj, opts) {
var target = opts.scrollTarget;
var mayLoadContent = $(target).scrollTop() + opts.heightOffset >= $(document).height() - $(target).height();
if (mayLoadContent) {
if (opts.beforeLoad != null) {
opts.beforeLoad();
}
$(obj).children().attr('rel', 'loaded');
$.ajax({
type: 'POST',
url: opts.contentPage,
data: opts.contentData,
beforeSend:function(){
if( opts.beforeSend != null ){
opts.beforeSend();
}
},
success: function(data) {
//call your own function to load the content opts.loader(data); /*
var objectsRendered = $(obj).children('[rel!=loaded]'); if (opts.afterLoad != null) {
opts.afterLoad(objectsRendered);
}
*/
},
dataType: opts.dataType
});
} }; $.fn.scrollPagination.init = function(obj, opts) {
var target = opts.scrollTarget;
$(obj).attr('scrollPagination', 'enabled'); $(target).scroll(function(event) {
if ($(obj).attr('scrollPagination') == 'enabled') {
$.fn.scrollPagination.loadContent(obj, opts);
} else {
event.stopPropagation();
}
}); $.fn.scrollPagination.loadContent(obj, opts); }; $.fn.scrollPagination.defaults = {
'contentPage': null,
'contentData': {},
'beforeLoad': null,
'afterLoad': null,
'scrollTarget': null,
'heightOffset': ,
//Add
'dataType': null,
'beforeSend':null,
'loader': function(data) {}
}; })( jQuery );
调用代码
// 定义页数
var page = ; $(function() { // 底部加载进度条
var loadinghtml = '<div class="loading"><img src="__PUBLIC__/Mobile/Images/loadingxxx.gif" align="absmiddle" /></div>'; $('.BookLibrarySearchList').scrollPagination({
// 你要搜索结果的页面
'contentPage': "{:U('Ranking/AjaxRandList',array('tag'=>$tag,'type'=>$type))}",
// 你可以通过 children().size() 知道哪里是分页[JSON格式]
'contentData': {
cPage: function() {
return page;
}
},
// 谁该怎么滚动?在这个例子中,完整的窗口
'scrollTarget': $(window),
// 在页面到达结束之前,从多少像素开始加载?
'heightOffset': ,
// 前负荷,一些功能,可能显示一个加载DIV
'beforeLoad': function() {
// 翻页页数累加
page = page + ;
},
'beforeSend': function() {
// 加载区域显示
$('.loading').remove();
$('.BookLibrarySearchList').append(loadinghtml);
},
'afterLoad': function(elementsLoaded) {
/*
var i = 0;
if ($('#content').children().size() > 100) {
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
*/
},
'dataType': 'JSON',
'loader': function(data) { // 隐藏加载区域
$('.loading').remove();
if (data.length <= ) {
$('.BookLibrarySearchList').stopScrollPagination(); $('.BookLibrarySearchList .loadingNo').remove();
$('.BookLibrarySearchList').append("<div class='loadingNo'>没有了!</div>");
} else {
for (var i = ; i < data.length; i++) {
var ChapterObj = data[i].ChapterObj;
var html = "";
html += "<div class=\"list\">";
html += " <div class=\"table\">";
html += " <table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"100%\">";
html += " <tr>";
html += " <td rowspan=\"4\" width=\"30%\"><a href=\"" + data[i].url + "\" title=\"" + data[i].title + "\">";
html += " <img src=\"__PUBLIC__/" + data[i].picture + "\" />";
html += " </a></td>";
html += " <td width=\"70%\" class=\"b c\">";
html += " <a href=\"" + data[i].url + "\" title=\"" + data[i].title + "\">" + data[i].title + "</a>";
html += " <span>" + data[i].hits + "万点击</span>";
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td class=\"b\">作者:" + data[i].penName + "</td>";
html += " </tr>";
html += " <tr>";
if (ChapterObj.length == ) {
html += " <td class=\"b\">更新:暂无</td>";
} else {
html += " <td class=\"b\">更新:" + ChapterObj.addTime + " / " + ChapterObj.title + "</td>";
}
html += " </tr>";
html += " <tr>";
html += " <td class=\"a b\">" + data[i].jianjie + "</td>";
html += " </tr>";
html += " </table>";
html += " </div>";
html += "</div>"; $('.BookLibrarySearchList').append(html);
}
}
}
}); });
jQuery ScrollPagination修改之后的更多相关文章
- jquery中修改一个元素的值或内容
jquery中修改一个元素的值或内容,比如数值增加可以使用这个方法取得原值并+1 $this.text(function(i,ot){return Number(ot)+1;});
- JQuery动态修改样式
JQuery动态修改样式 SetStyle(); function SetStyle() { $(".toolbar").remove(); $(".placeholde ...
- jquery无法修改网页标题,无法修改网页标题
今天遇到一个问题,搜索时动态修改网页标题,用jquery的这段代码无效,无论FF还是IE $("title").html("new title"); 后来只好用 ...
- jquery uploadify修改上传的文件名和显示
如果觉得看文章太麻烦,可以直接看参考:http://stackoverflow.com/questions/7707687/jquery-uploadify-change-file-name-as-i ...
- JQuery Mobile - 修改复选框的选中状态无效解决办法!
今晚,在编写JQuery Mobile程序时候,需要在代码里面控制复选框的选中状态,很简单的代码啊,很快完成了!等测试程序时候傻眼了,页面无论如何也不按照我写的代码显示出来!问题出在哪里呢?是我写的控 ...
- jquery入门 修改网页背景颜色
我们在浏览一些网站,尤其是一些小说网站的时候,都会有修改页面背景颜色的地方,这个功能使用jquery很容易实现. 效果图: show you code: <!doctype html> & ...
- 用Jquery实现修改页面selecte标签的默认选择
在WEB开发中,最基础的也是用的最多的就是数据库的增删改查,修改往往以为的小部分的改动,所以我们往往是在表单中填充以前的内容然后显示给用户进行修改操作. 在填充默认内容的时候对于input标签我们往往 ...
- jquery操作按钮修改对应input属性
点击右侧的修改按钮,对应的input中的disabled和readonly得属性修改 $(".buttonxg button").click(function(){ $(this) ...
- jquery 双击修改某项值
双击修改某项值 $(function() { $('td.breakword').dblclick(function(){ $(this).addClass('input').html('<in ...
随机推荐
- 《数据结构与算法Python语言描述》习题第二章第三题(python版)
ADT Rational: #定义有理数的抽象数据类型 Rational(self, int num, int den) #构造有理数num/den +(self, Rational r2) #求出本 ...
- mybatis报错invalid types () or values ()解决方法
原因: Pojo类User没提供无参数构造方法, 加上该构造方法后,问题解决 ### Cause: org.apache.ibatis.reflection.ReflectionException ...
- Singleton
1.//懒汉模式 //天生线程不安全,但是效率高 public class Singleton { private static Singleton singleton; private Single ...
- Apache Lucene(全文检索引擎)—搜索
目录 返回目录:http://www.cnblogs.com/hanyinglong/p/5464604.html 本项目Demo已上传GitHub,欢迎大家fork下载学习:https://gith ...
- MYSQL进阶,新手变司机
一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( S ...
- Ajax表单异步上传(包括文件域)
起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试 先是尝试了一下 "jQu ...
- SharePoint 2007 User Re-created in AD with new SID issue on MySite
When active directory users get deleted and re-created, even with the same user id, there's a nasty ...
- Android Studio 导入项目 出现安装Error:Cause: failed to find target with hash string 'android-23' 等错误
今天 在导入 一个新项目时 : 出现了这个错 Error:Cause: failed to find target with hash string 'android-23' in: C:\Use ...
- 深入浅出React Native 3: 从零开始写一个Hello World
这是深入浅出React Native的第三篇文章. 1. 环境配置 2. 我的第一个应用 将index.ios.js中的代码全部删掉,为什么要删掉呢?因为我们准备从零开始写一个应用~学习技术最好的方式 ...
- JAVA中的Fork/Join框架
看了下Java Tutorials中的fork/join章节,整理下. 什么是fork/join框架 fork/join框架是ExecutorService接口的一个实现,可以帮助开发人员充分利用多核 ...