Daniel Barreto
11 years ago
parent
4bf1db37ef
commit
54aa741e8c
@ -0,0 +1,3 @@ |
||||
|
||||
.settings/ |
||||
.project |
||||
@ -0,0 +1,54 @@ |
||||
# jScroll jQuery Plugin for Infinite Scrolling / Auto-Paging |
||||
|
||||
Official site at [jscroll.com](http://jscroll.com/). |
||||
|
||||
* Copyright (C) 2011-2013, [Philip Klauzinski](http://klauzinski.com/) |
||||
* Current Version: 2.2.4 |
||||
* Dual licensed under the MIT and GPL Version 2 licenses. |
||||
* http://jscroll.com/#license |
||||
* http://www.opensource.org/licenses/mit-license.php |
||||
* http://www.gnu.org/licenses/gpl-2.0.html |
||||
|
||||
Requires jQuery v1.4.3+ |
||||
|
||||
## Facebook Page |
||||
|
||||
Follow us on Facebook for commit updates: http://www.facebook.com/jScroll.Infinite.Scrolling |
||||
|
||||
## Usage |
||||
|
||||
The `jscroll` method is called on the selector for which you want your scrollable content contained within. For example: |
||||
|
||||
```javascript |
||||
$('.jscroll').jscroll(); |
||||
``` |
||||
|
||||
The `jscroll` method takes an optional object literal as a parameter for overriding the default options. An example of how this can be done is shown below. |
||||
|
||||
```javascript |
||||
$('.jscroll').jscroll({ |
||||
loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...', |
||||
padding: 20, |
||||
nextSelector: 'a.jscroll-next:last', |
||||
contentSelector: 'li' |
||||
}); |
||||
``` |
||||
|
||||
## Options |
||||
|
||||
* debug (false) When set to true, outputs useful information to the console display if the `console` object exists. |
||||
* autoTrigger (true) When set to true, triggers the loading of the next set of content automatically when the user scrolls to the bottom of the containing element. When set to false, the required next link will trigger the loading of the next set of content when clicked. |
||||
* autoTriggerUntil (false) Set to an integer great than 0 to turn off `autoTrigger` of paging after the specified number of pages. Requires `autoTrigger` to be `true`. |
||||
* loadingHtml (`'<small>Loading...</small>'`) The HTML to show at the bottom of the content while loading the next set. |
||||
* padding (0) The distance from the bottom of the scrollable content at which to trigger the loading of the next set of content. This only applies when autoTrigger is set to true. |
||||
* nextSelector ('a:last') The selector to use for finding the link which contains the href pointing to the next set of content. If this selector is not found, or if it does not contain a href attribute, jScroll will self-destroy and unbind from the element upon which it was called. |
||||
* contentSelector ('') A convenience selector for loading only part of the content in the response for the next set of content. This selector will be ignored if left blank and will apply the entire response to the DOM. |
||||
* pagingSelector ('') Optionally define a selector for your paging controls so that they will be hidden, instead of just hiding the next page link. |
||||
* callback () Optionally define a callback function to be called after a set of content has been loaded. |
||||
|
||||
For more information on the *contentSelector* option and how it loads a response fragment, see the [jQuery documentation for the .load() method](http://api.jquery.com/load/). |
||||
|
||||
## LICENSES: |
||||
|
||||
* MIT: http://www.opensource.org/licenses/mit-license.php |
||||
* GPL-2.0: http://www.gnu.org/licenses/gpl-2.0.html |
||||
@ -0,0 +1,209 @@ |
||||
/*! |
||||
* jScroll - jQuery Plugin for Infinite Scrolling / Auto-Paging - v2.2.4 |
||||
* http://jscroll.com/
|
||||
* |
||||
* Copyright 2011-2013, Philip Klauzinski |
||||
* http://klauzinski.com/
|
||||
* Dual licensed under the MIT and GPL Version 2 licenses. |
||||
* http://jscroll.com/#license
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl-2.0.html
|
||||
* |
||||
* @author Philip Klauzinski |
||||
* @requires jQuery v1.4.3+ |
||||
*/ |
||||
(function($) { |
||||
|
||||
// Define the jscroll namespace and default settings
|
||||
$.jscroll = { |
||||
defaults: { |
||||
debug: false, |
||||
autoTrigger: true, |
||||
autoTriggerUntil: false, |
||||
loadingHtml: '<small>Loading...</small>', |
||||
padding: 0, |
||||
nextSelector: 'a:last', |
||||
contentSelector: '', |
||||
pagingSelector: '', |
||||
callback: false |
||||
} |
||||
}; |
||||
|
||||
// Constructor
|
||||
var jScroll = function($e, options) { |
||||
|
||||
// Private vars
|
||||
var _data = $e.data('jscroll'), |
||||
_userOptions = (typeof options === 'function') ? { callback: options } : options, |
||||
_options = $.extend({}, $.jscroll.defaults, _userOptions, _data || {}), |
||||
_isWindow = ($e.css('overflow-y') === 'visible'), |
||||
_$next = $e.find(_options.nextSelector).first(), |
||||
_$window = $(window), |
||||
_$body = $('body'), |
||||
_$scroll = _isWindow ? _$window : $e, |
||||
_nextHref = $.trim(_$next.attr('href') + ' ' + _options.contentSelector); |
||||
|
||||
// Initialization
|
||||
$e.data('jscroll', $.extend({}, _data, {initialized: true, waiting: false, nextHref: _nextHref})); |
||||
_wrapInnerContent(); |
||||
_preloadImage(); |
||||
_setBindings(); |
||||
|
||||
// Private methods
|
||||
|
||||
// Check if a loading image is defined and preload
|
||||
function _preloadImage() { |
||||
var src = $(_options.loadingHtml).filter('img').attr('src'); |
||||
if (src) { |
||||
var image = new Image(); |
||||
image.src = src; |
||||
} |
||||
} |
||||
|
||||
// Wrapper inner content, if it isn't already
|
||||
function _wrapInnerContent() { |
||||
if (!$e.find('.jscroll-inner').length) { |
||||
$e.contents().wrapAll('<div class="jscroll-inner" />'); |
||||
} |
||||
} |
||||
|
||||
// Find the next link's parent, or add one, and hide it
|
||||
function _nextWrap($next) { |
||||
if (_options.pagingSelector) { |
||||
var $parent = $next.closest(_options.pagingSelector).hide(); |
||||
} else { |
||||
var $parent = $next.parent().not('.jscroll-inner,.jscroll-added').addClass('jscroll-next-parent').hide(); |
||||
if (!$parent.length) { |
||||
$next.wrap('<div class="jscroll-next-parent" />').parent().hide(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Remove the jscroll behavior and data from an element
|
||||
function _destroy() { |
||||
return _$scroll.unbind('.jscroll') |
||||
.removeData('jscroll') |
||||
.find('.jscroll-inner').children().unwrap() |
||||
.filter('.jscroll-added').children().unwrap(); |
||||
} |
||||
|
||||
// Observe the scroll event for when to trigger the next load
|
||||
function _observe() { |
||||
_wrapInnerContent(); |
||||
var $inner = $e.find('div.jscroll-inner').first(), |
||||
data = $e.data('jscroll'), |
||||
borderTopWidth = parseInt($e.css('borderTopWidth')), |
||||
borderTopWidthInt = isNaN(borderTopWidth) ? 0 : borderTopWidth, |
||||
iContainerTop = parseInt($e.css('paddingTop')) + borderTopWidthInt, |
||||
iTopHeight = _isWindow ? _$scroll.scrollTop() : $e.offset().top, |
||||
innerTop = $inner.length ? $inner.offset().top : 0, |
||||
iTotalHeight = Math.ceil(iTopHeight - innerTop + _$scroll.height() + iContainerTop); |
||||
|
||||
if (!data.waiting && iTotalHeight + _options.padding >= $inner.outerHeight()) { |
||||
//data.nextHref = $.trim(data.nextHref + ' ' + _options.contentSelector);
|
||||
_debug('info', 'jScroll:', $inner.outerHeight() - iTotalHeight, 'from bottom. Loading next request...'); |
||||
return _load(); |
||||
} |
||||
} |
||||
|
||||
// Check if the href for the next set of content has been set
|
||||
function _checkNextHref(data) { |
||||
data = data || $e.data('jscroll'); |
||||
if (!data || !data.nextHref) { |
||||
_debug('warn', 'jScroll: nextSelector not found - destroying'); |
||||
_destroy(); |
||||
return false; |
||||
} else { |
||||
_setBindings(); |
||||
return true; |
||||
} |
||||
} |
||||
|
||||
function _setBindings() { |
||||
var $next = $e.find(_options.nextSelector).first(); |
||||
if (_options.autoTrigger && (_options.autoTriggerUntil === false || _options.autoTriggerUntil > 0)) { |
||||
_nextWrap($next); |
||||
if (_$body.height() <= _$window.height()) { |
||||
_observe(); |
||||
} |
||||
_$scroll.unbind('.jscroll').bind('scroll.jscroll', function() { |
||||
return _observe(); |
||||
}); |
||||
if (_options.autoTriggerUntil > 0) { |
||||
_options.autoTriggerUntil--; |
||||
} |
||||
} else { |
||||
_$scroll.unbind('.jscroll'); |
||||
$next.bind('click.jscroll', function() { |
||||
_nextWrap($next); |
||||
_load(); |
||||
return false; |
||||
}); |
||||
} |
||||
} |
||||
|
||||
// Load the next set of content, if available
|
||||
function _load() { |
||||
var $inner = $e.find('div.jscroll-inner').first(), |
||||
data = $e.data('jscroll'); |
||||
|
||||
data.waiting = true; |
||||
$inner.append('<div class="jscroll-added" />') |
||||
.children('.jscroll-added').last() |
||||
.html('<div class="jscroll-loading">' + _options.loadingHtml + '</div>'); |
||||
|
||||
return $e.animate({scrollTop: $inner.outerHeight()}, 0, function() { |
||||
$inner.find('div.jscroll-added').last().load(data.nextHref, function(r, status, xhr) { |
||||
if (status === 'error') { |
||||
return _destroy(); |
||||
} |
||||
var $next = $(this).find(_options.nextSelector).first(); |
||||
data.waiting = false; |
||||
data.nextHref = $next.attr('href') ? $.trim($next.attr('href') + ' ' + _options.contentSelector) : false; |
||||
$('.jscroll-next-parent', $e).remove(); // Remove the previous next link now that we have a new one
|
||||
_checkNextHref(); |
||||
if (_options.callback) { |
||||
_options.callback.call(this); |
||||
} |
||||
_debug('dir', data); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
// Safe console debug - http://klauzinski.com/javascript/safe-firebug-console-in-javascript
|
||||
function _debug(m) { |
||||
if (_options.debug && typeof console === 'object' && (typeof m === 'object' || typeof console[m] === 'function')) { |
||||
if (typeof m === 'object') { |
||||
var args = []; |
||||
for (var sMethod in m) { |
||||
if (typeof console[sMethod] === 'function') { |
||||
args = (m[sMethod].length) ? m[sMethod] : [m[sMethod]]; |
||||
console[sMethod].apply(console, args); |
||||
} else { |
||||
console.log.apply(console, args); |
||||
} |
||||
} |
||||
} else { |
||||
console[m].apply(console, Array.prototype.slice.call(arguments, 1)); |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Expose API methods via the jQuery.jscroll namespace, e.g. $('sel').jscroll.method()
|
||||
$.extend($e.jscroll, { |
||||
destroy: _destroy |
||||
}); |
||||
return $e; |
||||
}; |
||||
|
||||
// Define the jscroll plugin method and loop
|
||||
$.fn.jscroll = function(m) { |
||||
return this.each(function() { |
||||
var $this = $(this), |
||||
data = $this.data('jscroll'); |
||||
// Instantiate jScroll on this element if it hasn't been already
|
||||
if (data && data.initialized) return; |
||||
var jscroll = new jScroll($this, m); |
||||
}); |
||||
}; |
||||
})(jQuery); |
||||
@ -0,0 +1,15 @@ |
||||
/*! |
||||
* jScroll - jQuery Plugin for Infinite Scrolling / Auto-Paging - v2.2.4 |
||||
* http://jscroll.com/
|
||||
* |
||||
* Copyright 2011-2013, Philip Klauzinski |
||||
* http://klauzinski.com/
|
||||
* Dual licensed under the MIT and GPL Version 2 licenses. |
||||
* http://jscroll.com/#license
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl-2.0.html
|
||||
* |
||||
* @author Philip Klauzinski |
||||
* @requires jQuery v1.4.3+ |
||||
*/ |
||||
(function(b){b.jscroll={defaults:{debug:false,autoTrigger:true,autoTriggerUntil:false,loadingHtml:"<small>Loading...</small>",padding:0,nextSelector:"a:last",contentSelector:"",pagingSelector:"",callback:false}};var a=function(e,g){var o=e.data("jscroll"),n=(typeof g==="function")?{callback:g}:g,p=b.extend({},b.jscroll.defaults,n,o||{}),c=(e.css("overflow-y")==="visible"),l=e.find(p.nextSelector).first(),v=b(window),h=b("body"),q=c?v:e,m=b.trim(l.attr("href")+" "+p.contentSelector);e.data("jscroll",b.extend({},o,{initialized:true,waiting:false,nextHref:m}));r();k();t();function k(){var x=b(p.loadingHtml).filter("img").attr("src");if(x){var w=new Image();w.src=x}}function r(){if(!e.find(".jscroll-inner").length){e.contents().wrapAll('<div class="jscroll-inner" />')}}function d(w){if(p.pagingSelector){var x=w.closest(p.pagingSelector).hide()}else{var x=w.parent().not(".jscroll-inner,.jscroll-added").addClass("jscroll-next-parent").hide();if(!x.length){w.wrap('<div class="jscroll-next-parent" />').parent().hide()}}}function j(){return q.unbind(".jscroll").removeData("jscroll").find(".jscroll-inner").children().unwrap().filter(".jscroll-added").children().unwrap()}function i(){r();var D=e.find("div.jscroll-inner").first(),B=e.data("jscroll"),C=parseInt(e.css("borderTopWidth")),y=isNaN(C)?0:C,x=parseInt(e.css("paddingTop"))+y,A=c?q.scrollTop():e.offset().top,z=D.length?D.offset().top:0,w=Math.ceil(A-z+q.height()+x);if(!B.waiting&&w+p.padding>=D.outerHeight()){f("info","jScroll:",D.outerHeight()-w,"from bottom. Loading next request...");return u()}}function s(w){w=w||e.data("jscroll");if(!w||!w.nextHref){f("warn","jScroll: nextSelector not found - destroying");j();return false}else{t();return true}}function t(){var w=e.find(p.nextSelector).first();if(p.autoTrigger&&(p.autoTriggerUntil===false||p.autoTriggerUntil>0)){d(w);if(h.height()<=v.height()){i()}q.unbind(".jscroll").bind("scroll.jscroll",function(){return i()});if(p.autoTriggerUntil>0){p.autoTriggerUntil--}}else{q.unbind(".jscroll");w.bind("click.jscroll",function(){d(w);u();return false})}}function u(){var x=e.find("div.jscroll-inner").first(),w=e.data("jscroll");w.waiting=true;x.append('<div class="jscroll-added" />').children(".jscroll-added").last().html('<div class="jscroll-loading">'+p.loadingHtml+"</div>");return e.animate({scrollTop:x.outerHeight()},0,function(){x.find("div.jscroll-added").last().load(w.nextHref,function(A,z,B){if(z==="error"){return j()}var y=b(this).find(p.nextSelector).first();w.waiting=false;w.nextHref=y.attr("href")?b.trim(y.attr("href")+" "+p.contentSelector):false;b(".jscroll-next-parent",e).remove();s();if(p.callback){p.callback.call(this)}f("dir",w)})})}function f(w){if(p.debug&&typeof console==="object"&&(typeof w==="object"||typeof console[w]==="function")){if(typeof w==="object"){var y=[];for(var x in w){if(typeof console[x]==="function"){y=(w[x].length)?w[x]:[w[x]];console[x].apply(console,y)}else{console.log.apply(console,y)}}}else{console[w].apply(console,Array.prototype.slice.call(arguments,1))}}}b.extend(e.jscroll,{destroy:j});return e};b.fn.jscroll=function(c){return this.each(function(){var f=b(this),e=f.data("jscroll");if(e&&e.initialized){return}var d=new a(f,c)})}})(jQuery); |
||||
@ -0,0 +1,41 @@ |
||||
{ |
||||
"name": "jscroll", |
||||
"version": "2.2.4", |
||||
"title": "jScroll - jQuery Plugin for Infinite Scrolling / Auto-Paging", |
||||
"author": { |
||||
"name": "Philip KLauzinski", |
||||
"url": "http://klauzinski.com" |
||||
}, |
||||
"licenses": [ |
||||
{ |
||||
"type": "MIT", |
||||
"url": "http://opensource.org/licenses/MIT" |
||||
}, |
||||
{ |
||||
"type": "GPL-2.0", |
||||
"url": "http://opensource.org/licenses/GPL-2.0" |
||||
} |
||||
], |
||||
"dependencies": { |
||||
"jquery": ">=1.4.3" |
||||
}, |
||||
"description": "jScroll is a jQuery plugin allowing you to effortlessly implement infinite scrolling, lazy loading, or whatever catchy phrase you may know it as, within a web page or web/HTML5 application. jScroll allows you to initiate an auto-paged AJAX fetch triggered by scrolling within a fixed-height div, or from scrolling the window object. A real-world example of this behavior is your Facebook News Feed, which automatically loads content as you scroll down and reach the end of the page.", |
||||
"keywords": [ |
||||
"infinite-scrolling", |
||||
"lazy-loading", |
||||
"auto-paging", |
||||
"infinite", |
||||
"scroll", |
||||
"scrolling", |
||||
"lazy", |
||||
"auto", |
||||
"loading", |
||||
"paging", |
||||
"ajax", |
||||
"html5" |
||||
], |
||||
"homepage": "http://jscroll.com", |
||||
"demo": "http://jscroll.com/#examples", |
||||
"docs": "http://jscroll.com", |
||||
"bugs": "https://github.com/pklauzinski/jscroll/issues" |
||||
} |
||||
Loading…
Reference in new issue