This post is a complete tutorial about how to use the jQuery sliding plugin. Check the documentation and live example for full details.
What the plugin does?
This plugin has a purpose to create sliding elements, with a navigation arrows for a subset of items. For a small set, use the default sliding. For a large sets, use the remote sliding, that load elements on demand and cache it. This way the plugin will not make any request for pages that it was already loaded before.
Where is used
The plugin was developed for Globo.tv website at video listing.
Simple example
First, we need to call the plugin with the dependencies and a simple markup of a container div and a unordered list. This is the default markup, but you can change via options, to check different options, visit the documentation.
[jsfiddle url=”http://jsfiddle.net/fhpaC/” include=”html”]
And then we call the plugin with basic options and the following basic style:
[jsfiddle url=”http://jsfiddle.net/fhpaC/” include=”js,css”]
And we have the following result:
[jsfiddle url=”http://jsfiddle.net/fhpaC/” include=”result,html,js,css”]
Remote sliding
When you set the option url, you will activate the remote slide. Besides that, when you specify urlFormat, it’s possible to set a pattern for your url. This is useful when you have urls like ‘yourdomain/page/2/’.
We will use a url of example that return the html list. So the full code is showed below with live:
[jsfiddle url=”http://jsfiddle.net/LHnPq/2/” include=”result,html,js,css”]
We call the url that pass the content to be loaded.
We need to set setTotalPages, this way the plugin know the maximum of request is being maded. Usually this information came from a ajax request, but it’s needed otherwise you can paginate forward infinitely and will not disable the buttons when necessary.
I use params to pass the content, but it’s just a example to show how to use params to send extra data.
With the onAppend callback you can change the return data before is rendered, this way you can have a custom ajax format and extract from data just what you need, like a json key with the html content, like this:
[gist]https://gist.github.com/2984795[/gist]
