" )
.appendTo( $body )
.load( fileUrl + ' [data-role="page"]', function() {
// TODO: test this (avoids querying the dom for new element):
// var newPage = jQuery( this ).find( ".ui-page" ).eq( 0 )
// .attr( "id", url );
// jQuery( this ).replaceWith( newPage );
// setPageRole( newPage );
// mobilize( newPage );
// changePage( jQuery( ".ui-page-active" ), newPage, transition, back );
jQuery( this ).replaceWith(
jQuery( this ).find( '[data-role="page"]' ).eq( 0 ).attr( "id", fileUrl ) );
var newPage = jQuery( "[id='" + fileUrl + "']" );
setPageRole( newPage );
mobilize( newPage );
newPage = jQuery( "[id='" + url + "']" );
changePage( jQuery( ".ui-page-active" ), newPage, transition, back );
});
}
} else {
// either we've backed up to the root page url
// or it's the first page load with no hash present
var currentPage = jQuery( ".ui-page-active" );
if ( currentPage.length && !startPage.is( ".ui-page-active" ) ) {
changePage( currentPage, startPage, transition, back );
} else {
startPage.addClass( activePageClass );
manageGlobalNav(startPage);
jQuery.fixedToolbars.show();
pageLoading( true );
}
}
});
hideBrowserChrome();
});
//add orientation class on flip/resize.
$window.bind( "orientationchange", function( event, data ) {
$html.removeClass( "portrait landscape" ).addClass( data.orientation );
});
//add mobile, loading classes to doc
$html.addClass('ui-mobile');
//insert mobile meta (any other metas needed? webapp? iPhone icon? etc)
$head.append('
');
//potential (probably incomplete) fallback to workaround lack of animation callbacks.
//should this be extended into a full special event?
// note: Expects CSS animations use transitionDuration (350ms)
jQuery.fn.animationComplete = function(callback){
if(jQuery.support.WebKitAnimationEvent){
return jQuery(this).one('webkitAnimationEnd', callback); //check out transitionEnd (opera per Paul's request)
}
else{
setTimeout(callback, transitionDuration);
}
};
//markup-driven enhancements, to be called on any ui-page upon loading
function mobilize($el){
//to-do: make sure this only runs one time on a page (or maybe per component)
return $el.not('[data-mobilized]').each(function(){
//hide no-js content
$el.find('[data-role="nojs"]').addClass('ui-nojs');
//pre-find data els
var $dataEls = $el.find('[data-role]:not([data-role="nojs"])').andSelf();
//header,content,footer
$dataEls.filter('[data-role="page"]').addClass('ui-page');
$dataEls.filter('[data-role="header"]').addClass('ui-header');
$dataEls.filter('[data-role="content"]').addClass('ui-content');
$dataEls.filter('[data-role="footer"]').addClass('ui-footer');
//fix toolbars
$el.fixHeaderFooter();
//collapsible groupings
$dataEls.filter('[data-role="collapsible"]').collapsible();
//single-field separators
$dataEls.filter('[data-role="fieldcontain"]').fieldcontain();
//global nav
$dataEls.filter('[data-role="globalnav"]').globalnav();
//listview
$dataEls.filter('[data-role="listview"]').listview();
//dialog
$dataEls.filter('[data-role="dialog"]').dialog();
//ajaxform plugin
$dataEls.filter('[data-role="ajaxform"]').ajaxform();
//form elements
var checksradios = 'input[type=radio],input[type=checkbox]',
buttonInputs = 'button, input[type=submit], input[type=reset], input[type=image]',
textInputs = 'input[type=text],input[type=number],input[type=password],textarea',
selects = 'select';
$formEls = $el.find( [checksradios, buttonInputs, textInputs, selects].join(',') );
$formEls.filter(checksradios).customCheckboxRadio();
//custom buttons
$formEls.filter(buttonInputs).customButton();
//custom text inputs
$formEls.filter(textInputs).customTextInput();
//selects
$formEls.filter(selects).customSelect();
//vertical controlgroups
$dataEls.filter('[data-role="controlgroup"]:not([data-type="horizontal"])').controlgroup();
//horizontal controlgroups
$dataEls.filter('[data-role="controlgroup"][data-type="horizontal"]').controlgroup({direction: 'horizontal'});
//add back buttons to headers that don't have them
var backBtn = $el.find('.ui-header a.ui-back');
if(!backBtn.length){
backBtn = jQuery('
').appendTo($el.find('.ui-header'));
}
//buttons from links in headers,footers,bars, or with data-role
$dataEls.filter('[data-role="button"]').add('.ui-header a, .ui-footer a, .ui-bar a').not('.ui-btn').buttonMarkup();
//links within content areas
$el.find('.ui-body a:not(.ui-btn):not(.ui-link-inherit)').addClass('ui-link');
//make all back buttons mimic the back button (pre-js, these links are usually "home" links)
backBtn
.click(function(){
history.go(-1);
return false;
})
.find('.ui-btn-text').text(backBtnText);
$el.attr('data-mobilized',true);
});
};
jQuery.extend({
mobilize: mobilize,
pageLoading: pageLoading,
changePage: changePage,
hideBrowserChrome: hideBrowserChrome
});
//dom-ready
jQuery(function(){
//set up active page - mobilize it!
startPage = jQuery('[data-role="page"]:first');
//make sure it has an ID - for finding it later
if(!startPage.attr('id')){
startPage.attr('id', startPageId);
}
//mobilize all pages present
mobilize(jQuery('[data-role="page"]'));
//trigger a new hashchange, hash or not
$window.trigger( "hashchange" );
//update orientation
$html.addClass( jQuery.event.special.orientationchange.orientation( $window ) );
//some debug stuff for the events pages
jQuery('body').bind('scrollstart scrollstop swipe swipeleft swiperight tap taphold turn',function(e){
jQuery('#eventlogger').prepend('
Event fired: '+ e.type +'
');
});
});
})( jQuery, this );