libs/js/jquery-mobile-1.2.0/docs/pages/page-transitions-flash-workaround.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Transitions</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../js/jquery.js"></script>
  11         <script src="../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13
  14     <style type="text/css" media="screen">
  15         .ui-page { -webkit-backface-visibility: hidden; }
  16     </style>
  17
  18 </head>
  19 <body>
  20
  21         <div data-role="page" class="type-interior">
  22
  23                 <div data-role="header" data-theme="f">
  24                 <h1>Transitions</h1>
  25                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  26                 <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  27         </div><!-- /header -->
  28
  29         <div data-role="content">
  30                 <div class="content-primary">
  31                 <h2>Page transitions with workaround</h2>
  32
  33                 <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>
  34
  35                         <style>
  36                                 table { width:100%; border-bottom:1px solid #ccc; border-spacing: 0; }
  37                                 th { text-align:left; }
  38                                 th h3 { margin:.6em 0; }
  39                                 th, td { vertical-align:top; border-top:1px solid #ccc; padding: 1px 3px; }
  40                                 td .ui-btn { margin:.4em 0 .5em 0; }
  41                                 td .ui-btn-inner { padding: .4em 15px; }
  42                         </style>
  43
  44                 <table margin="0">
  45                         <tr>
  46                                 <th><h3>fade</h3></th>
  47                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
  48                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
  49                         </tr>
  50                         <tr>
  51                                 <th><h3>pop</h3></th>
  52                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
  53                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
  54                         </tr>
  55                         <tr>
  56                                 <th><h3>flip</h3></th>
  57                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
  58                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
  59                         </tr>
  60                         <tr>
  61                                 <th><h3>turn</h3></th>
  62                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
  63                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
  64                         </tr>
  65                         <tr>
  66                                 <th><h3>flow</h3></th>
  67                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
  68                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
  69                         </tr>
  70                         <tr>
  71                                 <th><h3>slidefade</h3></th>
  72                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
  73                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
  74                         </tr>
  75                         <tr>
  76                                 <th><h3>slide</h3></th>
  77                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
  78                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
  79                         </tr>
  80                         <tr>
  81                                 <th><h3>slideup</h3></th>
  82                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
  83                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
  84                         </tr>
  85                         <tr>
  86                                 <th><h3>slidedown</h3></th>
  87                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
  88                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
  89                         </tr>
  90                         <tr>
  91                                 <th><h3>none</h3></th>
  92                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
  93                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="none" data-inline="true">page</a></td>
  94                         </tr>
  95                 </table>
  96
  97                                 </div><!--/content-primary -->
  98
  99                                 <div class="content-secondary">
 100
 101                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 102
 103                                                         <h3>More in this section</h3>
 104
 105                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 106                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
 107                                                                 <li><a href="page-anatomy.html">Anatomy of a page</a></li>
 108                                                                 <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
 109                                                                 <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
 110                                                                 <li><a href="page-titles.html">Page titles</a></li>
 111                                                                 <li><a href="page-links.html">Linking pages</a></li>
 112                                                                 <li data-theme="a"><a href="page-transitions.html">Page transitions</a></li>
 113                                                                 <li><a href="loader.html">Page loading widget</a></li>
 114                                                                 <li><a href="dialog/index.html">Dialogs</a></li>
 115                                                                 <li><a href="popup/index.html">Popups</a></li>
 116                                                                 <li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
 117                                                                 <li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
 118                                                                 <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
 119                                                                 <li><a href="page-scripting.html">Scripting pages</a></li>
 120                                                                 <li><a href="phonegap.html">PhoneGap apps</a></li>
 121                                                                 <li><a href="touchoverflow.html">touchOverflow feature</a></li>
 122                                                                 <li><a href="pages-themes.html">Theming pages</a></li>
 123                                                         </ul>
 124                                         </div>
 125                                 </div>
 126
 127                         </div><!-- /content -->
 128
 129                         <div data-role="footer" class="footer-docs" data-theme="c">
 130                                         <p class="jqm-version"></p>
 131                                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 132                         </div>
 133
 134                         </div><!-- /page -->
 135
 136
 137                         </body>
 138                         </html>