- 
+
+
This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively — a common scenario for photo, image or video viewers.
diff --git a/js/index.php b/js/index.php index bdfb6da7..93f1014c 100644 --- a/js/index.php +++ b/js/index.php @@ -33,6 +33,7 @@ $elements = array( 'jquery.mobile.controlGroup.js', 'jquery.mobile.links.js', 'jquery.mobile.fixHeaderFooter.js', + 'jquery.mobile.fixHeaderFooter.native.js', 'jquery.mobile.media.classes.js', 'jquery.mobile.init.js' ); diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index 5763ea12..eb1ee9bc 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -10,7 +10,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { options: { expandCueText: " click to expand contents", collapseCueText: " click to collapse contents", - collapsed: false, + collapsed: true, heading: ">:header,>legend", theme: null, iconTheme: "d", diff --git a/js/jquery.mobile.fixHeaderFooter.js b/js/jquery.mobile.fixHeaderFooter.js index e275923a..b38209ac 100644 --- a/js/jquery.mobile.fixHeaderFooter.js +++ b/js/jquery.mobile.fixHeaderFooter.js @@ -37,7 +37,7 @@ $.fn.fixHeaderFooter = function( options ) { // single controller for all showing,hiding,toggling $.mobile.fixedToolbars = (function() { - if ( !$.support.scrollTop ) { + if ( !$.support.scrollTop || $.support.touchOverflow ) { return; } @@ -361,7 +361,7 @@ $( document ).bind( "pagecreate create", function( event ) { $( event.target ).each(function() { - if ( !$.support.scrollTop ) { + if ( !$.support.scrollTop || $.support.touchOverflow ) { return this; } diff --git a/js/jquery.mobile.fixHeaderFooter.native.js b/js/jquery.mobile.fixHeaderFooter.native.js new file mode 100644 index 00000000..382a7bcf --- /dev/null +++ b/js/jquery.mobile.fixHeaderFooter.native.js @@ -0,0 +1,59 @@ +/* +* jQuery Mobile Framework : "fixHeaderFooter" native plugin - Behavior for "fixed" headers,footers, and scrolling inner content +* Copyright (c) jQuery Project +* Dual licensed under the MIT or GPL Version 2 licenses. +* http://jquery.org/license +*/ + +(function( $, undefined ) { + +$.mobile.touchOverflowEnabled = false; + +$( document ).bind( "pagecreate", function( event ) { + if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){ + + var $target = $( event.target ), + scrollStartY = 0; + + if( $target.is( ":jqmData(role='page')" ) ){ + + $target.each(function() { + var $page = $( this ), + $fixies = $page.find( ":jqmData(role='header'), :jqmData(role='footer')" ).filter( ":jqmData(position='fixed')" ), + fullScreen = $page.jqmData( "fullscreen" ), + $scrollElem = $fixies.length ? $page.find( ".ui-content" ) : $page; + + $page.addClass( "ui-mobile-touch-overflow" ); + + $scrollElem.bind( "scrollstop", function(){ + if( $scrollElem.scrollTop() > 0 ){ + window.scrollTo( 0, $.mobile.defaultHomeScroll ); + } + }); + + if( $fixies.length ){ + + $page.addClass( "ui-native-fixed" ); + + if( fullScreen ){ + + $page.addClass( "ui-native-fullscreen" ); + + $fixies.addClass( "fade in" ); + + $( document ).bind( "vclick", function(){ + $fixies + .removeClass( "ui-native-bars-hidden" ) + .toggleClass( "in out" ) + .animationComplete(function(){ + $(this).not( ".in" ).addClass( "ui-native-bars-hidden" ); + }); + }); + } + } + }); + } + } +}); + +})( jQuery ); diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index cf20a35c..2b9e029a 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -409,11 +409,18 @@ lastScrollEnabled = false; - var active = $.mobile.urlHistory.getActive(); + var active = $.mobile.urlHistory.getActive(), + activePage = $( ".ui-page-active" ), + scrollElem = $( window ), + touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled; + + if( touchOverflow ){ + scrollElem = activePage.is( ".ui-native-fixed" ) ? activePage.find( ".ui-content" ) : activePage; + } if( active ){ - var lastScroll = $( window ).scrollTop(); - + var lastScroll = scrollElem.scrollTop(); + // Set active page's lastScroll prop. // If the Y location we're scrolling to is less than minScrollBack, let it go. active.lastScroll = lastScroll < $.mobile.minScrollBack ? $.mobile.defaultHomeScroll : lastScroll; @@ -425,28 +432,60 @@ // using beforechangepage or popstate/hashchange (whichever comes first) $( document ).bind( "beforechangepage", getLastScroll ); $( window ).bind( $.support.pushState ? "popstate" : "hashchange", getLastScroll ); + + // Make the iOS clock quick-scroll work again if we're using native overflow scrolling + /* + if( $.support.touchOverflow ){ + if( $.mobile.touchOverflowEnabled ){ + $( window ).bind( "scrollstop", function(){ + if( $( this ).scrollTop() === 0 ){ + $.mobile.activePage.scrollTop( 0 ); + } + }); + } + } + */ //function for transitioning between two existing pages function transitionPages( toPage, fromPage, transition, reverse ) { //get current scroll distance var active = $.mobile.urlHistory.getActive(), - toScroll = active.lastScroll || $.mobile.defaultHomeScroll, + touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, + toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), screenHeight = getScreenHeight(); - - // Scroll to top + + // Scroll to top, hide addr bar window.scrollTo( 0, $.mobile.defaultHomeScroll ); if( fromPage ) { //trigger before show/hide events fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } ); } - toPage - .height( screenHeight + toScroll ) - .data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } ); + + if( !touchOverflow){ + toPage.height( screenHeight + toScroll ); + } + + toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } ); //clear page loader $.mobile.hidePageLoadingMsg(); + + if( touchOverflow && toScroll ){ + + toPage.addClass( "ui-mobile-pre-transition" ); + // Send focus to page as it is now display: block + reFocus( toPage ); + + //set page's scrollTop to remembered distance + if( toPage.is( ".ui-native-fixed" ) ){ + toPage.find( ".ui-content" ).scrollTop( toScroll ); + } + else{ + toPage.scrollTop( toScroll ); + } + } //find the transition handler for the specified transition. If there //isn't one in our transitionHandlers dictionary, use the default one. @@ -455,18 +494,25 @@ promise = th( transition, reverse, toPage, fromPage ); promise.done(function() { - //reset toPage height bac - toPage.height( "" ); - - // Send focus to the newly shown page - reFocus( toPage ); + //reset toPage height back + if( !touchOverflow ){ + toPage.height( "" ); + // Send focus to the newly shown page + reFocus( toPage ); + } // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. - $.mobile.silentScroll( toScroll ); + if( !touchOverflow ){ + $.mobile.silentScroll( toScroll ); + } //trigger show/hide events if( fromPage ) { - fromPage.height("").data( "page" )._trigger( "hide", null, { nextPage: toPage } ); + if( !touchOverflow ){ + fromPage.height( "" ); + } + + fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } ); } //trigger pageshow, define prevPage as either fromPage or empty jQuery obj diff --git a/js/jquery.mobile.navigation.pushstate.js b/js/jquery.mobile.navigation.pushstate.js index 06bd748a..03f3c1ff 100644 --- a/js/jquery.mobile.navigation.pushstate.js +++ b/js/jquery.mobile.navigation.pushstate.js @@ -91,7 +91,7 @@ // change the page based on the hash $.mobile._handleHashChange( poppedState.hash ); - }); + }, 100); } }, diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js index 2b503f89..7b78dbcc 100644 --- a/js/jquery.mobile.support.js +++ b/js/jquery.mobile.support.js @@ -70,6 +70,7 @@ $.extend( $.support, { pushState: "pushState" in history && "replaceState" in history, mediaquery: $.mobile.media( "only all" ), cssPseudoElement: !!propExists( "content" ), + touchOverflow: !!propExists( "overflowScrolling" ), boxShadow: !!propExists( "boxShadow" ) && !bb, scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos, dynamicBaseTag: baseTagTest(), @@ -117,4 +118,4 @@ if ( !$.support.boxShadow ) { $( "html" ).addClass( "ui-mobile-nosupport-boxshadow" ); } -})( jQuery ); +})( jQuery ); \ No newline at end of file diff --git a/tests/jquery.testHelper.js b/tests/jquery.testHelper.js index 684db5e9..e4978bdc 100644 --- a/tests/jquery.testHelper.js +++ b/tests/jquery.testHelper.js @@ -118,7 +118,7 @@ }, decorate: function(opts){ - var thisVal = opts.this || window; + var thisVal = opts.self || window; return function(){ var returnVal; @@ -141,4 +141,4 @@ } } }; -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/themes/default/jquery.mobile.core.css b/themes/default/jquery.mobile.core.css index 5d3360b2..7c9d9289 100644 --- a/themes/default/jquery.mobile.core.css +++ b/themes/default/jquery.mobile.core.css @@ -22,6 +22,21 @@ .landscape, .landscape .ui-page { min-height: 300px; } +/* native overflow scrolling */ +.ui-page.ui-mobile-touch-overflow, +.ui-mobile-touch-overflow.ui-native-fixed .ui-content { + overflow: auto; + height: 100%; + -webkit-overflow-scrolling: touch; + -moz-overflow-scrolling: touch; + -o-overflow-scrolling: touch; + -ms-overflow-scrolling: touch; + overflow-scrolling: touch; +} +.ui-page.ui-mobile-pre-transition { + display: block; +} + /* loading screen */ .ui-loading .ui-mobile-viewport { overflow: hidden !important; } .ui-loading .ui-loader { display: block; } @@ -48,6 +63,43 @@ .ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; } .ui-page-fullscreen .ui-content { padding:0; } +/* native fixed headers and footers */ +.ui-mobile-touch-overflow.ui-page.ui-native-fixed, +.ui-mobile-touch-overflow.ui-page.ui-native-fullscreen { + overflow: visible; +} +.ui-mobile-touch-overflow.ui-native-fixed .ui-header, +.ui-mobile-touch-overflow.ui-native-fixed .ui-footer { + position: fixed; + left: 0; + right: 0; + top: 0; + z-index: 200; +} +.ui-mobile-touch-overflow.ui-page.ui-native-fixed .ui-footer { + top: auto; + bottom: 0; +} +.ui-mobile-touch-overflow.ui-native-fixed .ui-content { + padding-top: 2.5em; + padding-bottom: 3em; + top: 0; + bottom: 0; + height: auto; + position: absolute; +} +.ui-mobile-touch-overflow.ui-native-fullscreen .ui-content { + padding-top: 0; + padding-bottom: 0; +} +.ui-mobile-touch-overflow.ui-native-fullscreen .ui-header, +.ui-mobile-touch-overflow.ui-native-fullscreen .ui-footer { + opacity: .9; +} +.ui-native-bars-hidden { + display: none; +} + /* icons sizing */ .ui-icon { width: 18px; height: 18px; }