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 ...
随机推荐
- 回溯法求n的全排列
代码如下: #include <iostream> #include <algorithm> #include <stdio.h> #include <cst ...
- nyoj-一笔画问题-欧拉图+联通判定
一笔画问题 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下 ...
- Could not publish server configuration for Tomcat v6.0 Server at localhost.
经常在使用tomcat服务器的时候 总会发生一些莫名其妙的错误. 就像下面这个错误: 在配置文件中存在多个/MyWeb的配置,导致不能发布服务. 错误信息: Could not publish ser ...
- 从零开始学 Java - Spring 使用 Quartz 任务调度定时器
生活的味道 睁开眼看一看窗外的阳光,伸一个懒腰,拿起放在床一旁的水白开水,甜甜的味道,晃着尾巴东张西望的猫猫,在窗台上舞蹈.你向生活微笑,生活也向你微笑. 请你不要询问我的未来,这有些可笑.你问我你是 ...
- 学习笔记:Asp.Net MVC更新部分页面
Asp.Net MVC 更新部分页面 设想我们有一篇文章下面的提交评论时如何只刷新评论内容部分, 方法一,利用ajax通过js代码实现. 方法二,利用Ajax.BeginForm()+部分视图实现. ...
- 3D Banner(jQuery)
1.这是用面向对象的思想去动态生成banner的简易流程,用到一个javaScript框架jQuer: 2.将代码黏贴成html文件,直接用浏览器打开即可: 3.layer属于弹窗提示类插件,可能需要 ...
- 用CAShapeLayer实现一个简单的饼状图(PieView)
自己写了一个简单的PieView,demo在这里:https://github.com/Phelthas/LXMPieView 效果如图: 参考了https://github.com/kevinzho ...
- iOS歌词逐渐变色动画
实现歌词逐渐变色的动画,像卡拉OK一样可以根据时间进度来染色.效果如图: 因项目需求要实现一个类似歌词逐渐变色的效果,自己想来想去想不出来实现方案,还是得求助万能的google, 最终是找到了这篇 ...
- IOS开发基础知识--碎片5
二十三:addSubview和insertSubview 区别 addSubview 是将view加到所有层的最顶层 相当于将insertSubview的atIndex参数设置成view.subvie ...
- IOS开发之支付功能概述
前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...