Demos
Here's some simple demos.
These may help you to understand jQuery.LazyJaxDavis.
Simple
A very simple demo.
This demo is pretty simiar to this document itself. It just fetches the new page, then update the main content with animation.
new $.LazyJaxDavis(function(router){
var $root = $('#lazyjaxdavisroot');
router.bind('everyfetchstart', function(page){
$root.css('opacity', 0.6);
window.scrollTo(0, 0);
});
router.bind('everyfetchsuccess', function(page){
$root.css('opacity', 1);
$newcontent = $(page.rip('content')).hide();
$root.empty().append($newcontent);
$newcontent.fadeIn();
page.trigger('pageready');
});
router.bind('everyfetchfail', function(){
alert('ajax error!');
$root.css('opacity', 1);
});
});
Multi-rip
This demo shows how multi-rip works.
In this demo, you can see that the main content and sidenav are refreshed.
$(function(){
new $.LazyJaxDavis(function(router){
var $root = $('#lazyjaxdavisroot');
var $sidenav = $('#sidenav');
router.option({
expr:{
sidenav: /<!-- sidenav start -->([\s\S]*)<!-- sidenav end -->/
}
});
router.bind('everyfetchstart', function(page){
$root.css('opacity', 0.6);
window.scrollTo(0, 0);
});
router.bind('everyfetchsuccess', function(page){
$root.css('opacity', 1);
$newcontent = $(page.rip('content')).hide(); // rips main
$root.empty().append($newcontent);
$newcontent.fadeIn();
$sidenav.html(page.rip('sidenav')); // rips sidenav
page.trigger('pageready');
});
router.bind('everyfetchfail', function(){
alert('ajax error!');
$root.css('opacity', 1);
});
});
});
Multi-rip ripAll
This demo shows how ripAll works.
In this demo, you can see all incoming page's imgs are preloaded.
I used jQuery.ImgLoader to preload all imgs. With jQuery.ImgLoader, you can do something when all passed imgs' srcs were load completed. page.ripAll can rip all imgs' srcs with regexp like /src="([^"]+)"/gi.
$(function(){
new $.LazyJaxDavis(function(router){
var $root = $('#lazyjaxdavisroot');
var $loader = $('<div id="loader">Loading...</div>').appendTo('body');
router.option({
expr: {
imgsrc: /src="([^"]+)"/gi
}
});
router.bind('everyfetchstart', function(page){
$root.css('opacity', 0.6);
$loader.show();
window.scrollTo(0, 0);
});
router.bind('everyfetchsuccess', function(page){
var srcs = page.ripAll('imgsrc'); // ripAll returns results as an array
var complete = function(){
$loader.hide();
$root.css('opacity', 1);
$newcontent = $(page.rip('content')).hide();
$root.empty().append($newcontent);
$newcontent.fadeIn();
page.trigger('pageready');
}
if(!srcs.length){
// if no imgs found, just complete pagefetch.
complete();
}else{
// if imgs were there, do imgs' preloading.
var loader = $.ImgLoader({
srcs: srcs,
pipesize: 5,
delay: 0
});
loader.load().done(complete);
}
});
router.bind('everyfetchfail', function(){
alert('ajax error!');
$root.css('opacity', 1);
});
});
});
Custom loading
This demo shows how to implement custom loading widget.
In this demo, I used jQuery.ui.domwindow (coded by me) for the loading overlay.
$(function(){
new $.LazyJaxDavis(function(router){
var $overlay = $.ui.hideoverlay.setup({
spinnersrc: '/jQuery.LazyJaxDavis/demos/customloading/common/img/spinner.gif'
});
var $root = $('#lazyjaxdavisroot');
router.option({
minwaittime: 800
});
router.bind('everyfetchstart', function(page){
window.scrollTo(0, 0);
$overlay.hideoverlay('show');
});
router.bind('everyfetchsuccess', function(page){
$overlay
.one('hideoverlay.hideend', function(){
$root.empty().append(page.rip('content'));
page.trigger('pageready');
})
.hideoverlay('hide');
});
router.bind('everyfetchfail', function(){
alert('ajax error!');
});
});
});
URL routing
This demo shows how URL routing works.
In this demo, I prepared logger on the left top of the screen. You can see that each URL routing events are fired. You can also check that path regexp patterns are also applied. the links "bar~" are defined as regexp /bar[0-9]+\.html/ in the code below.
And, I commented out one routing here. If you comment out this, you'll see an error there. The reason why this reports error is that this routing conflicts with the last routing. You can't make conflicted routings here.
$(function(){
// logger
var Logger = ...
var logger = new Logger;
var log = function(msg) { logger.log(msg); };
var loglight = function(msg) { logger.loglight(msg); };
new $.LazyJaxDavis(function(router){
var $root = $('#lazyjaxdavisroot');
router.bind('everyfetchstart', function(page){
$root.css('opacity', 0.6);
window.scrollTo(0, 0);
log('everyfetchstart');
});
router.bind('everyfetchsuccess', function(page){
log('everyfetchsuccess');
$root.css('opacity', 1);
$newcontent = $(page.rip('content')).hide();
$root.empty().append($newcontent);
$newcontent.fadeIn();
page.trigger('pageready');
});
router.bind('everypageready', function(){
log('everypageready');
});
router.bind('everyfetchfail', function(){
log('everyfetchfail');
$root.css('opacity', 1);
});
router.route([
{
path: '/jQuery.LazyJaxDavis/demos/pagespecificevents/',
fetchstart: function(){
loglight('fetchstart: /jQuery.LazyJaxDavis/demos/pagespecificevents/');
},
fetchsuccess: function(){
loglight('fetchsuccess: /jQuery.LazyJaxDavis/demos/pagespecificevents/');
},
pageready: function(){
loglight('pageready: /jQuery.LazyJaxDavis/demos/pagespecificevents/');
}
},
{
path: '/jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo1.html',
fetchstart: function(){
loglight('fetchstart: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo1.html');
},
fetchsuccess: function(){
loglight('fetchsuccess: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo1.html');
},
pageready: function(){
loglight('pageready: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo1.html');
}
},
{
path: '/jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo2.html',
fetchstart: function(){
loglight('fetchstart: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo2.html');
},
fetchsuccess: function(){
loglight('fetchsuccess: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo2.html');
},
pageready: function(){
loglight('pageready: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo2.html');
}
},
{
path: '/jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo3.html',
fetchstart: function(){
loglight('fetchstart: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo3.html');
},
fetchsuccess: function(){
loglight('fetchsuccess: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo3.html');
},
pageready: function(){
loglight('pageready: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/foo3.html');
}
},
// this routing makes error because this conflicts with the path regexp pattern of the item below
//{
// path: '/jQuery.LazyJaxDavis/demos/pagespecificevents/pages/bar1.html',
// fetchstart: function(){
// loglight('fetchstart: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/bar1.html');
// },
// fetchsuccess: function(){
// loglight('fetchsuccess: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/bar1.html');
// },
// pageready: function(){
// loglight('pageready: /jQuery.LazyJaxDavis/demos/pagespecificevents/pages/bar1.html');
// }
//},
{
path: /bar[0-9]+\.html/,
fetchstart: function(){
loglight('fetchstart: /bar[0-9]+\.html/');
},
fetchsuccess: function(){
loglight('fetchsuccess: /bar[0-9]+\.html/');
},
pageready: function(){
loglight('pageready: /bar[0-9]+\.html/');
}
}
]);
});
});
Transparent Routing
This demo shows how transparent routing works.
In the demo of URL routing above, I wrote that conflicted routings are not allowed. But, sometimes we have the case to want to do the things like it. For example, I want to do something if the URL was /products/*. But, I want to do something else when the URL /products/car.html. So, This can't be resolved with only normal URL routing.
In such case, use transparent routing feature. You can see routeTransparents(...) in the code below. This routing works like "transparent". What I mean here is that the primary events in transparent routing are all ignored. Only pageready event defined here will be fired. Transparent routing was made to apply something to the group of the pages.
$(function(){
// logger
var Logger ...
var logger = new Logger;
var log = function(msg) { logger.log(msg); };
var loglight = function(msg) { logger.loglight(msg); };
var logblue = function(msg) { logger.logblue(msg); };
new $.LazyJaxDavis(function(router){
var $root = $('#lazyjaxdavisroot');
router.bind('everyfetchstart', function(page){
$root.css('opacity', 0.6);
window.scrollTo(0, 0);
log('everyfetchstart');
});
router.bind('everyfetchsuccess', function(page){
log('everyfetchsuccess');
$root.css('opacity', 1);
$newcontent = $(page.rip('content')).hide();
$root.empty().append($newcontent);
$newcontent.fadeIn();
page.trigger('pageready');
});
router.bind('everypageready', function(){
log('everypageready');
});
router.bind('everyfetchfail', function(){
log('everyfetchfail');
$root.css('opacity', 1);
});
router.route([
{
path: '/jQuery.LazyJaxDavis/demos/transparents/',
fetchstart: function(){
loglight('fetchstart: /jQuery.LazyJaxDavis/demos/transparents/');
},
fetchsuccess: function(){
loglight('fetchsuccess: /jQuery.LazyJaxDavis/demos/transparents/');
},
pageready: function(){
loglight('pageready: /jQuery.LazyJaxDavis/demos/transparents/');
}
},
{
path: /\/2010\//,
fetchstart: function(){
loglight('fetchstart: /\\/2010\\//');
},
fetchsuccess: function(){
loglight('fetchsuccess: /\\/2010\\//');
},
pageready: function(){
loglight('pageready: /\\/2010\\//');
}
},
{
path: /\/2011\//,
fetchstart: function(){
loglight('fetchstart: /\\/2011\\//');
},
fetchsuccess: function(){
loglight('fetchsuccess: /\\/2011\\//');
},
pageready: function(){
loglight('pageready: /\\/2011\\//');
}
},
{
path: /\/2012\//,
fetchstart: function(){
loglight('fetchstart: /\\/2012\\//');
},
fetchsuccess: function(){
loglight('fetchsuccess: /\\/2012\\//');
},
pageready: function(){
loglight('pageready: /\\/2012\\//');
}
}
]);
router.routeTransparents([
{
path: /\/pages\//,
pageready: function(){
logblue('transparent routing - pageready: /\\/pages\\//');
}
}
]);
});
});
Nodavis
This demo shows jQuery.LazyJaxDavis without Davis.js.
This demo doesn't depend on Davis.js. Just not loaded it.
JQuery.LazyJaxDavis works with Davis.js. But, if you don't want to use the ajax-pagefetching feature, you can choose not to use Davis.js. The case I supposed here is - that you just want to use only URL routing feature. In this demo, you can see that the ajax features are turned off. But, URL routings and transparent URL routings are still available. This is efficient when you want to manage what JavaScript code to be called by URL. That is to say, jQuery.LazyJaxDavis is just a URL router here.
If you use jQuery.LazyJaxDavis without Davis.js, you can't set all events related with ajax. Put simply, you can use only pageready event here. If you use this without Davis.js, don't forget to set davis: false as an option.
$(function(){
// logger
var Logger = ...
var logger = new Logger;
var log = function(msg) { logger.log(msg); };
var logblue = function(msg) { logger.logblue(msg); };
new $.LazyJaxDavis(function(router){
var $root = $('#lazyjaxdavisroot');
router.option({
davis: false
});
router.bind('everypageready', function(){
log('everypageready');
});
router.route([
{
path: '/jQuery.LazyJaxDavis/demos/nodavis/',
pageready: function(){
loglight('pageready: /jQuery.LazyJaxDavis/demos/nodavis/');
}
},
{
path: /\/2010\//,
pageready: function(){
loglight('pageready: /\\/2010\\//');
}
},
{
path: /\/2011\//,
pageready: function(){
loglight('pageready: /\\/2011\\//');
}
},
{
path: /\/2012\//,
pageready: function(){
loglight('pageready: /\\/2012\\//');
}
}
]);
router.routeTransparents([
{
path: /\/pages\//,
pageready: function(){
logblue('transparent routing - pageready: /\\/pages\\//');
}
}
]);
});
});
Davis routing
This demo shows how Davis routing works.
Even if you use jQuery.LazyJaxDavis, you may want to use Davis.js's feature directly. Then, just do router.routeDavis(...) in the initialization function. The passed function will be called as the context of Davis. So you can do the things for Davis.js here. But, keep in mind that the conflicted URLs cannnot be routed with Davis.js here if you defined those with route.route(...).
You can check that Davis.js works when you clicked "bar~" links in this demo, though it just show logs. And, Take care that Davis.js's features are available only fo the browsers which supports HTML5 history API.
$(function(){
// logger
var Logger = ...
var logger = new Logger;
var log = function(msg) { logger.log(msg); };
var loglight = function(msg) { logger.loglight(msg); };
new $.LazyJaxDavis(function(router){
var $root = $('#lazyjaxdavisroot');
router.bind('everyfetchstart', function(page){
$root.css('opacity', 0.6);
window.scrollTo(0, 0);
log('everyfetchstart');
});
router.bind('everyfetchsuccess', function(page){
log('everyfetchsuccess');
$root.css('opacity', 1);
$newcontent = $(page.rip('content')).hide();
$root.empty().append($newcontent);
$newcontent.fadeIn();
page.trigger('pageready');
});
router.bind('everypageready', function(){
log('everypageready');
});
router.bind('everyfetchfail', function(){
log('everyfetchfail');
$root.css('opacity', 1);
});
router.routeDavis(function(){
this.get('/jQuery.LazyJaxDavis/demos/davisrouting/pages/bar1.html', function(req){
loglight('davis routing: ' + req.path);
});
this.get('/jQuery.LazyJaxDavis/demos/davisrouting/pages/bar2.html', function(req){
loglight('davis routing: ' + req.path);
});
this.get('/jQuery.LazyJaxDavis/demos/davisrouting/pages/bar3.html', function(req){
loglight('davis routing: ' + req.path);
});
});
});
});
Customize anchorhandler with smooth scrolling
Anchorhandler customize with smooth scrolling.
In this demo, I used custom anchorhandler with jQuery.tinyscroller. This is a bit tricky one. Use this if you can understand what the code below means.
$.tinyscroller.live(); // lively bind events about scroller
$(function(){
new $.LazyJaxDavis(function(router){
var $root = $('#lazyjaxdavisroot');
var scrollDefer = null;
router.option({
expr: {
sidenav: /<!-- sidenav start -->([\s\S]*)<!-- sidenav end -->/
},
anchorhandler: function(hash){
$.tinyscroller.scrollTo(hash); // invoke scrolling
}
});
router.bind('everyfetchstart', function(page){
$root.css('opacity', 0.6);
scrollDefer = $.tinyscroller.scrollTo(0); // first, back to top
});
router.bind('everyfetchsuccess', function(page){
$root.css('opacity', 1);
$('#sidenav').empty().append(page.rip('sidenav'));
$.when(scrollDefer).done(function(){
$newcontent = $(page.rip('content')).hide();
$root.empty().append($newcontent);
$.when($newcontent.fadeIn()).done(function(){
// tell the router it's ready
// when scrolling and fadeIn are both done.
page.trigger('pageready');
scrollDefer = null;
});
});
});
router.bind('everyfetchfail', function(){
alert('ajax error!');
$root.css('opacity', 1);
});
});
});
