mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-10 23:53:10 +00:00
Merge branch 'out-in-transition'
Conflicts: css/structure/index.php docs/_assets/js/jqm-docs.js index.html
This commit is contained in:
Ghislain Seguin
commit
9e935c31f6
33 changed files with 1188 additions and 568 deletions
|
|
@ -42,9 +42,6 @@ div.ui-mobile-viewport { overflow-x: hidden; }
|
|||
/* some level of transform keeps elements from blinking out of visibility on iOS */
|
||||
-webkit-transform: rotateY(0);
|
||||
}
|
||||
.ui-page.ui-mobile-pre-transition {
|
||||
display: block;
|
||||
}
|
||||
.ui-mobile-touch-overflow.ui-native-fixed .ui-content .ui-listview {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -63,13 +60,11 @@ div.ui-mobile-viewport { overflow-x: hidden; }
|
|||
}
|
||||
|
||||
/* loading screen */
|
||||
.ui-loading .ui-mobile-viewport { overflow: hidden !important; }
|
||||
.ui-loading .ui-loader { display: block; }
|
||||
.ui-loading .ui-page { overflow: hidden; }
|
||||
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }
|
||||
.ui-loader h1 { font-size: 15px; text-align: center; }
|
||||
.ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; }
|
||||
|
||||
.ui-loader { background-color: #000; opacity: .18; display: none; z-index: 9999999; position: fixed; width: 46px; height: 46px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 1px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
|
||||
.ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; }
|
||||
.ui-loader .ui-icon { display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; }
|
||||
.ui-loader-fakefix { position: absolute; }
|
||||
/*fouc*/
|
||||
.ui-mobile-rendering > * { visibility: hidden; }
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -12,8 +14,11 @@
|
|||
}
|
||||
.ui-dialog .ui-header,
|
||||
.ui-dialog .ui-footer {
|
||||
padding: 0 15px;
|
||||
z-index: 10;
|
||||
padding: 0;
|
||||
}
|
||||
.ui-dialog .ui-footer {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.ui-dialog .ui-content {
|
||||
padding: 15px;
|
||||
|
|
|
|||
|
|
@ -1,159 +1,4 @@
|
|||
.spin {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-webkit-animation-name: spin;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
|
||||
Built by David Kaneda and maintained by Jonathan Stark.
|
||||
*/
|
||||
.in, .out {
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-webkit-animation-duration: 350ms;
|
||||
}
|
||||
|
||||
|
||||
.slide.out {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-webkit-animation-name: slideouttoleft;
|
||||
}
|
||||
|
||||
.slide.in {
|
||||
-webkit-transform: translateX(0);
|
||||
-webkit-animation-name: slideinfromright;
|
||||
}
|
||||
|
||||
.slide.out.reverse {
|
||||
-webkit-transform: translateX(100%);
|
||||
-webkit-animation-name: slideouttoright;
|
||||
}
|
||||
|
||||
.slide.in.reverse {
|
||||
-webkit-transform: translateX(0);
|
||||
-webkit-animation-name: slideinfromleft;
|
||||
}
|
||||
|
||||
.slideup.out {
|
||||
-webkit-animation-name: dontmove;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.slideup.in {
|
||||
-webkit-transform: translateY(0);
|
||||
-webkit-animation-name: slideinfrombottom;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.slideup.in.reverse {
|
||||
z-index: 0;
|
||||
-webkit-animation-name: dontmove;
|
||||
}
|
||||
|
||||
.slideup.out.reverse {
|
||||
-webkit-transform: translateY(100%);
|
||||
z-index: 10;
|
||||
-webkit-animation-name: slideouttobottom;
|
||||
}
|
||||
|
||||
.slidedown.out {
|
||||
-webkit-animation-name: dontmove;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.slidedown.in {
|
||||
-webkit-transform: translateY(0);
|
||||
-webkit-animation-name: slideinfromtop;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.slidedown.in.reverse {
|
||||
z-index: 0;
|
||||
-webkit-animation-name: dontmove;
|
||||
}
|
||||
|
||||
.slidedown.out.reverse {
|
||||
-webkit-transform: translateY(-100%);
|
||||
z-index: 10;
|
||||
-webkit-animation-name: slideouttotop;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideinfromright {
|
||||
from { -webkit-transform: translateX(100%); }
|
||||
to { -webkit-transform: translateX(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideinfromleft {
|
||||
from { -webkit-transform: translateX(-100%); }
|
||||
to { -webkit-transform: translateX(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideouttoleft {
|
||||
from { -webkit-transform: translateX(0); }
|
||||
to { -webkit-transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideouttoright {
|
||||
from { -webkit-transform: translateX(0); }
|
||||
to { -webkit-transform: translateX(100%); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideinfromtop {
|
||||
from { -webkit-transform: translateY(-100%); }
|
||||
to { -webkit-transform: translateY(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideinfrombottom {
|
||||
from { -webkit-transform: translateY(100%); }
|
||||
to { -webkit-transform: translateY(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideouttobottom {
|
||||
from { -webkit-transform: translateY(0); }
|
||||
to { -webkit-transform: translateY(100%); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideouttotop {
|
||||
from { -webkit-transform: translateY(0); }
|
||||
to { -webkit-transform: translateY(-100%); }
|
||||
}
|
||||
@-webkit-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
.fade.out {
|
||||
z-index: 0;
|
||||
-webkit-animation-name: fadeout;
|
||||
}
|
||||
|
||||
.fade.in {
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
-webkit-animation-name: fadein;
|
||||
}
|
||||
|
||||
/* The properties in this rule are only necessary for the 'flip' transition.
|
||||
* We need specify the perspective to create a projection matrix. This will add
|
||||
* some depth as the element flips. The depth number represents the distance of
|
||||
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
|
||||
* value.
|
||||
*/
|
||||
.viewport-flip {
|
||||
-webkit-perspective: 1000;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Transitions originally inspired by those from jQtouch, nice work, folks */
|
||||
.ui-mobile-viewport-transitioning,
|
||||
.ui-mobile-viewport-transitioning .ui-page {
|
||||
width: 100%;
|
||||
|
|
@ -161,103 +6,16 @@ Built by David Kaneda and maintained by Jonathan Stark.
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flip {
|
||||
-webkit-animation-duration: .65s;
|
||||
-webkit-backface-visibility:hidden;
|
||||
-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
|
||||
.in {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-moz-animation-duration: 350ms;
|
||||
}
|
||||
|
||||
.flip.out {
|
||||
-webkit-transform: rotateY(-180deg) scale(.8);
|
||||
-webkit-animation-name: flipouttoleft;
|
||||
}
|
||||
|
||||
.flip.in {
|
||||
-webkit-transform: rotateY(0) scale(1);
|
||||
-webkit-animation-name: flipinfromleft;
|
||||
}
|
||||
|
||||
/* Shake it all about */
|
||||
|
||||
.flip.out.reverse {
|
||||
-webkit-transform: rotateY(180deg) scale(.8);
|
||||
-webkit-animation-name: flipouttoright;
|
||||
}
|
||||
|
||||
.flip.in.reverse {
|
||||
-webkit-transform: rotateY(0) scale(1);
|
||||
-webkit-animation-name: flipinfromright;
|
||||
}
|
||||
|
||||
@-webkit-keyframes flipinfromright {
|
||||
from { -webkit-transform: rotateY(-180deg) scale(.8); }
|
||||
to { -webkit-transform: rotateY(0) scale(1); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes flipinfromleft {
|
||||
from { -webkit-transform: rotateY(180deg) scale(.8); }
|
||||
to { -webkit-transform: rotateY(0) scale(1); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes flipouttoleft {
|
||||
from { -webkit-transform: rotateY(0) scale(1); }
|
||||
to { -webkit-transform: rotateY(-180deg) scale(.8); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes flipouttoright {
|
||||
from { -webkit-transform: rotateY(0) scale(1); }
|
||||
to { -webkit-transform: rotateY(180deg) scale(.8); }
|
||||
}
|
||||
|
||||
|
||||
/* Hackish, but reliable. */
|
||||
|
||||
@-webkit-keyframes dontmove {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.pop {
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.pop.in {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1;
|
||||
-webkit-animation-name: popin;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.pop.in.reverse {
|
||||
z-index: 0;
|
||||
-webkit-animation-name: dontmove;
|
||||
}
|
||||
|
||||
.pop.out.reverse {
|
||||
-webkit-transform: scale(.2);
|
||||
opacity: 0;
|
||||
-webkit-animation-name: popout;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@-webkit-keyframes popin {
|
||||
from {
|
||||
-webkit-transform: scale(.2);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes popout {
|
||||
from {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(.2);
|
||||
opacity: 0;
|
||||
}
|
||||
.out {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
-webkit-animation-duration: 225ms;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-moz-animation-duration: 225;
|
||||
}
|
||||
37
css/structure/jquery.mobile.transitions.fade.css
Normal file
37
css/structure/jquery.mobile.transitions.fade.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
@-webkit-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@-moz-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
.fade.out {
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
-webkit-animation-duration: 150ms;
|
||||
-webkit-animation-name: fadeout;
|
||||
-moz-animation-duration: 150ms;
|
||||
-moz-animation-name: fadeout;
|
||||
}
|
||||
|
||||
.fade.in {
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
-webkit-animation-duration: 300ms;
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-duration: 300ms;
|
||||
-moz-animation-name: fadein;
|
||||
}
|
||||
79
css/structure/jquery.mobile.transitions.flip.css
Normal file
79
css/structure/jquery.mobile.transitions.flip.css
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/* The properties in this rule are only necessary for the 'flip' transition.
|
||||
* We need specify the perspective to create a projection matrix. This will add
|
||||
* some depth as the element flips. The depth number represents the distance of
|
||||
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
|
||||
* value.
|
||||
*/
|
||||
|
||||
.viewport-flip {
|
||||
-webkit-perspective: 1000;
|
||||
-moz-perspective: 1000;
|
||||
position: absolute;
|
||||
}
|
||||
.flip {
|
||||
-webkit-backface-visibility:hidden;
|
||||
-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
|
||||
-moz-backface-visibility:hidden;
|
||||
-moz-transform:translateX(0);
|
||||
}
|
||||
|
||||
.flip.out {
|
||||
-webkit-transform: rotateY(-90deg) scale(.9);
|
||||
-webkit-animation-name: flipouttoleft;
|
||||
-webkit-animation-duration: 225ms;
|
||||
-moz-transform: rotateY(-90deg) scale(.9);
|
||||
-moz-animation-name: flipouttoleft;
|
||||
-moz-animation-duration: 225ms;
|
||||
}
|
||||
|
||||
.flip.in {
|
||||
-webkit-animation-name: flipintoright;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-name: flipintoright;
|
||||
-moz-animation-duration: 350ms;
|
||||
}
|
||||
|
||||
.flip.out.reverse {
|
||||
-webkit-transform: rotateY(90deg) scale(.9);
|
||||
-webkit-animation-name: flipouttoright;
|
||||
-moz-transform: rotateY(90deg) scale(.9);
|
||||
-moz-animation-name: flipouttoright;
|
||||
}
|
||||
|
||||
.flip.in.reverse {
|
||||
-webkit-animation-name: flipintoleft;
|
||||
-moz-animation-name: flipintoleft;
|
||||
}
|
||||
|
||||
@-webkit-keyframes flipouttoleft {
|
||||
from { -webkit-transform: rotateY(0); }
|
||||
to { -webkit-transform: rotateY(-90deg) scale(.9); }
|
||||
}
|
||||
@-moz-keyframes flipouttoleft {
|
||||
from { -moz-transform: rotateY(0); }
|
||||
to { -moz-transform: rotateY(-90deg) scale(.9); }
|
||||
}
|
||||
@-webkit-keyframes flipouttoright {
|
||||
from { -webkit-transform: rotateY(0) ; }
|
||||
to { -webkit-transform: rotateY(90deg) scale(.9); }
|
||||
}
|
||||
@-moz-keyframes flipouttoright {
|
||||
from { -moz-transform: rotateY(0); }
|
||||
to { -moz-transform: rotateY(90deg) scale(.9); }
|
||||
}
|
||||
@-webkit-keyframes flipintoleft {
|
||||
from { -webkit-transform: rotateY(-90deg) scale(.9); }
|
||||
to { -webkit-transform: rotateY(0); }
|
||||
}
|
||||
@-moz-keyframes flipintoleft {
|
||||
from { -moz-transform: rotateY(-90deg) scale(.9); }
|
||||
to { -moz-transform: rotateY(0); }
|
||||
}
|
||||
@-webkit-keyframes flipintoright {
|
||||
from { -webkit-transform: rotateY(90deg) scale(.9); }
|
||||
to { -webkit-transform: rotateY(0); }
|
||||
}
|
||||
@-moz-keyframes flipintoright {
|
||||
from { -moz-transform: rotateY(90deg) scale(.9); }
|
||||
to { -moz-transform: rotateY(0); }
|
||||
}
|
||||
88
css/structure/jquery.mobile.transitions.flow.css
Normal file
88
css/structure/jquery.mobile.transitions.flow.css
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
/* flow transition */
|
||||
.flow {
|
||||
-webkit-transform-origin: 50% 30%;
|
||||
-moz-transform-origin: 50% 30%;
|
||||
-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;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-webkit-animation-duration: 500ms;
|
||||
-moz-transform: translateX(-100%) scale(.7);
|
||||
-moz-animation-name: flowouttoleft;
|
||||
-moz-animation-timing-function: ease;
|
||||
-moz-animation-duration: 500ms;
|
||||
}
|
||||
|
||||
.flow.in {
|
||||
-webkit-transform: translateX(0) scale(1);
|
||||
-webkit-animation-name: flowinfromright;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-webkit-animation-duration: 400ms;
|
||||
-moz-transform: translateX(0) scale(1);
|
||||
-moz-animation-name: flowinfromright;
|
||||
-moz-animation-timing-function: ease;
|
||||
-moz-animation-duration: 400ms;
|
||||
}
|
||||
|
||||
.flow.out.reverse {
|
||||
-webkit-transform: translateX(100%);
|
||||
-webkit-animation-name: flowouttoright;
|
||||
-moz-transform: translateX(100%);
|
||||
-moz-animation-name: flowouttoright;
|
||||
}
|
||||
|
||||
.flow.in.reverse {
|
||||
-webkit-animation-name: flowinfromleft;
|
||||
-moz-animation-name: flowinfromleft;
|
||||
}
|
||||
|
||||
@-webkit-keyframes flowouttoleft {
|
||||
0% { -webkit-transform: translateX(0) scale(1); }
|
||||
60%, 70% { -webkit-transform: translateX(0) scale(.7); }
|
||||
100% { -webkit-transform: translateX(-100%) scale(.7); }
|
||||
}
|
||||
@-moz-keyframes flowouttoleft {
|
||||
0% { -moz-transform: translateX(0) scale(1); }
|
||||
60%, 70% { -moz-transform: translateX(0) scale(.7); }
|
||||
100% { -moz-transform: translateX(-100%) scale(.7); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes flowouttoright {
|
||||
0% { -webkit-transform: translateX(0) scale(1); }
|
||||
60%, 70% { -webkit-transform: translateX(0) scale(.7); }
|
||||
100% { -webkit-transform: translateX(100%) scale(.7); }
|
||||
}
|
||||
@-moz-keyframes flowouttoright {
|
||||
0% { -moz-transform: translateX(0) scale(1); }
|
||||
60%, 70% { -moz-transform: translateX(0) scale(.7); }
|
||||
100% { -moz-transform: translateX(100%) scale(.7); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes flowinfromleft {
|
||||
0% { -webkit-transform: translateX(-100%) scale(.7); }
|
||||
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
|
||||
100% { -webkit-transform: translateX(0) scale(1); }
|
||||
}
|
||||
@-moz-keyframes flowinfromleft {
|
||||
0% { -moz-transform: translateX(-100%) scale(.7); }
|
||||
30%, 40% { -moz-transform: translateX(0) scale(.7); }
|
||||
100% { -moz-transform: translateX(0) scale(1); }
|
||||
}
|
||||
@-webkit-keyframes flowinfromright {
|
||||
0% { -webkit-transform: translateX(100%) scale(.7); }
|
||||
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
|
||||
100% { -webkit-transform: translateX(0) scale(1); }
|
||||
}
|
||||
@-moz-keyframes flowinfromright {
|
||||
0% { -moz-transform: translateX(100%) scale(.7); }
|
||||
30%, 40% { -moz-transform: translateX(0) scale(.7); }
|
||||
100% { -moz-transform: translateX(0) scale(1); }
|
||||
}
|
||||
78
css/structure/jquery.mobile.transitions.pop.css
Normal file
78
css/structure/jquery.mobile.transitions.pop.css
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
.pop {
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.pop.in {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
opacity: 1;
|
||||
-webkit-animation-name: popin;
|
||||
-moz-animation-name: popin;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-duration: 350ms;
|
||||
}
|
||||
|
||||
.pop.out {
|
||||
-webkit-animation-name: fadeout;
|
||||
-moz-animation-name: fadeout;
|
||||
opacity: 0;
|
||||
-webkit-animation-duration: 225ms;
|
||||
-moz-animation-duration: 225ms;
|
||||
}
|
||||
|
||||
.pop.in.reverse {
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
}
|
||||
|
||||
.pop.out.reverse {
|
||||
-webkit-transform: scale(.8);
|
||||
-moz-transform: scale(.8);
|
||||
-webkit-animation-name: popout;
|
||||
-moz-animation-name: popout;
|
||||
}
|
||||
|
||||
@-webkit-keyframes popin {
|
||||
from {
|
||||
-webkit-transform: scale(.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes popin {
|
||||
from {
|
||||
-moz-transform: scale(.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
-moz-transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes popout {
|
||||
from {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(.8);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes popout {
|
||||
from {
|
||||
-moz-transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
-moz-transform: scale(.8);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
50
css/structure/jquery.mobile.transitions.slide.css
Normal file
50
css/structure/jquery.mobile.transitions.slide.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/* slide transition */
|
||||
.slide.out {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-webkit-animation-name: slideouttoleft;
|
||||
-moz-transform: translateX(-100%);
|
||||
-moz-animation-name: slideouttoleft;
|
||||
-webkit-animation-duration: 225ms;
|
||||
-moz-animation-duration: 225ms;
|
||||
}
|
||||
|
||||
.slide.in {
|
||||
-webkit-transform: translateX(0);
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-transform: translateX(0);
|
||||
-moz-animation-name: fadein;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-duration: 350ms;
|
||||
}
|
||||
|
||||
.slide.out.reverse {
|
||||
-webkit-transform: translateX(100%);
|
||||
-webkit-animation-name: slideouttoright;
|
||||
-moz-transform: translateX(100%);
|
||||
-moz-animation-name: slideouttoright;
|
||||
}
|
||||
|
||||
.slide.in.reverse {
|
||||
-webkit-transform: translateX(0);
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-transform: translateX(0);
|
||||
-moz-animation-name: fadein;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideouttoleft {
|
||||
from { -webkit-transform: translateX(0); }
|
||||
to { -webkit-transform: translateX(-100%); }
|
||||
}
|
||||
@-moz-keyframes slideouttoleft {
|
||||
from { -moz-transform: translateX(0); }
|
||||
to { -moz-transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideouttoright {
|
||||
from { -webkit-transform: translateX(0); }
|
||||
to { -webkit-transform: translateX(100%); }
|
||||
}
|
||||
@-moz-keyframes slideouttoright {
|
||||
from { -moz-transform: translateX(0); }
|
||||
to { -moz-transform: translateX(100%); }
|
||||
}
|
||||
46
css/structure/jquery.mobile.transitions.slidedown.css
Normal file
46
css/structure/jquery.mobile.transitions.slidedown.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/* slide down */
|
||||
.slidedown.out {
|
||||
-webkit-animation-name: fadeout;
|
||||
-moz-animation-name: fadeout;
|
||||
-webkit-animation-duration: 225ms;
|
||||
-moz-animation-duration: 225ms;
|
||||
}
|
||||
|
||||
.slidedown.in {
|
||||
-webkit-transform: translateY(0);
|
||||
-webkit-animation-name: slideinfromtop;
|
||||
-moz-transform: translateY(0);
|
||||
-moz-animation-name: slideinfromtop;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-duration: 350ms;
|
||||
}
|
||||
|
||||
.slidedown.in.reverse {
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
}
|
||||
|
||||
.slidedown.out.reverse {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-webkit-animation-name: slideouttotop;
|
||||
-moz-animation-name: slideouttotop;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideinfromtop {
|
||||
from { -webkit-transform: translateY(-100%); }
|
||||
to { -webkit-transform: translateY(0); }
|
||||
}
|
||||
@-moz-keyframes slideinfromtop {
|
||||
from { -moz-transform: translateY(-100%); }
|
||||
to { -moz-transform: translateY(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideouttotop {
|
||||
from { -webkit-transform: translateY(0); }
|
||||
to { -webkit-transform: translateY(-100%); }
|
||||
}
|
||||
@-moz-keyframes slideouttotop {
|
||||
from { -moz-transform: translateY(0); }
|
||||
to { -moz-transform: translateY(-100%); }
|
||||
}
|
||||
46
css/structure/jquery.mobile.transitions.slideup.css
Normal file
46
css/structure/jquery.mobile.transitions.slideup.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/* slide up */
|
||||
.slideup.out {
|
||||
-webkit-animation-name: fadeout;
|
||||
-moz-animation-name: fadeout;
|
||||
-webkit-animation-duration: 225ms;
|
||||
-moz-animation-duration: 225ms;
|
||||
}
|
||||
|
||||
.slideup.in {
|
||||
-webkit-transform: translateY(0);
|
||||
-webkit-animation-name: slideinfrombottom;
|
||||
-moz-transform: translateY(0);
|
||||
-moz-animation-name: slideinfrombottom;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-duration: 350ms;
|
||||
}
|
||||
|
||||
.slideup.in.reverse {
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
}
|
||||
|
||||
.slideup.out.reverse {
|
||||
-webkit-transform: translateY(100%);
|
||||
-moz-transform: translateY(100%);
|
||||
-webkit-animation-name: slideouttobottom;
|
||||
-moz-animation-name: slideouttobottom;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideinfrombottom {
|
||||
from { -webkit-transform: translateY(100%); }
|
||||
to { -webkit-transform: translateY(0); }
|
||||
}
|
||||
@-moz-keyframes slideinfrombottom {
|
||||
from { -moz-transform: translateY(100%); }
|
||||
to { -moz-transform: translateY(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideouttobottom {
|
||||
from { -webkit-transform: translateY(0); }
|
||||
to { -webkit-transform: translateY(100%); }
|
||||
}
|
||||
@-moz-keyframes slideouttobottom {
|
||||
from { -moz-transform: translateY(0); }
|
||||
to { -moz-transform: translateY(100%); }
|
||||
}
|
||||
83
css/structure/jquery.mobile.transitions.turn.css
Normal file
83
css/structure/jquery.mobile.transitions.turn.css
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
/* The properties in this rule are only necessary for the 'flip' transition.
|
||||
* We need specify the perspective to create a projection matrix. This will add
|
||||
* some depth as the element flips. The depth number represents the distance of
|
||||
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
|
||||
* value.
|
||||
*/
|
||||
|
||||
.viewport-turn {
|
||||
-webkit-perspective: 1000;
|
||||
-moz-perspective: 1000;
|
||||
position: absolute;
|
||||
}
|
||||
.turn {
|
||||
-webkit-backface-visibility:hidden;
|
||||
-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
|
||||
-webkit-transform-origin: 0;
|
||||
|
||||
-moz-backface-visibility:hidden;
|
||||
-moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
|
||||
-moz-transform-origin: 0;
|
||||
}
|
||||
|
||||
.turn.out {
|
||||
-webkit-transform: rotateY(-90deg) scale(.9);
|
||||
-webkit-animation-name: flipouttoleft;
|
||||
-moz-transform: rotateY(-90deg) scale(.9);
|
||||
-moz-animation-name: flipouttoleft;
|
||||
-webkit-animation-duration: 225ms;
|
||||
-moz-animation-duration: 225ms;
|
||||
}
|
||||
|
||||
.turn.in {
|
||||
-webkit-animation-name: flipintoright;
|
||||
-moz-animation-name: flipintoright;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-duration: 350ms;
|
||||
|
||||
}
|
||||
|
||||
.turn.out.reverse {
|
||||
-webkit-transform: rotateY(90deg) scale(.9);
|
||||
-webkit-animation-name: flipouttoright;
|
||||
-moz-transform: rotateY(90deg) scale(.9);
|
||||
-moz-animation-name: flipouttoright;
|
||||
}
|
||||
|
||||
.turn.in.reverse {
|
||||
-webkit-animation-name: flipintoleft;
|
||||
-moz-animation-name: flipintoleft;
|
||||
}
|
||||
|
||||
@-webkit-keyframes flipouttoleft {
|
||||
from { -webkit-transform: rotateY(0); }
|
||||
to { -webkit-transform: rotateY(-90deg) scale(.9); }
|
||||
}
|
||||
@-moz-keyframes flipouttoleft {
|
||||
from { -moz-transform: rotateY(0); }
|
||||
to { -moz-transform: rotateY(-90deg) scale(.9); }
|
||||
}
|
||||
@-webkit-keyframes flipouttoright {
|
||||
from { -webkit-transform: rotateY(0) ; }
|
||||
to { -webkit-transform: rotateY(90deg) scale(.9); }
|
||||
}
|
||||
@-moz-keyframes flipouttoright {
|
||||
from { -moz-transform: rotateY(0); }
|
||||
to { -moz-transform: rotateY(90deg) scale(.9); }
|
||||
}
|
||||
@-webkit-keyframes flipintoleft {
|
||||
from { -webkit-transform: rotateY(-90deg) scale(.9); }
|
||||
to { -webkit-transform: rotateY(0); }
|
||||
}
|
||||
@-moz-keyframes flipintoleft {
|
||||
from { -moz-transform: rotateY(-90deg) scale(.9); }
|
||||
to { -moz-transform: rotateY(0); }
|
||||
}
|
||||
@-webkit-keyframes flipintoright {
|
||||
from { -webkit-transform: rotateY(90deg) scale(.9); }
|
||||
to { -webkit-transform: rotateY(0); }
|
||||
}
|
||||
@-moz-keyframes flipintoright {
|
||||
from { -moz-transform: rotateY(90deg) scale(.9); }
|
||||
to { -moz-transform: rotateY(0); }
|
||||
}
|
||||
BIN
css/themes/default/images/ajax-loader.gif
Normal file
BIN
css/themes/default/images/ajax-loader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
|
|
@ -1,6 +1,14 @@
|
|||
@import url( "jquery.mobile.theme.css" );
|
||||
@import url( "../../structure/jquery.mobile.core.css" );
|
||||
@import url( "../../structure/jquery.mobile.transitions.css" );
|
||||
@import url( "../../structure/jquery.mobile.transitions.fade.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.pop.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.slide.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.slidedown.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.slideup.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.flip.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.turn.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.flow.css" ),
|
||||
@import url( "../../structure/jquery.mobile.grids.css" );
|
||||
@import url( "../../structure/jquery.mobile.headerfooter.css" );
|
||||
@import url( "../../structure/jquery.mobile.navbar.css" );
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
color: #2489CE /*{a-bar-link-visited}*/;
|
||||
}
|
||||
.ui-body-a,
|
||||
.ui-dialog-page.ui-overlay-a {
|
||||
.ui-overlay-a {
|
||||
border: 1px solid #2A2A2A /*{a-body-border}*/;
|
||||
background: #222222 /*{a-body-background-color}*/;
|
||||
color: #fff /*{a-body-color}*/;
|
||||
|
|
@ -57,6 +57,9 @@
|
|||
background-image: -o-linear-gradient( #666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Opera 11.10+ */
|
||||
background-image: linear-gradient( #666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/);
|
||||
}
|
||||
.ui-overlay-a {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-body-a,
|
||||
.ui-body-a input,
|
||||
.ui-body-a select,
|
||||
|
|
@ -184,7 +187,7 @@
|
|||
color: #ddf0f8 /*{b-bar-link-visited}*/;
|
||||
}
|
||||
.ui-body-b,
|
||||
.ui-dialog-page.ui-overlay-b {
|
||||
.ui-overlay-b {
|
||||
border: 1px solid #C6C6C6 /*{b-body-border}*/;
|
||||
background: #cccccc /*{b-body-background-color}*/;
|
||||
color: #333333 /*{b-body-color}*/;
|
||||
|
|
@ -197,6 +200,9 @@
|
|||
background-image: -o-linear-gradient( #e6e6e6 /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Opera 11.10+ */
|
||||
background-image: linear-gradient( #e6e6e6 /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/);
|
||||
}
|
||||
.ui-overlay-b {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-body-b,
|
||||
.ui-body-b input,
|
||||
.ui-body-b select,
|
||||
|
|
@ -326,7 +332,7 @@
|
|||
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
|
||||
}
|
||||
.ui-body-c,
|
||||
.ui-dialog-page.ui-overlay-c {
|
||||
.ui-overlay-c {
|
||||
border: 1px solid #B3B3B3 /*{c-body-border}*/;
|
||||
color: #333333 /*{c-body-color}*/;
|
||||
text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #fff /*{c-body-shadow-color}*/;
|
||||
|
|
@ -338,6 +344,9 @@
|
|||
background-image: -o-linear-gradient( #eee /*{c-body-background-start}*/, #ddd /*{c-body-background-end}*/); /* Opera 11.10+ */
|
||||
background-image: linear-gradient( #eee /*{c-body-background-start}*/, #ddd /*{c-body-background-end}*/);
|
||||
}
|
||||
.ui-overlay-c {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-body-c,
|
||||
.ui-body-c input,
|
||||
.ui-body-c select,
|
||||
|
|
@ -468,7 +477,7 @@
|
|||
}
|
||||
|
||||
.ui-body-d,
|
||||
.ui-dialog-page.ui-overlay-d {
|
||||
.ui-overlay-d {
|
||||
border: 1px solid #ccc /*{d-body-border}*/;
|
||||
color: #333333 /*{d-body-color}*/;
|
||||
text-shadow: 0 /*{d-body-shadow-x}*/ 1px /*{d-body-shadow-y}*/ 0 /*{d-body-shadow-radius}*/ #fff /*{d-body-shadow-color}*/;
|
||||
|
|
@ -480,6 +489,9 @@
|
|||
background-image: -o-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* Opera 11.10+ */
|
||||
background-image: linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/);
|
||||
}
|
||||
.ui-overlay-d {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-body-d,
|
||||
.ui-body-d input,
|
||||
.ui-body-d select,
|
||||
|
|
@ -609,7 +621,7 @@
|
|||
}
|
||||
|
||||
.ui-body-e,
|
||||
.ui-dialog-page.ui-overlay-e {
|
||||
.ui-overlay-e {
|
||||
border: 1px solid #F7C942 /*{e-body-border}*/;
|
||||
color: #333333 /*{e-body-color}*/;
|
||||
text-shadow: 0 /*{e-body-shadow-x}*/ 1px /*{e-body-shadow-y}*/ 0 /*{e-body-shadow-radius}*/ #fff /*{e-body-shadow-color}*/;
|
||||
|
|
@ -621,6 +633,9 @@
|
|||
background-image: -o-linear-gradient( #fff /*{e-body-background-start}*/, #faeb9e /*{e-body-background-end}*/); /* Opera 11.10+ */
|
||||
background-image: linear-gradient( #fff /*{e-body-background-start}*/, #faeb9e /*{e-body-background-end}*/);
|
||||
}
|
||||
.ui-overlay-e {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-body-e,
|
||||
.ui-body-e input,
|
||||
.ui-body-e select,
|
||||
|
|
@ -975,13 +990,8 @@ a.ui-link-inherit {
|
|||
|
||||
/* loading icon */
|
||||
.ui-icon-loading {
|
||||
background-image: url(images/ajax-loader.png);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
-moz-border-radius: 20px;
|
||||
-webkit-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
background-size: 35px 35px;
|
||||
background: url(images/ajax-loader.gif);
|
||||
background-size: 46px 46px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
@import url( "jquery.mobile.theme.css" );
|
||||
@import url( "../../structure/jquery.mobile.core.css" );
|
||||
@import url( "../../structure/jquery.mobile.transitions.css" );
|
||||
@import url( "../../structure/jquery.mobile.transitions.fade.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.pop.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.slide.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.slidedown.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.slideup.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.flip.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.turn.css" ),
|
||||
@import url( "../../structure/jquery.mobile.transitions.flow.css" ),
|
||||
@import url( "../../structure/jquery.mobile.grids.css" );
|
||||
@import url( "../../structure/jquery.mobile.headerfooter.css" );
|
||||
@import url( "../../structure/jquery.mobile.navbar.css" );
|
||||
|
|
|
|||
|
|
@ -9,26 +9,6 @@ $(function(){
|
|||
});
|
||||
});
|
||||
|
||||
function setDefaultTransition(){
|
||||
var winwidth = $( window ).width(),
|
||||
trans ="slide";
|
||||
|
||||
if( winwidth >= 1000 ){
|
||||
trans = "none";
|
||||
}
|
||||
else if( winwidth >= 650 ){
|
||||
trans = "fade";
|
||||
}
|
||||
|
||||
$.mobile.defaultPageTransition = trans;
|
||||
}
|
||||
|
||||
|
||||
$(function(){
|
||||
setDefaultTransition();
|
||||
$( window ).bind( "throttledresize", setDefaultTransition );
|
||||
});
|
||||
|
||||
|
||||
// Turn off AJAX for local file browsing
|
||||
if ( location.protocol.substr(0,4) === 'file' ||
|
||||
|
|
|
|||
|
|
@ -23,44 +23,97 @@
|
|||
<div class="content-primary">
|
||||
<h2>Page transitions</h2>
|
||||
|
||||
<p>The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>
|
||||
<p>The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>
|
||||
|
||||
<style>
|
||||
table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; }
|
||||
th { text-align:left; }
|
||||
th h3 { margin:.6em 0; }
|
||||
th, td { vertical-align:top; border-top:1px solid #ccc; padding: 1px 3px; }
|
||||
td .ui-btn { margin:.4em 0 .5em 0; }
|
||||
td .ui-btn-inner { padding: .4em 15px; }
|
||||
</style>
|
||||
|
||||
<table margin="0">
|
||||
<tr>
|
||||
<th><h3>fade</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="fade" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>pop</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="pop" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>flip</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="flip" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>turn</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="turn" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>flow</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="flow" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>slide</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="slide" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>slideup</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>slidedown</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>none</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="ui-grid-a">
|
||||
<div class="ui-block-a">
|
||||
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
|
||||
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
|
||||
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
|
||||
</div>
|
||||
<div class="ui-block-b">
|
||||
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
|
||||
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
|
||||
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flip">flip*</a>
|
||||
</div>
|
||||
</div><!-- /grid-a -->
|
||||
|
||||
<p><strong>Transitions from <a href="http://www.jqtouch.com/">jQtouch</a></strong> (<em>with small modifications</em>): Built by David Kaneda and maintained by Jonathan Stark.</p>
|
||||
|
||||
<p>NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.</p>
|
||||
<p><strong>NOTE</strong>: To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support will fallback to "fade" for all transition types. This behavior is 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>
|
||||
|
||||
<h2>Setting a transition on a link or form submit</h2>
|
||||
<p>By default, the framework applies the right to left <strong>slide</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>
|
||||
<p>By default, the framework applies a <strong>fade</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>
|
||||
|
||||
<code><code>
|
||||
<a href="index.html" <strong>data-transition="pop"</strong>>I'll pop</a>
|
||||
</code></code>
|
||||
|
||||
<p>When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the <code>data-direction="reverse"</code> attribute to a link. Note: (this was formerly <code>data-back="true"</code>, which will remain supported until 1.0)</p>
|
||||
|
||||
<p>For smoother page transitions, consider enabling the <a href="touchoverflow.html">touchOverflow</a> feature.</p>
|
||||
|
||||
|
||||
<h2>Global configuration of transitions</h2>
|
||||
|
||||
<p>Set the <code>defaultPageTransition</code> <a href="../api/globalconfig.html">global option</a> if you'd prefer a different default transition. Dialogs have a different option called <code>defaultDialogTransition</code> that can also set configured.</p>
|
||||
|
||||
|
||||
<h2>Browser support and performance</h2>
|
||||
<p>All transitions are built with CSS keyframe animations and include both <code>-webkit</code> vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers and <code>-moz</code> rules for Firefox browsers. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.</p>
|
||||
|
||||
<h2>Defining fallback transitions for non-3D support</h2>
|
||||
<p>By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.</p>
|
||||
|
||||
<p>The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":</p>
|
||||
<code>$.mobile.fallbackTransition.slideout = "none"</code>
|
||||
|
||||
<h2>Setting a max width for transitions</h2>
|
||||
<p>By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option <code>$.mobile.maxTransitionWidth</code>, which defaults to <code>false</code>. The option accepts any number representing a pixel width or <code>false</code> value. If it's not <code>false</code>, the handler will use a "none" transition when the window width is wider than the specified value.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Creating custom CSS-based transitions</h2>
|
||||
|
||||
|
|
@ -87,7 +140,7 @@
|
|||
}
|
||||
</code></pre>
|
||||
|
||||
<p>During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above.</p>
|
||||
<p>During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above. As of jQuery Mobile version 1.1, animation class additions are queued, rather than simultaneous, producing an out-then-in sequence, which is friendlier for mobile rendering than our previous simultaneous transition sequence.</p>
|
||||
|
||||
<p>If your transition supports a reverse direction, you need to create CSS rules that use the <code>reverse</code> class in addition to the transition class name and the "in" and "out" classes:</p>
|
||||
|
||||
|
|
@ -122,9 +175,18 @@
|
|||
<p>In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:</p>
|
||||
|
||||
<pre><code>
|
||||
.in, .out {
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-webkit-animation-duration: 350ms;
|
||||
.in {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-moz-animation-duration: 350ms;
|
||||
}
|
||||
|
||||
.out {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
-webkit-animation-duration: 225ms;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-moz-animation-duration: 225;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -136,15 +198,14 @@
|
|||
|
||||
<p>After the new page is loaded, the <code>$.mobile.transitionHandlers</code> dictionary is used to see if any transition handler function is registered for the given transition name. If a handler is found, that handler is invoked to start and manage the transition. If no handler is found the handler specified by the configuration option <code>$.mobile.defaultTransitionHandler</code> is invoked.</p>
|
||||
|
||||
<p>By default, the <code>$.mobile.transitionHandlers</code> dictionary is only populated with a single handler entry called "none". This handler simply removes the <code>"ui-page-active"</code> class from the page we are transitioning "from", and places it on the page we are transitioning "to". The transition is instantaneous; no animation, no fanfare.</p>
|
||||
<p>By default, the <code>$.mobile.transitionHandlers</code> dictionary is only populated with a single handler entry called "default". This handler plays a dual purpose of either executing a "none" transition, which removes the <code>"ui-page-active"</code> class from the page we are transitioning "from", and places it on the page we are transitioning "to", or a Queued CSS3 Animated Transition, such as the one explained above. If the transition is "none", it will be instantaneous; no animation, no fanfare.</p>
|
||||
|
||||
<p>The <code>$.defaultTransitionHandler</code> points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.</p>
|
||||
<p>The <code>$.mobile.defaultTransitionHandler</code> points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.</p>
|
||||
|
||||
<p>Both the "none" and "css3" transition handlers are available off of the $.mobile namespace:</p>
|
||||
<p>The default transition handler is available on the $.mobile namespace:</p>
|
||||
|
||||
<pre><code>
|
||||
$.mobile.noneTransitionHandler
|
||||
$.mobile.css3TransitionHandler
|
||||
$.mobile.transitionHandlers[ "default" ];
|
||||
</code></pre>
|
||||
|
||||
<h3>Transition Handlers</h3>
|
||||
|
|
@ -247,7 +308,64 @@ $.mobile.defaultTransitionHandler = myTransitionHandler;
|
|||
</code></pre>
|
||||
|
||||
<p>Once you do this, your handler will be invoked any time a transition name is used but not found within the <code>$.mobile.transitionHandlers</code> dictionary.</p>
|
||||
|
||||
<h2>A model for Custom transition handler development</h2>
|
||||
<p>Transition handlers involve a number of critical operations, such as hiding any existing page, showing the new page, scrolling either to the top or a remembered scroll position on that new page, setting focus on the new page, and any animation and timing sequences you'd like to add. During development, we would recommend using <code>jquery.mobile.transitions.js</code> as a coding reference.</p>
|
||||
|
||||
<h2>Transitions and scroll position</h2>
|
||||
<p>One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.</p>
|
||||
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th><h3>fade</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="fade" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>pop</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="pop" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>flip</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="flip" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>turn</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="turn" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>flow</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="flow" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>slide</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="slide" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>slideup</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>slidedown</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h3>none</h3></th>
|
||||
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
|
||||
<td><a href="#page-success" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
</div><!--/content-primary -->
|
||||
|
||||
|
|
@ -289,19 +407,70 @@ $.mobile.defaultTransitionHandler = myTransitionHandler;
|
|||
|
||||
|
||||
|
||||
<div data-role="page" id="dialog"><!-- dialog-->
|
||||
<div data-role="page" id="dialog-success"><!-- dialog-->
|
||||
|
||||
<div data-role="header" data-theme="e">
|
||||
<h1>Ta-da!</h1>
|
||||
<h1>Dialog</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content" data-theme="e">
|
||||
<p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
|
||||
<p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
|
||||
<p>What do you think?</p>
|
||||
<a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">I like it</a>
|
||||
<p>That was an animated page transition effect to a dialog that we added with a <code>data-transition</code> attribute on the link.</p>
|
||||
<p>Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.</p>
|
||||
|
||||
<a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">Take me back</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="page" id="page-success"><!-- dialog-->
|
||||
|
||||
<div data-role="header" data-theme="a" data-position="fixed">
|
||||
<h1>Page</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content" data-theme="d">
|
||||
<p>That was an animated page transition effect to a page that we added with a <code>data-transition</code> attribute on the link. This uses a different background theme swatch to see how that looks with the transitions.</p>
|
||||
<p>Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.</p>
|
||||
|
||||
<form action="#" method="get">
|
||||
|
||||
<h2>Here's a few form elements</h2>
|
||||
|
||||
<p>These are here to see if this slows down rendering.</p>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="name">Text Input:</label>
|
||||
<input type="text" name="name" id="name" value="" />
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider2">Flip switch:</label>
|
||||
<select name="slider2" id="slider2" data-role="slider">
|
||||
<option value="off">Off</option>
|
||||
<option value="on">On</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider">Slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back" data-inline="true">Take me back</a>
|
||||
</div>
|
||||
|
||||
<div data-role="header" data-theme="d" data-position="fixed">
|
||||
<div style="margin:5px 10px;"><!-- To add a bit of spacing -->
|
||||
<label for="search" class="ui-hidden-accessible">Search:</label>
|
||||
<input type="search" name="password" id="search" placeholder="Search..." value="" />
|
||||
</div>
|
||||
</div><!-- /header -->
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
46
js/index.php
46
js/index.php
|
|
@ -1,46 +0,0 @@
|
|||
<?php
|
||||
$type = 'text/javascript';
|
||||
$files = array(
|
||||
'../LICENSE-INFO.txt',
|
||||
// note that define is only included here as a means
|
||||
// to revert to the pre async include, and should not be
|
||||
// used in other build methods
|
||||
'jquery.mobile.define.js',
|
||||
'jquery.ui.widget.js',
|
||||
'jquery.mobile.widget.js',
|
||||
'jquery.mobile.media.js',
|
||||
'jquery.mobile.support.js',
|
||||
'jquery.mobile.vmouse.js',
|
||||
'jquery.mobile.event.js',
|
||||
'jquery.mobile.hashchange.js',
|
||||
'jquery.mobile.page.js',
|
||||
'jquery.mobile.core.js',
|
||||
'jquery.mobile.navigation.js',
|
||||
'jquery.mobile.navigation.pushstate.js',
|
||||
'jquery.mobile.transition.js',
|
||||
'jquery.mobile.degradeInputs.js',
|
||||
'jquery.mobile.dialog.js',
|
||||
'jquery.mobile.page.sections.js',
|
||||
'jquery.mobile.collapsible.js',
|
||||
'jquery.mobile.collapsibleSet.js',
|
||||
'jquery.mobile.fieldContain.js',
|
||||
'jquery.mobile.grid.js',
|
||||
'jquery.mobile.navbar.js',
|
||||
'jquery.mobile.listview.js',
|
||||
'jquery.mobile.listview.filter.js',
|
||||
'jquery.mobile.nojs.js',
|
||||
'jquery.mobile.forms.checkboxradio.js',
|
||||
'jquery.mobile.forms.button.js',
|
||||
'jquery.mobile.forms.slider.js',
|
||||
'jquery.mobile.forms.textinput.js',
|
||||
'jquery.mobile.forms.select.custom.js',
|
||||
'jquery.mobile.forms.select.js',
|
||||
'jquery.mobile.buttonMarkup.js',
|
||||
'jquery.mobile.controlGroup.js',
|
||||
'jquery.mobile.links.js',
|
||||
'jquery.mobile.fixHeaderFooter.js',
|
||||
'jquery.mobile.fixHeaderFooter.native.js',
|
||||
'jquery.mobile.init.js'
|
||||
);
|
||||
|
||||
require_once('../combine.php');
|
||||
|
|
@ -38,10 +38,13 @@ define( [ "jquery.mobile.widget" ], function() {
|
|||
linkBindingEnabled: true,
|
||||
|
||||
// Set default page transition - 'none' for no transitions
|
||||
defaultPageTransition: "slide",
|
||||
defaultPageTransition: "fade",
|
||||
|
||||
// Set maximum window width for transitions to apply - 'false' for no limit
|
||||
maxTransitionWidth: false,
|
||||
|
||||
// Minimum scroll distance that will be remembered when returning to a page
|
||||
minScrollBack: 250,
|
||||
minScrollBack: 10,
|
||||
|
||||
// Set default dialog transition - 'none' for no transitions
|
||||
defaultDialogTransition: "pop",
|
||||
|
|
|
|||
|
|
@ -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-overlay-" + self.options.overlayTheme );
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -30,11 +30,34 @@ define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navig
|
|||
|
||||
// loading div which appears during Ajax requests
|
||||
// will not appear if $.mobile.loadingMessage is false
|
||||
var $loader = $( "<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>" );
|
||||
var $loader = $( "<div class='ui-loader '><span class='ui-icon ui-icon-loading'></span><h1></h1></div>" );
|
||||
|
||||
// For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
|
||||
function fakeFixLoader(){
|
||||
$loader
|
||||
.css({
|
||||
top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
|
||||
activeBtn.length && activeBtn.offset().top || 100
|
||||
});
|
||||
}
|
||||
|
||||
// check position of loader to see if it appears to be "fixed" to center
|
||||
// if not, use abs positioning
|
||||
function checkLoaderPosition(){
|
||||
if( $loader.offset().top < $window.scrollTop() ){
|
||||
$loader.addClass( "ui-loader-fakefix" );
|
||||
fakeFixLoader();
|
||||
$window
|
||||
.unbind( "scroll", checkLoaderPosition )
|
||||
.bind( "scroll", fakeFixLoader );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$.extend($.mobile, {
|
||||
// turn on/off page loading message.
|
||||
showPageLoadingMsg: function() {
|
||||
$html.addClass( "ui-loading" );
|
||||
if ( $.mobile.loadingMessage ) {
|
||||
var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
|
||||
|
||||
|
|
@ -42,19 +65,21 @@ define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navig
|
|||
.find( "h1" )
|
||||
.text( $.mobile.loadingMessage )
|
||||
.end()
|
||||
.appendTo( $.mobile.pageContainer )
|
||||
// position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
|
||||
.css({
|
||||
top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
|
||||
activeBtn.length && activeBtn.offset().top || 100
|
||||
});
|
||||
.appendTo( $.mobile.pageContainer );
|
||||
|
||||
checkLoaderPosition();
|
||||
$window.bind( "scroll", checkLoaderPosition );
|
||||
}
|
||||
|
||||
$html.addClass( "ui-loading" );
|
||||
},
|
||||
|
||||
hidePageLoadingMsg: function() {
|
||||
$html.removeClass( "ui-loading" );
|
||||
|
||||
if( $.mobile.loadingMessage ){
|
||||
$loader.removeClass( "ui-loader-fakefix" );
|
||||
}
|
||||
|
||||
$( window ).unbind( "scroll", fakeFixLoader );
|
||||
},
|
||||
|
||||
// find and enhance the pages in the dom and transition to the first page.
|
||||
|
|
|
|||
|
|
@ -11,7 +11,14 @@ define([
|
|||
'jquery.mobile.core',
|
||||
'order!jquery.mobile.navigation',
|
||||
'order!jquery.mobile.navigation.pushstate',
|
||||
'order!jquery.mobile.transition',
|
||||
'jquery.mobile.transition',
|
||||
'jquery.mobile.transition.pop',
|
||||
'jquery.mobile.transition.slide',
|
||||
'jquery.mobile.transition.slidedown',
|
||||
'jquery.mobile.transition.slideup',
|
||||
'jquery.mobile.transition.flip',
|
||||
'jquery.mobile.transition.flow',
|
||||
'jquery.mobile.transition.turn',
|
||||
'jquery.mobile.degradeInputs',
|
||||
'jquery.mobile.dialog',
|
||||
'jquery.mobile.page.sections',
|
||||
|
|
|
|||
|
|
@ -376,7 +376,7 @@ define( [
|
|||
|
||||
|
||||
//direct focus to the page title, or otherwise first focusable element
|
||||
function reFocus( page ) {
|
||||
$.mobile.focusPage = function ( page ) {
|
||||
var pageTitle = page.find( ".ui-title:eq(0)" );
|
||||
|
||||
if( pageTitle.length ) {
|
||||
|
|
@ -478,83 +478,29 @@ define( [
|
|||
// bind to scrollstop for the first page as "pagechange" won't be fired in that case
|
||||
getScrollElem().bind( "scrollstop", delayedSetLastScroll );
|
||||
|
||||
// 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(),
|
||||
touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
|
||||
toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ),
|
||||
screenHeight = getScreenHeight();
|
||||
|
||||
// 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 } );
|
||||
}
|
||||
|
||||
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.
|
||||
//call the handler immediately to kick-off the transition.
|
||||
var th = $.mobile.transitionHandlers[transition || "none"] || $.mobile.defaultTransitionHandler,
|
||||
var th = $.mobile.transitionHandlers[ transition || "default" ] || $.mobile.defaultTransitionHandler,
|
||||
promise = th( transition, reverse, toPage, fromPage );
|
||||
|
||||
promise.done(function() {
|
||||
//reset toPage height back
|
||||
if( !touchOverflow ){
|
||||
toPage.height( "" );
|
||||
}
|
||||
|
||||
// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
|
||||
if( !touchOverflow ){
|
||||
$.mobile.silentScroll( toScroll );
|
||||
}
|
||||
|
||||
//trigger show/hide events
|
||||
if( fromPage ) {
|
||||
if( !touchOverflow ){
|
||||
fromPage.height( "" );
|
||||
}
|
||||
|
||||
fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );
|
||||
}
|
||||
|
||||
|
|
@ -605,7 +551,7 @@ define( [
|
|||
//animation complete callback
|
||||
$.fn.animationComplete = function( callback ) {
|
||||
if( $.support.cssTransitions ) {
|
||||
return $( this ).one( 'webkitAnimationEnd', callback );
|
||||
return $( this ).one( 'webkitAnimationEnd animationend', callback );
|
||||
}
|
||||
else{
|
||||
// defer execution for consistency between webkit/non webkit
|
||||
|
|
@ -625,23 +571,7 @@ define( [
|
|||
|
||||
$.mobile.dialogHashKey = dialogHashKey;
|
||||
|
||||
//default non-animation transition handler
|
||||
$.mobile.noneTransitionHandler = function( name, reverse, $toPage, $fromPage ) {
|
||||
if ( $fromPage ) {
|
||||
$fromPage.removeClass( $.mobile.activePageClass );
|
||||
}
|
||||
$toPage.addClass( $.mobile.activePageClass );
|
||||
|
||||
return $.Deferred().resolve( name, reverse, $toPage, $fromPage ).promise();
|
||||
};
|
||||
|
||||
//default handler for unknown transitions
|
||||
$.mobile.defaultTransitionHandler = $.mobile.noneTransitionHandler;
|
||||
|
||||
//transition handler dictionary for 3rd party transitions
|
||||
$.mobile.transitionHandlers = {
|
||||
none: $.mobile.defaultTransitionHandler
|
||||
};
|
||||
|
||||
|
||||
//enable cross-domain page support
|
||||
$.mobile.allowCrossDomainPages = false;
|
||||
|
|
@ -1159,7 +1089,7 @@ define( [
|
|||
settings.reverse = settings.reverse || historyDir < 0;
|
||||
|
||||
transitionPages( toPage, fromPage, settings.transition, settings.reverse )
|
||||
.done(function() {
|
||||
.done(function( name, reverse, $to, $from, alreadyFocused ) {
|
||||
removeActiveLinkClass();
|
||||
|
||||
//if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
|
||||
|
|
@ -1174,7 +1104,9 @@ define( [
|
|||
// itself to avoid ie bug that reports offsetWidth as > 0 (core check for visibility)
|
||||
// despite visibility: hidden addresses issue #2965
|
||||
// https://github.com/jquery/jquery-mobile/issues/2965
|
||||
reFocus( toPage );
|
||||
if( !alreadyFocused ){
|
||||
$.mobile.focusPage( toPage );
|
||||
}
|
||||
|
||||
releasePageTransitionLock();
|
||||
|
||||
|
|
@ -1299,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", "#" );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1322,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')" ) ) {
|
||||
|
|
@ -1397,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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -27,6 +27,12 @@ function propExists( prop ) {
|
|||
}
|
||||
}
|
||||
|
||||
// Thanks to Modernizr src for this test idea
|
||||
function transform3dTest() {
|
||||
var prop = "transform-3d";
|
||||
return propExists( "perspective" ) || $.mobile.media( "(-" + vendors.join( "-" + prop + "),(-" ) + "-" + prop + "),(" + prop + ")" );
|
||||
}
|
||||
|
||||
// Test for dynamic-updating base tag support ( allows us to avoid href,src attr rewriting )
|
||||
function baseTagTest() {
|
||||
var fauxBase = location.protocol + "//" + location.host + location.pathname + "ui-dir/",
|
||||
|
|
@ -71,11 +77,16 @@ $.mobile.browser.ie = (function() {
|
|||
$.extend( $.support, {
|
||||
orientation: "orientation" in window && "onorientationchange" in window,
|
||||
touch: "ontouchend" in document,
|
||||
cssTransitions: "WebKitTransitionEvent" in window,
|
||||
cssTransitions: "WebKitTransitionEvent" in window || (function() {
|
||||
var div = document.createElement( "div" );
|
||||
div.setAttribute('style', '-moz-transition: height 100ms linear');
|
||||
return !!div.style.MozTransition;
|
||||
})(),
|
||||
pushState: "pushState" in history && "replaceState" in history,
|
||||
mediaquery: $.mobile.media( "only all" ),
|
||||
cssPseudoElement: !!propExists( "content" ),
|
||||
touchOverflow: !!propExists( "overflowScrolling" ),
|
||||
cssTransform3d: transform3dTest(),
|
||||
boxShadow: !!propExists( "boxShadow" ) && !bb,
|
||||
scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini,
|
||||
dynamicBaseTag: baseTagTest()
|
||||
|
|
|
|||
15
js/jquery.mobile.transition.flip.js
Normal file
15
js/jquery.mobile.transition.flip.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
* fallback transition for flip in non-3D supporting browsers (which tend to handle complex transitions poorly in general
|
||||
*/
|
||||
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
define( [ "jquery.mobile.transition" ], function() {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
$.mobile.transitionFallbacks.flip = "fade";
|
||||
|
||||
})( jQuery, this );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
15
js/jquery.mobile.transition.flow.js
Normal file
15
js/jquery.mobile.transition.flow.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
* fallback transition for flow in non-3D supporting browsers (which tend to handle complex transitions poorly in general
|
||||
*/
|
||||
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
define( [ "jquery.mobile.transition" ], function() {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
$.mobile.transitionFallbacks.flow = "fade";
|
||||
|
||||
})( jQuery, this );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
|
|
@ -3,55 +3,105 @@
|
|||
*/
|
||||
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
//>>description: Page change tranistions.
|
||||
//>>label: Page Transitions
|
||||
|
||||
// TODO the dependency defined here for transitions is to make sure
|
||||
// that the defaultTransitionHandler is defined _after_ navigation has been defined
|
||||
// This requires a rework/rethinking
|
||||
define( [ "jquery.mobile.core", "order!jquery.mobile.navigation" ], function() {
|
||||
define( [ "jquery.mobile.core" ], function() {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
function css3TransitionHandler( name, reverse, $to, $from ) {
|
||||
|
||||
function outInTransitionHandler( name, reverse, $to, $from ) {
|
||||
|
||||
// override name if there's no 3D transform support and a fallback is defined, or if not, to "none"
|
||||
if( name && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ name ] ){
|
||||
name = $.mobile.transitionFallbacks[ name ];
|
||||
}
|
||||
|
||||
var deferred = new $.Deferred(),
|
||||
reverseClass = reverse ? " reverse" : "",
|
||||
active = $.mobile.urlHistory.getActive(),
|
||||
touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
|
||||
toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ),
|
||||
screenHeight = $.mobile.getScreenHeight(),
|
||||
viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
|
||||
doneFunc = function() {
|
||||
maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
|
||||
none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
|
||||
doneOut = function() {
|
||||
|
||||
$to.add( $from ).removeClass( "out in reverse " + name );
|
||||
|
||||
if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
|
||||
$from.removeClass( $.mobile.activePageClass );
|
||||
if ( $from ) {
|
||||
$from
|
||||
.removeClass( $.mobile.activePageClass + " out in reverse " + name )
|
||||
.height( "" );
|
||||
}
|
||||
|
||||
$to.addClass( $.mobile.activePageClass );
|
||||
|
||||
if( !none ){
|
||||
$to.animationComplete( doneIn );
|
||||
}
|
||||
|
||||
$to.parent().removeClass( viewportClass );
|
||||
// Send focus to page as it is now display: block
|
||||
$.mobile.focusPage( $to );
|
||||
|
||||
if( touchOverflow && toScroll ){
|
||||
|
||||
deferred.resolve( name, reverse, $to, $from );
|
||||
//set page's scrollTop to remembered distance
|
||||
if( $to.is( ".ui-native-fixed" ) ){
|
||||
$to.find( ".ui-content" ).scrollTop( toScroll );
|
||||
}
|
||||
else{
|
||||
$to.scrollTop( toScroll );
|
||||
}
|
||||
}
|
||||
|
||||
// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
|
||||
if( !touchOverflow ){
|
||||
$to.height( screenHeight + toScroll );
|
||||
|
||||
$.mobile.silentScroll( toScroll );
|
||||
}
|
||||
|
||||
$to.addClass( name + " in" + reverseClass );
|
||||
|
||||
if( none ){
|
||||
doneIn();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
doneIn = function() {
|
||||
$to
|
||||
.removeClass( "out in reverse " + name )
|
||||
.parent().removeClass( viewportClass )
|
||||
.height( "" );
|
||||
|
||||
deferred.resolve( name, reverse, $to, $from, true );
|
||||
};
|
||||
|
||||
$to.animationComplete( doneFunc );
|
||||
|
||||
$to.parent().addClass( viewportClass );
|
||||
|
||||
if ( $from ) {
|
||||
$from.addClass( name + " out" + reverseClass );
|
||||
|
||||
$to
|
||||
.parent().addClass( viewportClass );
|
||||
|
||||
if ( $from && !none ) {
|
||||
$from
|
||||
.animationComplete( doneOut )
|
||||
.height( screenHeight + $(window ).scrollTop() )
|
||||
.addClass( name + " out" + reverseClass );
|
||||
}
|
||||
else {
|
||||
doneOut();
|
||||
}
|
||||
$to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
// Make our transition handler public.
|
||||
$.mobile.css3TransitionHandler = css3TransitionHandler;
|
||||
// Make our transition handler the public default.
|
||||
$.mobile.defaultTransitionHandler = outInTransitionHandler;
|
||||
|
||||
// If the default transition handler is the 'none' handler, replace it with our handler.
|
||||
if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) {
|
||||
$.mobile.defaultTransitionHandler = css3TransitionHandler;
|
||||
}
|
||||
//transition handler dictionary for 3rd party transitions
|
||||
$.mobile.transitionHandlers = {
|
||||
"default": $.mobile.defaultTransitionHandler
|
||||
};
|
||||
|
||||
$.mobile.transitionFallbacks = {};
|
||||
|
||||
})( jQuery, this );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
15
js/jquery.mobile.transition.pop.js
Normal file
15
js/jquery.mobile.transition.pop.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
* fallback transition for pop in non-3D supporting browsers (which tend to handle complex transitions poorly in general
|
||||
*/
|
||||
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
define( [ "jquery.mobile.transition" ], function() {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
$.mobile.transitionFallbacks.pop = "fade";
|
||||
|
||||
})( jQuery, this );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
15
js/jquery.mobile.transition.slide.js
Normal file
15
js/jquery.mobile.transition.slide.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
* fallback transition for slide in non-3D supporting browsers (which tend to handle complex transitions poorly in general
|
||||
*/
|
||||
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
define( [ "jquery.mobile.transition" ], function() {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
$.mobile.transitionFallbacks.slide = "fade";
|
||||
|
||||
})( jQuery, this );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
15
js/jquery.mobile.transition.slidedown.js
Normal file
15
js/jquery.mobile.transition.slidedown.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
* fallback transition for slidedown in non-3D supporting browsers (which tend to handle complex transitions poorly in general
|
||||
*/
|
||||
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
define( [ "jquery.mobile.transition" ], function() {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
$.mobile.transitionFallbacks.slidedown = "fade";
|
||||
|
||||
})( jQuery, this );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
15
js/jquery.mobile.transition.slideup.js
Normal file
15
js/jquery.mobile.transition.slideup.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
* fallback transition for slideup in non-3D supporting browsers (which tend to handle complex transitions poorly in general
|
||||
*/
|
||||
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
define( [ "jquery.mobile.transition" ], function() {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
$.mobile.transitionFallbacks.slideup = "fade";
|
||||
|
||||
})( jQuery, this );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
15
js/jquery.mobile.transition.turn.js
Normal file
15
js/jquery.mobile.transition.turn.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
* fallback transition for turn in non-3D supporting browsers (which tend to handle complex transitions poorly in general
|
||||
*/
|
||||
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
define( [ "jquery.mobile.transition" ], function() {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
$.mobile.transitionFallbacks.turn = "fade";
|
||||
|
||||
})( jQuery, this );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
|
|
@ -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,29 +19,32 @@
|
|||
isTransitioningIn = function(page){
|
||||
return page.hasClass("in") && isTransitioning(page);
|
||||
},
|
||||
|
||||
disableMaxTransWidth = function(){
|
||||
$.mobile.maxTransitionWidth = false;
|
||||
},
|
||||
|
||||
enableMaxTransWidth = function(){
|
||||
$.mobile.maxTransitionWidth = defaultMaxTrans;
|
||||
},
|
||||
|
||||
//animationComplete callback queue
|
||||
callbackQueue = [],
|
||||
fromQueue = [],
|
||||
toQueue = [],
|
||||
|
||||
finishPageTransition = function(){
|
||||
callbackQueue.pop()();
|
||||
resetQueues = function(){
|
||||
fromQueue = [];
|
||||
toQueue = [];
|
||||
},
|
||||
|
||||
clearPageTransitionStack = function(){
|
||||
stop();
|
||||
var checkTransitionStack = function(){
|
||||
if(callbackQueue.length>0) {
|
||||
setTimeout(function(){
|
||||
finishPageTransition();
|
||||
checkTransitionStack();
|
||||
},0);
|
||||
}
|
||||
else {
|
||||
start();
|
||||
}
|
||||
};
|
||||
checkTransitionStack();
|
||||
|
||||
onFromComplete = function( f ){
|
||||
fromQueue.push( f );
|
||||
},
|
||||
|
||||
onToComplete = function( f ){
|
||||
toQueue.push( f );
|
||||
},
|
||||
|
||||
|
||||
//wipe all urls
|
||||
clearUrlHistory = function(){
|
||||
|
|
@ -51,101 +55,167 @@
|
|||
|
||||
module('jquery.mobile.navigation.js', {
|
||||
setup: function(){
|
||||
//stub to prevent class removal
|
||||
$.fn.animationComplete = function(callback){
|
||||
callbackQueue.unshift(callback);
|
||||
// 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(){
|
||||
var queue = $(this).is(".out") ? fromQueue : toQueue;
|
||||
for( var i = 0, il = queue.length; i < il; i++ ){
|
||||
queue.pop()( this );
|
||||
}
|
||||
callback();
|
||||
});
|
||||
return this;
|
||||
};
|
||||
|
||||
clearPageTransitionStack();
|
||||
resetQueues();
|
||||
clearUrlHistory();
|
||||
},
|
||||
|
||||
teardown: function(){
|
||||
// unmock animation complete
|
||||
$.fn.animationComplete = animationCompleteFn;
|
||||
enableMaxTransWidth();
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
NOTES:
|
||||
Our default transition handler now has either one or two animationComplete calls - two if there are two pages in play (from and to)
|
||||
To is required, so each async function must call start() onToComplete, not onFromComplete.
|
||||
*/
|
||||
|
||||
|
||||
test( "changePage applys perspective class to mobile viewport for flip", function(){
|
||||
asyncTest( "changePage applies perspective class to mobile viewport for flip", function(){
|
||||
expect(1);
|
||||
|
||||
onToComplete( function( el ){
|
||||
ok($("body").hasClass(perspective), "has perspective class");
|
||||
start();
|
||||
} );
|
||||
|
||||
$("#foo > a").click();
|
||||
|
||||
ok($("body").hasClass(perspective), "has perspective class");
|
||||
});
|
||||
|
||||
test( "changePage does not apply perspective class to mobile viewport for transitions other than flip", function(){
|
||||
|
||||
asyncTest( "changePage does not apply perspective class to mobile viewport for transitions other than flip", function(){
|
||||
expect(1);
|
||||
|
||||
onToComplete( function( el ){
|
||||
ok(!$("body").hasClass(perspective), "doesn't have perspective class");
|
||||
start();
|
||||
} );
|
||||
|
||||
$("#bar > a").click();
|
||||
|
||||
ok(!$("body").hasClass(perspective), "doesn't have perspective class");
|
||||
});
|
||||
|
||||
test( "changePage applys transition class to mobile viewport for default transition", function(){
|
||||
|
||||
asyncTest( "changePage applies transition class to mobile viewport for default transition", function(){
|
||||
expect(1);
|
||||
|
||||
onToComplete( function( el ){
|
||||
ok($("body").hasClass(transitioning), "has transitioning class");
|
||||
start();
|
||||
} );
|
||||
|
||||
$("#baz > a").click();
|
||||
|
||||
ok($("body").hasClass(transitioning), "has transitioning class");
|
||||
});
|
||||
|
||||
test( "explicit transition preferred for page navigation reversal (ie back)", function(){
|
||||
$("#fade-trans > a").click();
|
||||
stop();
|
||||
setTimeout(function(){
|
||||
finishPageTransition();
|
||||
|
||||
asyncTest( "explicit transition preferred for page navigation reversal (ie back)", function(){
|
||||
expect( 1 );
|
||||
|
||||
onToComplete(function(){
|
||||
$("#flip-trans > a").click();
|
||||
setTimeout(function(){
|
||||
finishPageTransition();
|
||||
onToComplete(function(){
|
||||
$("#fade-trans > a").click();
|
||||
setTimeout(function(){
|
||||
onToComplete(function(){
|
||||
ok($("#flip-trans").hasClass("fade"), "has fade class");
|
||||
start();
|
||||
},0);
|
||||
},0);
|
||||
},0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$("#fade-trans > a").click();
|
||||
});
|
||||
|
||||
test( "default transition is slide", function(){
|
||||
$("#default-trans > a").click();
|
||||
stop();
|
||||
setTimeout(function(){
|
||||
ok($("#no-trans").hasClass("slide"), "has slide class");
|
||||
asyncTest( "default transition is fade", function(){
|
||||
onToComplete(function(){
|
||||
ok($("#no-trans").hasClass("fade"), "has fade class");
|
||||
start();
|
||||
},0);
|
||||
})
|
||||
|
||||
$("#default-trans > a").click();
|
||||
});
|
||||
|
||||
test( "changePage queues requests", function(){
|
||||
asyncTest( "changePage queues requests", function(){
|
||||
expect(4)
|
||||
var firstPage = $("#foo"),
|
||||
secondPage = $("#bar");
|
||||
|
||||
$.mobile.changePage(firstPage);
|
||||
$.mobile.changePage(secondPage);
|
||||
|
||||
stop();
|
||||
setTimeout(function(){
|
||||
onToComplete(function(){
|
||||
ok(isTransitioningIn(firstPage), "first page begins transition");
|
||||
ok(!isTransitioningIn(secondPage), "second page doesn't transition yet");
|
||||
|
||||
finishPageTransition();
|
||||
|
||||
setTimeout(function(){
|
||||
onToComplete(function(){
|
||||
ok(!isTransitioningIn(firstPage), "first page transition should be complete");
|
||||
ok(isTransitioningIn(secondPage), "second page should begin transitioning");
|
||||
start();
|
||||
},0);
|
||||
},0);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test( "default transition is pop for a dialog", function(){
|
||||
asyncTest( "default transition is pop for a dialog", function(){
|
||||
expect( 1 );
|
||||
stop();
|
||||
setTimeout(function(){
|
||||
$("#default-trans-dialog > a").click();
|
||||
|
||||
ok($("#no-trans-dialog").hasClass("pop"), "expected the pop class to be present but instead was " + $("#no-trans-dialog").attr('class'));
|
||||
|
||||
onToComplete(function(){
|
||||
ok($("#no-trans-dialog").hasClass("pop"), "has pop class" );
|
||||
start();
|
||||
}, 900);
|
||||
});
|
||||
|
||||
$("#default-trans-dialog > a").click();
|
||||
});
|
||||
|
||||
test( "animationComplete return value", function(){
|
||||
$.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