PageRenderTime 103ms CodeModel.GetById 34ms 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. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 

  6. 	<title>Persistent toolbars - jQuery Mobile Demos</title>
    7. 

  7. 	<link rel="shortcut icon" href="../favicon.ico">
    8. 

  8.     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    9. 

  9. 	<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
    10. 

  10. 	<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
    11. 

  11. 	<script src="../../external/jquery/jquery.js"></script>
    12. 

  12. 	<script src="../_assets/js/"></script>
    13. 

  13. 	<script src="../../js/"></script>
    14. 

  14. 	<script>
    15. 

  15. 		$(function() {
    16. 

  16. 			$( "[data-role='navbar']" ).navbar();
    17. 

  17. 			$( "[data-role='toolbar']" ).toolbar();
    18. 

  18. 		});
    19. 

  19. 		// Update the contents of the toolbars
    20. 

  20. 		$( document ).on( "pagecontainerchange", function() {
    21. 

  21. 			// Each of the four pages in this demo has a data-title attribute
    22. 

  22. 			// which value is equal to the text of the nav button
    23. 

  23. 			// For example, on first page: <div data-role="page" data-title="Info">
    24. 

  24. 			var current = $( ".ui-page-active" ).jqmData( "title" );
    25. 

  25. 			// Change the heading
    26. 

  26. 			$( "[data-type='header'] h1" ).text( current );
    27. 

  27. 			// Remove active class from nav buttons
    28. 

  28. 			$( "[data-role='navbar'] a.ui-button-active" ).removeClass( "ui-button-active" );
    29. 

  29. 			// Add active class to current nav button
    30. 

  30. 			$( "[data-role='navbar'] a" ).each(function() {
    31. 

  31. 				if ( $( this ).text() === current ) {
    32. 

  32. 					$( this ).addClass( "ui-button-active" );
    33. 

  33. 				}
    34. 

  34. 			});
    35. 

  35. 		});
    36. 

  36. 	</script>
    37. 

  37. </head>
    38. 

  38. <body>
    39. 

  39.     <div data-role="toolbar" data-type="header" data-position="fixed" data-theme="a">
    40. 

  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. 

  41.         <h1>Albums</h1>
    42. 

  42.     </div><!-- /header -->
    43. 

  43. 

  44. <div data-role="page" data-title="Albums">
    45. 

  45. 

  46.     <div class="ui-content" role="main">
    47. 

  47. 

  48. 			<ul data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="false">
    49. 

  49. 				<li><a href="#">
    50. 

  50. 					<img src="../_assets/img/album-bb.jpg">
    51. 

  51. 				<h2>Broken Bells</h2>
    52. 

  52. 				<p>Broken Bells</p></a>
    53. 

  53. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    54. 

  54. 				</li>
    55. 

  55. 				<li><a href="#">
    56. 

  56. 					<img src="../_assets/img/album-hc.jpg">
    57. 

  57. 				<h2>Warning</h2>
    58. 

  58. 				<p>Hot Chip</p></a>
    59. 

  59. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    60. 

  60. 				</li>
    61. 

  61. 				<li><a href="#">
    62. 

  62. 					<img src="../_assets/img/album-p.jpg">
    63. 

  63. 				<h2>Wolfgang Amadeus Phoenix</h2>
    64. 

  64. 				<p>Phoenix</p></a>
    65. 

  65. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    66. 

  66. 				</li>
    67. 

  67. 				<li><a href="#">
    68. 

  68. 					<img src="../_assets/img/album-ok.jpg">
    69. 

  69. 					<h3>Of The Blue Colour Of The Sky</h3>
    70. 

  70. 				<p>Ok Go</p>
    71. 

  71. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    72. 

  72. 				</a></li>
    73. 

  73. 				<li><a href="#">
    74. 

  74. 					<img src="../_assets/img/album-ws.jpg">
    75. 

  75. 					<h3>Elephant</h3>
    76. 

  76. 				<p>The White Stripes</p>
    77. 

  77. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    78. 

  78. 				</a></li>
    79. 

  79. 				<li><a href="#">
    80. 

  80. 					<img src="../_assets/img/album-rh.jpg">
    81. 

  81. 					<h3>Kid A</h3>
    82. 

  82. 				<p>Radiohead</p>
    83. 

  83. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    84. 

  84. 				</a></li>
    85. 

  85. 				<li><a href="#">
    86. 

  86. 					<img src="../_assets/img/album-xx.jpg">
    87. 

  87. 					<h3>XX</h3>
    88. 

  88. 				<p>XX</p>
    89. 

  89. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    90. 

  90. 				</a></li>
    91. 

  91. 				<li><a href="#">
    92. 

  92. 					<img src="../_assets/img/album-mg.jpg">
    93. 

  93. 					<h3>Congratulations</h3>
    94. 

  94. 				<p>MGMT</p>
    95. 

  95. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    96. 

  96. 				</a></li>
    97. 

  97. 				<li><a href="#">
    98. 

  98. 					<img src="../_assets/img/album-ag.jpg">
    99. 

  99. 					<h3>Ashes Grammar</h3>
    100. 

  100. 				<p>A Sunny Day in Glasgow</p>
    101. 

  101. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    102. 

  102. 				</a></li>
    103. 

  103. 

  104. 				<li><a href="index.php">
    105. 

  105. 					<img src="../_assets/img/album-k.jpg">
    106. 

  106. 					<h3>Hot Fuss</h3>
    107. 

  107. 				<p>Killers</p>
    108. 

  108. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    109. 

  109. 				</a></li>
    110. 

  110. 				<li><a href="#">
    111. 

  111. 					<img src="../_assets/img/album-af.jpg">
    112. 

  112. 					<h3>The Suburbs</h3>
    113. 

  113. 				<p>Arcade Fire</p>
    114. 

  114. 					<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    115. 

  115. 				</a></li>
    116. 

  116. 			</ul>
    117. 

  117. 

  118. 			<div data-role="popup" id="purchase" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
    119. 

  119. 				<h3>Purchase Album?</h3>
    120. 

  120. 				<p>Your download will begin immediately on your mobile device when you purchase.</p>
    121. 

  121. 				<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>
    122. 

  122. 				<a href="#" class="ui-button ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a>
    123. 

  123. 			</div>
    124. 

  124. 

  125. 		</div><!-- /content -->
    126. 

  126. 

  127. 	</div><!-- /page -->
    128. 

  128. 

  129. 	<div data-role="toolbar" data-type="footer" data-position="fixed" data-theme="a">
    130. 

  130. 		<div data-role="navbar">
    131. 

  131. 			<ul>
    132. 

  132. 				<li><a href="index.php" data-prefetch="true" data-transition="fade">Info</a></li>
    133. 

  133. 				<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
    134. 

  134. 				<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
    135. 

  135. 				<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
    136. 

  136. 			</ul>
    137. 

  137. 		</div><!-- /navbar -->
    138. 

  138. 	</div><!-- /footer -->
    139. 

  139. 

  140. </body>
    141. 

  141. </html>
    142. 

  142.