libs/js/jquery-mobile-1.1.0/tests/functional/orientation.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: Orientation</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
   9         <style>
  10
  11                 #orientationText {
  12                         font-size: x-large;
  13                         font-weight: bold;
  14                         margin: 1em;
  15                 }
  16
  17         </style>
  18         <script src="../../external/requirejs/require.js"></script>
  19         <script src="../../js/jquery.tag.inserter.js"></script>
  20         <script>
  21                 require( {
  22                         baseUrl: "../../js"
  23                 } )( [ "jquery", "jquery.mobile" ], function( $ ) {
  24                         $( document ).one( "pageinit", function() {
  25                                 function updateOrientation()
  26                                 {
  27                                         $( "#orientationText" ).text( $.event.special.orientationchange.orientation() );
  28                                 }
  29
  30                                 updateOrientation();
  31                                 $( window ).bind( $.support.orientation ? "orientationchange" : "resize", updateOrientation);
  32                         });
  33                 });
  34     </script>
  35 </head>
  36
  37 <body>
  38 <div data-role="page">
  39         <div data-role="header"><h1>Orientation Test</h1></div>
  40         <div data-role="content">
  41         <p>The current device orientation is displayed below. It should *ALWAYS* be correct!</p>
  42         <div id="orientationText">Orientation Not Supported!</div>
  43     </div>
  44 </div>
  45 </body>
  46 </html>