mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-31 13:10:23 +00:00
Merge branch 'master' of github.com:jquery/jquery-mobile
This commit is contained in:
scottjehl
commit
ffd864dc70
2 changed files with 159 additions and 154 deletions
|
|
@ -30,16 +30,17 @@ $.fn.listview = function( options ) {
|
|||
|
||||
//if it's a nested list, chunk it into ui-page items, recurse through them and call listview on each individual ul
|
||||
$( $this.find( "ul" ).get().reverse() ).each(function( i ) {
|
||||
var parent = $( this ).parent(),
|
||||
var list = $( this ),
|
||||
parent = list.parent(),
|
||||
title = parent.contents()[ 0 ].nodeValue,
|
||||
theme = $( this ).attr( "[data-theme]" ) !== undefined ?
|
||||
$( this ).attr( "data-theme" ) :
|
||||
theme = list.attr( "[data-theme]" ) !== undefined ?
|
||||
list.attr( "data-theme" ) :
|
||||
o.theme,
|
||||
countTheme = $( this ).attr( "[data-count-theme]" ) !== undefined ?
|
||||
$( this ).attr( "data-count-theme" ) :
|
||||
countTheme = list.attr( "[data-count-theme]" ) !== undefined ?
|
||||
list.attr( "data-count-theme" ) :
|
||||
o.countTheme;
|
||||
|
||||
$( this ).wrap( "<div class='ui-page'><div class='ui-content'></div></div>" )
|
||||
list.wrap( "<div class='ui-page'><div class='ui-content'></div></div>" )
|
||||
.parent()
|
||||
.before( "<div class='ui-header ui-bar-" + o.headerTheme + "'><h1>" +
|
||||
title + "</h1><a href='#' class='ui-back' data-icon='arrow-l'>Back</a></div>" )
|
||||
|
|
|
|||
|
|
@ -20,24 +20,167 @@
|
|||
startPage,
|
||||
startPageId = 'ui-page-start',
|
||||
activePageClass = 'ui-page-active',
|
||||
pageTransition,
|
||||
transitions = 'slide slideup slidedown pop flip fade dissolve swap',
|
||||
transitionSpecified = false,
|
||||
currentTransition = 'slide',
|
||||
transitionDuration = 350,
|
||||
backBtnText = "Back",
|
||||
urlStack = [location.hash.replace(/^#/,'')],
|
||||
urlStack = [ {
|
||||
url: location.hash.replace( /^#/, "" ),
|
||||
transition: "slide"
|
||||
} ],
|
||||
nextPageRole = null,
|
||||
noCache = '.ui-dialog';
|
||||
|
||||
//hide Address bar
|
||||
function hideBrowserChrome(){
|
||||
|
||||
|
||||
|
||||
|
||||
// hide address bar
|
||||
function hideBrowserChrome() {
|
||||
// prevent scrollstart and scrollstop events
|
||||
$.event.special.scrollstart.enabled = false;
|
||||
window.scrollTo(0,0);
|
||||
setTimeout(function(){
|
||||
window.scrollTo( 0, 0 );
|
||||
setTimeout(function() {
|
||||
$.event.special.scrollstart.enabled = true;
|
||||
}, 150);
|
||||
}, 150 );
|
||||
}
|
||||
|
||||
// send a link through hash tracking
|
||||
$.fn.ajaxClick = function() {
|
||||
var href = $( this ).attr( "href" );
|
||||
pageTransition = $( this ).attr( "data-transition" ) || "slide";
|
||||
nextPageRole = $( this ).attr( "data-rel" );
|
||||
|
||||
// let the hashchange event handler take care of everything else
|
||||
location.hash = href;
|
||||
pageTransition = undefined;
|
||||
|
||||
// note: if it's a non-local-anchor and Ajax is not supported, go to page
|
||||
if ( href.match( /^[^#]/ ) && !$.support.ajax ) {
|
||||
window.location = href;
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
// ajaxify all navigable links
|
||||
$( "a:not([href=#]):not([target=_blank]):not([rel=external])" ).live( "click", function() {
|
||||
$( this ).ajaxClick();
|
||||
return false;
|
||||
});
|
||||
|
||||
// turn on/off page loading message.. also hides the ui-content div
|
||||
function pageLoading( done ) {
|
||||
if ( done ) {
|
||||
$html.removeClass( "ui-loading" );
|
||||
//fade in page content, remove loading msg
|
||||
//$('.ui-page-active .ui-content')//.addClass('dissolve in');
|
||||
} else {
|
||||
$html.addClass( "ui-loading" );
|
||||
$loader.appendTo( $body ).addClass( "dissolve in" );
|
||||
}
|
||||
};
|
||||
|
||||
// transition between pages - based on transitions from jQtouch
|
||||
function changePage( from, to, transition, back ) {
|
||||
hideBrowserChrome();
|
||||
|
||||
// kill keyboard (thx jQtouch :) )
|
||||
$( document.activeElement ).blur();
|
||||
|
||||
// animate in / out
|
||||
from.addClass( transition + " out " + ( back ? "reverse" : "" ) );
|
||||
to.appendTo($body).addClass( activePageClass + " " + transition +
|
||||
" in " + ( back ? "reverse" : "" ) );
|
||||
|
||||
// callback - remove classes, etc
|
||||
to.animationComplete(function() {
|
||||
from.add( to ).removeClass(" out in reverse " + transitions );
|
||||
from.removeClass( activePageClass );
|
||||
pageLoading( true );
|
||||
$.fixedToolbars.show();
|
||||
});
|
||||
};
|
||||
|
||||
$(function() {
|
||||
$body = $( "body" );
|
||||
pageLoading();
|
||||
|
||||
// needs to be bound at domready (for IE6)
|
||||
// find or load content, make it active
|
||||
$window.bind( "hashchange", function(e) {
|
||||
var url = location.hash.replace( /^#/, "" ),
|
||||
stackLength = urlStack.length,
|
||||
// pageTransition only exists if the user clicked a link
|
||||
back = !pageTransition && stackLength > 1 &&
|
||||
urlStack[ stackLength - 2 ].url === url,
|
||||
transition = pageTransition || "slide";
|
||||
|
||||
// if the new href is the same as the previous one
|
||||
if ( back ) {
|
||||
transition = urlStack.pop().transition;
|
||||
} else {
|
||||
urlStack.push({ url: url, transition: transition });
|
||||
}
|
||||
|
||||
//remove any pages that shouldn't cache
|
||||
$(noCache).remove();
|
||||
|
||||
//function for setting role of next page
|
||||
function setPageRole( newPage ) {
|
||||
if ( nextPageRole ) {
|
||||
newPage.attr( "data-role", nextPageRole );
|
||||
nextPageRole = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
if ( url ) {
|
||||
// see if content is present already
|
||||
var localDiv = $( "[id='" + url + "']" );
|
||||
if ( localDiv.length ) {
|
||||
if ( localDiv.is( "[data-role]" ) ) {
|
||||
setPageRole( localDiv );
|
||||
}
|
||||
changePage( $( ".ui-page-active" ), localDiv, transition, back );
|
||||
} else { //ajax it in
|
||||
pageLoading();
|
||||
var newPage = $( "<div>" )
|
||||
.appendTo( $body )
|
||||
.load( url + " .ui-page", function() {
|
||||
// TODO: test this (avoids querying the dom for new element):
|
||||
// var newPage = $( this ).find( ".ui-page" ).eq( 0 )
|
||||
// .attr( "id", url );
|
||||
// $( this ).replaceWith( newPage );
|
||||
// setPageRole( newPage );
|
||||
// mobilize( newPage );
|
||||
// changePage( $( ".ui-page-active" ), newPage, transition, back );
|
||||
$( this ).replaceWith(
|
||||
$( this ).find( ".ui-page" ).eq( 0 ).attr( "id", url ) );
|
||||
var newPage = $( "[id='" + url + "']" );
|
||||
setPageRole( newPage );
|
||||
mobilize( newPage );
|
||||
changePage( $( ".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 = $( ".ui-page-active" );
|
||||
if ( currentPage.length && !startPage.is( ".ui-page-active" ) ) {
|
||||
changePage( currentPage, startPage, transition, back );
|
||||
} else {
|
||||
$.fixedToolbars.show();
|
||||
startPage.addClass( activePageClass );
|
||||
pageLoading( true );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
hideBrowserChrome();
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//add orientation class on flip/resize.
|
||||
|
|
@ -51,77 +194,6 @@
|
|||
//insert mobile meta (any other metas needed? webapp? iPhone icon? etc)
|
||||
$head.append('<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />');
|
||||
|
||||
//send a link through hash tracking
|
||||
$.fn.ajaxClick = function(){
|
||||
var href = $(this).attr( "href" ),
|
||||
transitionAttr = $(this).attr('data-transition');
|
||||
|
||||
nextPageRole = $(this).attr('data-rel');
|
||||
|
||||
if(transitionAttr){
|
||||
currentTransition = transitionAttr;
|
||||
transitionSpecified = true;
|
||||
}
|
||||
else{
|
||||
transitionSpecified = false;
|
||||
}
|
||||
|
||||
location.hash = href;
|
||||
|
||||
//note: if it's a non-local-anchor and Ajax is not supported, go to page
|
||||
if(href.match(/^[^#]/) && !$.support.ajax){
|
||||
window.location = href;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
//ajaxify all navigable links
|
||||
$('a:not([href="#"])').live('click',function(e){
|
||||
if ($(this).is('[target=_blank]') || $(this).is('[rel=external]')){ return true; }
|
||||
$(this).ajaxClick();
|
||||
return false;
|
||||
});
|
||||
|
||||
//turn on/off page loading message.. also hides the ui-content div
|
||||
function pageLoading(done){
|
||||
if(done){
|
||||
//remove loading msg
|
||||
$html.removeClass('ui-loading');
|
||||
//fade in page content, remove loading msg
|
||||
$('.ui-page-active .ui-content')//.addClass('dissolve in');
|
||||
}
|
||||
else{
|
||||
$html.addClass('ui-loading');
|
||||
$loader.appendTo($body).addClass('dissolve in');
|
||||
}
|
||||
};
|
||||
|
||||
//transition between pages - based on transitions from jQtouch
|
||||
function changePage(from,to,back){
|
||||
hideBrowserChrome();
|
||||
if(!back && !transitionSpecified){ currentTransition = 'slide'; }
|
||||
|
||||
//kill keyboard (thx jQtouch :) )
|
||||
$(document.activeElement).blur();
|
||||
|
||||
//animate in / out
|
||||
from.addClass(currentTransition + ' out ' + (back ? 'reverse':''));
|
||||
to.appendTo('body').addClass(activePageClass + ' ' + currentTransition + ' in ' + (back ? 'reverse':''));
|
||||
|
||||
//callback - remove classes, etc
|
||||
to.animationComplete(function(){
|
||||
from.add(to).removeClass(' out in reverse '+ transitions);
|
||||
from.removeClass(activePageClass);
|
||||
pageLoading(true);
|
||||
$.fixedToolbars.show();
|
||||
});
|
||||
if(back){
|
||||
currentTransition = 'slide';
|
||||
}
|
||||
};
|
||||
|
||||
//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)
|
||||
|
|
@ -135,7 +207,7 @@
|
|||
};
|
||||
|
||||
|
||||
|
||||
|
||||
//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)
|
||||
|
|
@ -182,74 +254,6 @@
|
|||
|
||||
//dom-ready
|
||||
$(function(){
|
||||
//set the page loader up
|
||||
pageLoading();
|
||||
|
||||
//define body
|
||||
$body = $('body');
|
||||
|
||||
//hashchange for page state tracking - needs to be bound at domready (for IE6)
|
||||
//When document.location.hash changes, find or load content, make it active
|
||||
$window.bind( "hashchange", function(e){
|
||||
var url = location.hash.replace(/^#/,''),
|
||||
back = (url === urlStack[urlStack.length-2]);
|
||||
|
||||
//if the new href is the same as the previous one
|
||||
if(back){
|
||||
urlStack.pop();
|
||||
}
|
||||
else {
|
||||
urlStack.push(url);
|
||||
}
|
||||
|
||||
//remove any pages that shouldn't cache
|
||||
$(noCache).remove();
|
||||
|
||||
//function for setting role of next page
|
||||
function setPageRole(newPage){
|
||||
if(nextPageRole){
|
||||
newPage.attr('data-role', nextPageRole);
|
||||
nextPageRole = null;
|
||||
}
|
||||
}
|
||||
|
||||
if(url){
|
||||
//see if content is present already
|
||||
var localDiv = $('[id="'+url+'"]');
|
||||
if(localDiv.length){
|
||||
if(localDiv.is('[data-role]')){ setPageRole(localDiv); }
|
||||
changePage($('.ui-page-active'), localDiv, back);
|
||||
}
|
||||
else { //ajax it in
|
||||
pageLoading();
|
||||
var newPage = $('<div/>')
|
||||
.appendTo($body)
|
||||
.load(url + ' .ui-page',function(){
|
||||
$(this).replaceWith( $(this).find('.ui-page:eq(0)').attr('id', url) );
|
||||
var newPage = $('[id="'+url+'"]');
|
||||
setPageRole(newPage);
|
||||
mobilize(newPage);
|
||||
changePage($('.ui-page-active'), newPage, 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 = $('.ui-page-active');
|
||||
if( currentPage.length && !startPage.is('.ui-page-active')){
|
||||
changePage(currentPage, startPage, back);
|
||||
}
|
||||
else{
|
||||
$.fixedToolbars.show();
|
||||
startPage.addClass(activePageClass);
|
||||
pageLoading(true);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
hideBrowserChrome();
|
||||
|
||||
//global nav
|
||||
$('.ui-globalnav').globalnav();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue