PageRenderTime 64ms CodeModel.GetById 36ms RepoModel.GetById 0ms app.codeStats 0ms

/demos/toolbar-fixed-persistent/page-c.php

https://github.com/ampfm/jquery-mobile
PHP | 141 lines | 125 code | 9 blank | 7 comment | 1 complexity | 838384b7db88ad223318b9453c59948c MD5 | raw file
  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>Persistent toolbars - jQuery Mobile Demos</title>
  7. <link rel="shortcut icon" href="../favicon.ico">
  8. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
  9. <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
  10. <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
  11. <script src="../../external/jquery/jquery.js"></script>
  12. <script src="../_assets/js/"></script>
  13. <script src="../../js/"></script>
  14. <script>
  15. $(function() {
  16. $( "[data-role='navbar']" ).navbar();
  17. $( "[data-role='toolbar']" ).toolbar();
  18. });
  19. // Update the contents of the toolbars
  20. $( document ).on( "pagecontainerchange", function() {
  21. // Each of the four pages in this demo has a data-title attribute
  22. // which value is equal to the text of the nav button
  23. // For example, on first page: <div data-role="page" data-title="Info">
  24. var current = $( ".ui-page-active" ).jqmData( "title" );
  25. // Change the heading
  26. $( "[data-type='header'] h1" ).text( current );
  27. // Remove active class from nav buttons
  28. $( "[data-role='navbar'] a.ui-button-active" ).removeClass( "ui-button-active" );
  29. // Add active class to current nav button
  30. $( "[data-role='navbar'] a" ).each(function() {
  31. if ( $( this ).text() === current ) {
  32. $( this ).addClass( "ui-button-active" );
  33. }
  34. });
  35. });
  36. </script>
  37. </head>
  38. <body>
  39. <div data-role="toolbar" data-type="header" data-position="fixed" data-theme="a">
  40. <a href="../toolbar/" data-rel="back" class="ui-button ui-toolbar-header-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only">Back <span class="ui-icon ui-icon-caret-l"></span></a>
  41. <h1>Albums</h1>
  42. </div><!-- /header -->
  43. <div data-role="page" data-title="Albums">
  44. <div class="ui-content" role="main">
  45. <ul data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="false">
  46. <li><a href="#">
  47. <img src="../_assets/img/album-bb.jpg">
  48. <h2>Broken Bells</h2>
  49. <p>Broken Bells</p></a>
  50. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  51. </li>
  52. <li><a href="#">
  53. <img src="../_assets/img/album-hc.jpg">
  54. <h2>Warning</h2>
  55. <p>Hot Chip</p></a>
  56. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  57. </li>
  58. <li><a href="#">
  59. <img src="../_assets/img/album-p.jpg">
  60. <h2>Wolfgang Amadeus Phoenix</h2>
  61. <p>Phoenix</p></a>
  62. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  63. </li>
  64. <li><a href="#">
  65. <img src="../_assets/img/album-ok.jpg">
  66. <h3>Of The Blue Colour Of The Sky</h3>
  67. <p>Ok Go</p>
  68. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  69. </a></li>
  70. <li><a href="#">
  71. <img src="../_assets/img/album-ws.jpg">
  72. <h3>Elephant</h3>
  73. <p>The White Stripes</p>
  74. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  75. </a></li>
  76. <li><a href="#">
  77. <img src="../_assets/img/album-rh.jpg">
  78. <h3>Kid A</h3>
  79. <p>Radiohead</p>
  80. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  81. </a></li>
  82. <li><a href="#">
  83. <img src="../_assets/img/album-xx.jpg">
  84. <h3>XX</h3>
  85. <p>XX</p>
  86. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  87. </a></li>
  88. <li><a href="#">
  89. <img src="../_assets/img/album-mg.jpg">
  90. <h3>Congratulations</h3>
  91. <p>MGMT</p>
  92. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  93. </a></li>
  94. <li><a href="#">
  95. <img src="../_assets/img/album-ag.jpg">
  96. <h3>Ashes Grammar</h3>
  97. <p>A Sunny Day in Glasgow</p>
  98. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  99. </a></li>
  100. <li><a href="index.php">
  101. <img src="../_assets/img/album-k.jpg">
  102. <h3>Hot Fuss</h3>
  103. <p>Killers</p>
  104. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  105. </a></li>
  106. <li><a href="#">
  107. <img src="../_assets/img/album-af.jpg">
  108. <h3>The Suburbs</h3>
  109. <p>Arcade Fire</p>
  110. <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  111. </a></li>
  112. </ul>
  113. <div data-role="popup" id="purchase" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
  114. <h3>Purchase Album?</h3>
  115. <p>Your download will begin immediately on your mobile device when you purchase.</p>
  116. <a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Buy: $10.99 <span class="ui-icon ui-icon-check"></span></a>
  117. <a href="#" class="ui-button ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a>
  118. </div>
  119. </div><!-- /content -->
  120. </div><!-- /page -->
  121. <div data-role="toolbar" data-type="footer" data-position="fixed" data-theme="a">
  122. <div data-role="navbar">
  123. <ul>
  124. <li><a href="index.php" data-prefetch="true" data-transition="fade">Info</a></li>
  125. <li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
  126. <li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
  127. <li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
  128. </ul>
  129. </div><!-- /navbar -->
  130. </div><!-- /footer -->
  131. </body>
  132. </html>