mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-28 01:44:45 +00:00
Merge branch 'out-in-transition' of github.com:jquery/jquery-mobile into out-in-transition
This commit is contained in:
Mat Marquis
commit
6db136ff12
9 changed files with 82 additions and 84 deletions
|
|
@ -1,5 +1,7 @@
|
|||
.ui-dialog { width: 92.5%; max-width: 500px; margin: 10% auto 15px auto; padding: 0; }
|
||||
|
||||
.ui-dialog-page {
|
||||
background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
|
||||
}
|
||||
.ui-dialog .ui-header {
|
||||
margin-top: 15%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,11 @@
|
|||
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
|
||||
-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
|
||||
}
|
||||
.ui-dialog-page.flow {
|
||||
-moz-transform-origin: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
}
|
||||
.flow.out {
|
||||
-webkit-transform: translateX(-100%) scale(.7);
|
||||
-webkit-animation-name: flowouttoleft;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
define( [ "jquery.mobile" ], function() {
|
||||
$('div').live('pagecreate',function(event){
|
||||
if( !$(this).is('.ui-dialog')){
|
||||
if( !$(this).is('.ui-dialog-page')){
|
||||
var appendEl = $(this).find('.ui-footer:last');
|
||||
|
||||
if( !appendEl.length ){
|
||||
|
|
|
|||
|
|
@ -1,78 +0,0 @@
|
|||
<?php
|
||||
sleep(5);
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Testing the loader</title>
|
||||
<link rel="stylesheet" href="../../css/themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../js/jquery.js"></script>
|
||||
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-interior">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Testing the loader</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
|
||||
<div class="content-primary">
|
||||
|
||||
<h2>Loader tested - wheee!</h2>
|
||||
|
||||
<p> Content goes here, etc.Test the loader from a <a href="testingloader2.php">link instead</a>!</p>
|
||||
|
||||
<p><a href="testingloader2.php" data-role="button">Or a button</a></p>
|
||||
|
||||
|
||||
<p> Content goes here, etc.jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a> specification.</p>
|
||||
|
||||
<p> Content goes here, etc.jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a> specification.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content-secondary">
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
|
||||
|
||||
<h3>More in this section</h3>
|
||||
|
||||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
<li data-role="list-divider">Overview</li>
|
||||
<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
|
||||
<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>
|
||||
<li><a href="../../docs/about/features.html">Features</a></li>
|
||||
<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
|
||||
<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
|
||||
<li data-theme="a"><a href="../../docs/about/testingloader.php">Test the loader</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
|
||||
<div data-role="footer" class="footer-docs" data-theme="c">
|
||||
<p>© 2011 The jQuery Project</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</div><!-- /grid-a -->
|
||||
|
||||
|
||||
<p><strong>NOTE</strong>: To view all transition types, you must be on a browser that supports 3D transforms and be viewing on a screen width of 1,000 pixels or less. By default, devices that lack 3D support will fallback to "fade" for all transition types. Above 1,00 pixels, all transitions are set to "none". These behaviors are all configurable (see below).</p>
|
||||
<p><strong>NOTE</strong>: To view all transition types, you must be on a browser that supports 3D transforms and be viewing on a screen width of 1,000 pixels or less. By default, devices that lack 3D support will fallback to "fade" for all transition types. Above 1,000 pixels, all transitions are set to "none". These behaviors are all configurable (see below).</p>
|
||||
|
||||
<p><strong>Transitions were originally inspired by <a href="http://www.jqtouch.com/">jQtouch</a></strong> They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@
|
|||
<li><a href="docs/about/features.html">Features</a></li>
|
||||
<li><a href="docs/about/accessibility.html">Accessibility</a></li>
|
||||
<li><a href="docs/about/platforms.html">Supported platforms</a></li>
|
||||
<li><a href="docs/about/testingloader.php">Test this for loader</a></li>
|
||||
</ul>
|
||||
|
||||
</div><!--/content-primary-->
|
||||
|
|
|
|||
|
|
@ -60,8 +60,21 @@ $.widget( "mobile.dialog", $.mobile.widget, {
|
|||
.attr( "data-" + $.mobile.ns + "direction", "reverse" );
|
||||
}
|
||||
})
|
||||
.bind( "pagehide", function() {
|
||||
.bind( "pagehide", function( e, ui ) {
|
||||
$( this ).find( "." + $.mobile.activeBtnClass ).removeClass( $.mobile.activeBtnClass );
|
||||
|
||||
// if there's an overlay theme, we're going to remove it from the page container.
|
||||
// First though, check that the incoming page isn't a dialog with the same theme. If so, don't remove.
|
||||
if( self.options.overlayTheme ){
|
||||
if( !ui.nextPage || !ui.nextPage.is( ".ui-dialog-page.ui-overlay-" + self.options.overlayTheme ) ){
|
||||
$.mobile.pageContainer.removeClass( "ui-overlay-" + self.options.overlayTheme );
|
||||
}
|
||||
}
|
||||
})
|
||||
.bind( "pagebeforeshow", function(){
|
||||
if( self.options.overlayTheme ){
|
||||
$.mobile.pageContainer.addClass( "ui-body-" + self.options.overlayTheme );
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1231,6 +1231,11 @@ define( [
|
|||
$activeClickedLink = $( link ).closest( ".ui-btn" ).not( ".ui-disabled" );
|
||||
$activeClickedLink.addClass( $.mobile.activeBtnClass );
|
||||
$( "." + $.mobile.activePageClass + " .ui-btn" ).not( link ).blur();
|
||||
|
||||
// By caching the href value to data and switching the href to a #, we can avoid address bar showing in iOS. The click handler resets the href during its initial steps if this data is present
|
||||
$( link )
|
||||
.jqmData( "href", $( link ).attr( "href" ) )
|
||||
.attr( "href", "#" );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1254,6 +1259,11 @@ define( [
|
|||
httpCleanup = function(){
|
||||
window.setTimeout( function() { removeActiveLinkClass( true ); }, 200 );
|
||||
};
|
||||
|
||||
// If there's data cached for the real href value, set the link's href back to it again. This pairs with an address bar workaround from the vclick handler
|
||||
if( $link.jqmData( "href" ) ){
|
||||
$link.attr( "href", $link.jqmData( "href" ) );
|
||||
}
|
||||
|
||||
//if there's a data-rel=back attr, go back in history
|
||||
if( $link.is( ":jqmData(rel='back')" ) ) {
|
||||
|
|
@ -1329,7 +1339,7 @@ define( [
|
|||
|
||||
//this may need to be more specific as we use data-rel more
|
||||
role = $link.attr( "data-" + $.mobile.ns + "rel" ) || undefined;
|
||||
|
||||
|
||||
$.mobile.changePage( href, { transition: transition, reverse: reverse, role: role } );
|
||||
event.preventDefault();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
var perspective = "viewport-flip",
|
||||
transitioning = "ui-mobile-viewport-transitioning",
|
||||
animationCompleteFn = $.fn.animationComplete,
|
||||
defaultMaxTrans = $.mobile.maxTransitionWidth,
|
||||
|
||||
//TODO centralize class names?
|
||||
transitionTypes = "in out fade slide flip reverse pop",
|
||||
|
|
@ -18,6 +19,14 @@
|
|||
isTransitioningIn = function(page){
|
||||
return page.hasClass("in") && isTransitioning(page);
|
||||
},
|
||||
|
||||
disableMaxTransWidth = function(){
|
||||
$.mobile.maxTransitionWidth = false;
|
||||
},
|
||||
|
||||
enableMaxTransWidth = function(){
|
||||
$.mobile.maxTransitionWidth = defaultMaxTrans;
|
||||
},
|
||||
|
||||
//animationComplete callback queue
|
||||
fromQueue = [],
|
||||
|
|
@ -46,6 +55,9 @@
|
|||
|
||||
module('jquery.mobile.navigation.js', {
|
||||
setup: function(){
|
||||
// disable this option so we can test transitions regardless of window width
|
||||
disableMaxTransWidth();
|
||||
|
||||
//stub to allow callback before function is returned to transition handler
|
||||
$.fn.animationComplete = function( callback ){
|
||||
animationCompleteFn.call( this, function(){
|
||||
|
|
@ -65,6 +77,7 @@
|
|||
teardown: function(){
|
||||
// unmock animation complete
|
||||
$.fn.animationComplete = animationCompleteFn;
|
||||
enableMaxTransWidth();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -170,5 +183,39 @@
|
|||
$.fn.animationComplete = animationCompleteFn;
|
||||
equals($("#foo").animationComplete(function(){})[0], $("#foo")[0]);
|
||||
});
|
||||
|
||||
|
||||
// reusable function for a few tests below
|
||||
function testTransitionMaxWidth( val, expected ){
|
||||
expect( 1 );
|
||||
|
||||
$.mobile.maxTransitionWidth = val;
|
||||
|
||||
var transitionOccurred = false;
|
||||
|
||||
onToComplete(function(){
|
||||
transitionOccurred = true;
|
||||
});
|
||||
|
||||
|
||||
return setTimeout(function(){
|
||||
ok( transitionOccurred === expected, (expected ? "" : "no ") + "transition occurred" );
|
||||
start();
|
||||
}, 5000);
|
||||
|
||||
$.mobile.changePage( $(".ui-page:not(.ui-page-active)").first() );
|
||||
|
||||
}
|
||||
|
||||
asyncTest( "maxTransitionWidth property disables transitions when value is less than browser width", function(){
|
||||
testTransitionMaxWidth( $( window ).width() - 1, false );
|
||||
});
|
||||
|
||||
asyncTest( "maxTransitionWidth property disables transitions when value is false", function(){
|
||||
testTransitionMaxWidth( false, false );
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
})(jQuery);
|
||||
|
|
|
|||
Loading…
Reference in a new issue