The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 7 more by this user. Created: 10/25/12
Last CDN Push: 12/5/12
Build Tag: gallery-2012.12.05-21-01
Project: YUI 3
License: YUI BSD
YUI Version: 3.7.3
Free for use.
Have you ever wanted to replace your 1 2 3 4 pagination links with a "More" button that dynamically loads content and inserts it above or below the already visible content? Then this is the module for you.
More Results Loader allows you to retrieve a normal HTML page (or json content) and select a node within to insert into your page. This also also allows you to do a full page load and retrieve fragments on demand, reducing your server load.
With this we can achieve similar effects you see in Facebook such as periodically automatically loading new content on top of the page or loading more content as you scroll down.
A plugin that responds to end of page scroll event to load new content is in the works.
The url you define for content retrieval can contain various parameters that More Results Loader replaces:
{st}: the start of the resultset
{mx}: how many results to retrieve
{count}: how many results there are (0 = infinite)
{dte}: the current date in milliseconds
In addition to responding to a click event, you can also retrieve content based on a timed interval.
An update that will happen soon is that dte will be remembered so that the date sent is not the current date but the last time a request occurred. This in order to make it easier to retrieve the latest content
Configuration options
url
The url supplied to the loader
start
The start value of the resultset
max
The max value for loading. Since we're not counting items when we're loading
every load is assumed to contain the maximum amount of elements
count
The total number of results. If 0, it is assumed that loading is "endless"
in which case it is recommendable to use a url which supports the dte={dte} parameter which supplies the current time in milliseconds
append
Should the retrieved content be appended or prepended
autoRepeat
Repeat the loading event automatically every x seconds.
With this function it is recommended that use a dte variable in the url and process it on the server to avoid duplicate results
container
Container node to automatically append/prepend retrieved content to.
If container = null it is assumed you will handle the processing yourself through the supplied events
moreBtn
A reference to a more button, if any
contentSelector
Select a specific node in the returned content. The content in this node will be selected to be inserted into the page
EVENTS
load
Event generated when content is returned from the server. Supplies:
max
Event generated when the last page is reached. Only thrown when count > 0. Supplies:
error
Event generated when an error occurs in the response. This could be used to update the UI with a network failure message or try again button. Supplies
start
Event generated at the start of the loading process. Could be used to activate a busy screen or disabling the load more button. Supplied:
<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2012.12.05-21-01'
}).use('gallery-more-loader', function(Y) {
var c = Y.one('#container1'),
m1 = new Y.MoreLoader({
container:c,
url: c.getData('url'),
start: parseInt(c.getData('start'),10),
max: parseInt(c.getData('max'),10),
count: parseInt(c.getData('count'),10),
moreBtn: '#moreBtn',
contentSelector:'#contain-me'
});
var m2 = new Y.MoreLoader({
container:c,
url: c.getData('url'),
append:false,
autoRepeat:3,
contentSelector:'#contain-me'
});
m1.on('max', function(){
alert('max reached');
});
var m4 = new Y.MoreLoader({
url: 'http://myurl/test.json',
autoRepeat:10
});
m4.on('load',function(e){
alert('loaded json' + e.responseText);
});
});
<div id="container1" data-url="http://myurl?start={st}&max={mx}" data-start=0 data-max=25 data-count=100>
SOME EXISTING CONTENT - Button load, Append content, Max content 100, steps of 25
</div>
<a id="moreBtn" href="javascript:void(0);">MORE</a>
</div>
All code on this site is licensed under the BSD License unless stated otherwise.