I rarely see this kind of navigating on the web. But basically I load all the content in the background and then flip pages as needed while loading user specific data via ajax.
Are there any problems with this and in general?
/***********************************************************************************************************************
*Page - flips pages in the app and also updates the Menu
*/
var Page = $A.Class.create('public', {
Name: 'Page',
E: {
// body elements
body_splash: '#body_splash',
body_fave: '#body_fave',
body_feed: '#body_feed',
body_settings: '#body_settings',
body_fave_custom: '#body_fave_custom',
// menu elements
nav_splash: '#nav_splash',
nav_fave: '#nav_fave',
nav_feed: '#nav_feed',
nav_settings: '#nav_settings',
nav_fave_custom: '#nav_fave_custom'
},
P: {
page_previous: null,
input_previous: 'splash'
},
// don't flip the page to fast or the inputs won't reset
flip: function (input) {
var self = this;
input = input || 'splash';
Backbone.trigger(input + '_flipped');
Backbone.trigger(self.P.input_previous + '_flipped_from');
// give page time to reset before flipping
setTimeout(function() {
self.flipTimed(input)
}, 100);
},
flipTimed : function (input) {
var page_current,
nav_current;
page_current = this.E['body_' + input];
nav_current = this.E['nav_' + input];
// check the timing on this
Storage.set('page', input);
// turn off previous page
if (this.P.page_previous !== null && this.P.page_previous !== page_current) {
this.P.page_previous.style.opacity = 0;
this.P.page_previous.style.display = "none";
}
// turn on current page
if (this.P.page_previous !== page_current) {
$A.animate(page_current);
page_current.style.display = "inline-block";
}
// update menu
Menu.toggleMarker(nav_current);
// update previous
this.P.page_previous = page_current;
this.P.input_previous = input;
}
});