/demos/widgets/loader/index.php

https://bitbucket.org/zachjarvinen/jquery-mobile · PHP · 97 lines · 81 code · 16 blank · 0 comment · 6 complexity · 1ff8dea71f5d1609c108f115666dee81 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>Loader - jQuery Mobile Demos</title>
    7. 

  7. 	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css">
    8. 

  8. 	<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
    9. 

  9. 	<link rel="shortcut icon" href="../../favicon.ico">
    10. 

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

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

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

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

  14. 	<script>
    15. 

  15. 		$( document ).on( "click", ".show-page-loading-msg", function() {
    16. 

  16. 			var $this = $( this ),
    17. 

  17. 				theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
    18. 

  18. 				msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
    19. 

  19. 				textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
    20. 

  20. 				textonly = !!$this.jqmData( "textonly" );
    21. 

  21. 				html = $this.jqmData( "html" ) || "";
    22. 

  22. 			$.mobile.loading( "show", {
    23. 

  23. 					text: msgText,
    24. 

  24. 					textVisible: textVisible,
    25. 

  25. 					theme: theme,
    26. 

  26. 					textonly: textonly,
    27. 

  27. 					html: html
    28. 

  28. 			});
    29. 

  29. 		})
    30. 

  30. 		.on( "click", ".hide-page-loading-msg", function() {
    31. 

  31. 			$.mobile.loading( "hide" );
    32. 

  32. 		});
    33. 

  33. 	</script>
    34. 

  34. </head>
    35. 

  35. <body>
    36. 

  36. <div data-role="page" class="jqm-demos" data-quicklinks="true">
    37. 

  37. 

  38. 	<div data-role="header" class="jqm-header">
    39. 

  39. 		<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
    40. 

  40. 		<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
    41. 

  41. 		<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
    42. 

  42.         <?php include( '../../search.php' ); ?>
    43. 

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

  44. 

  45. 	<div data-role="content" class="jqm-content">
    46. 

  46. 

  47. 			<h1>Loader <a href="http://api.jquerymobile.com/page-loading/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>
    48. 

  48. 

  49. 			<p class="jqm-intro">A small loading overlay displayed when jQuery Mobile loads in content via AJAX, or for use in custom notifications.
    50. 

  50. 			</p>
    51. 

  51. 

  52. 			<h2>Standard loader</h2>
    53. 

  53. 			<p>The loader overlay can be icon only, text only or both. These demos rely on a custom JavaScript, view the source to see how it works.</p>
    54. 

  54. 			<div data-demo-html="true" data-demo-js="true">
    55. 

  55. 				<button class="show-page-loading-msg" data-theme="d" data-textonly="false" data-textvisible="false" data-msgtext="" data-inline="true">Icon (default)</button>
    56. 

  56. 				<button class="show-page-loading-msg" data-theme="d" data-textonly="false" data-textvisible="true" data-msgtext="" data-inline="true">Icon + text</button>
    57. 

  57. 				<button class="show-page-loading-msg" data-theme="d" data-textonly="true" data-textvisible="true" data-msgtext="Text only loader" data-inline="true">Text only</button>
    58. 

  58. 				<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>
    59. 

  59. 

  60. 			</div><!--/demo-html -->
    61. 

  61. 

  62. 			<h2>Custom HTML</h2>
    63. 

  63. 			<p>Any HTML can be added to the loader overlay</p>
    64. 

  64. 			<div data-demo-html="true" data-demo-js="true">
    65. 

  65. 				<button class="show-page-loading-msg" data-theme="c" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-inline="true"  data-html="<span class='ui-bar ui-shadow ui-overlay-d ui-corner-all'><img src='../../_assets/img/jquery-logo.png' /><h2>is loading for you ...</h2></span>" data-iconpos="right">Custom HTML</button>
    66. 

  66. 				<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>
    67. 

  67. 

  68. 			</div><!--/demo-html -->
    69. 

  69. 

  70. 			<h2>Theme</h2>
    71. 

  71. 

  72. 			<p>The theme swatch can be set on the loader overlay. </p>
    73. 

  73. 			<div data-demo-html="true" data-demo-js="true">
    74. 

  74. 				<button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme a" data-inline="true">A</button>
    75. 

  75. 				<button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme b" data-inline="true">B</button>
    76. 

  76. 				<button class="show-page-loading-msg" data-theme="c" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme c" data-inline="true">C</button>
    77. 

  77. 				<button class="show-page-loading-msg" data-theme="d" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme d" data-inline="true">D</button>
    78. 

  78. 				<button class="show-page-loading-msg" data-theme="e" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme e" data-inline="true">E</button>
    79. 

  79. 				<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>
    80. 

  80. 			</div><!--/demo-html -->
    81. 

  81. 

  82. 		<div data-demo-html="true">
    83. 

  83. 

  84.       	</div><!-- /data-demo -->
    85. 

  85. 

  86. 		</div><!-- /content -->
    87. 

  87. 

  88. 		<div data-role="footer" class="jqm-footer">
    89. 

  89. 			<p class="jqm-version"></p>
    90. 

  90. 			<p>Copyright 2013 The jQuery Foundation</p>
    91. 

  91. 		</div><!-- /footer -->
    92. 

  92. 

  93. 	<?php include( '../../global-nav.php' ); ?>
    94. 

  94. 

  95. 	</div><!-- /page -->
    96. 

  96. 	</body>
    97. 

  97. 	</html>
    98.