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

/demos/slider/index.php

https://github.com/lialex100/jquery-mobile
PHP | 173 lines | 138 code | 34 blank | 1 comment | 0 complexity | d56cade4de305fd534ce200c1dcab732 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>Slider - 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.     <style id="full-width-slider">
    15. 

  15.         /* Hide the number input */
    16. 

  16.         .full-width-slider input {
    17. 

  17.             display: none;
    18. 

  18.         }
    19. 

  19.         .full-width-slider .ui-slider-track {
    20. 

  20.             margin-left: 15px;
    21. 

  21.         }
    22. 

  22.     </style>
    23. 

  23. 	<script id="dynamic-slider">
    24. 

  24. $( document ).on( "pagecreate", function() {
    25. 

  25. 	$( "<input type='number' data-type='range' min='0' max='100' step='1' value='17'>" )
    26. 

  26. 		.appendTo( "#dynamic-slider-form" )
    27. 

  27. 		.slider()
    28. 

  28. 		.textinput()
    29. 

  29. });
    30. 

  30. 	</script>
    31. 

  31. </head>
    32. 

  32. <body>
    33. 

  33. <div data-role="page" class="jqm-demos" data-quicklinks="true">
    34. 

  34. 

  35. 	<div data-role="toolbar" data-type="header" class="jqm-header">
    36. 

  36. 		<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquerymobile-logo.png" alt="jQuery Mobile"></a></h2>
    37. 

  37. 		<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
    38. 

  38. 		<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
    39. 

  39. 		<div class="jqm-banner"><h3>Version <span class="jqm-version"></span> Demos</h3></div>
    40. 

  40. 	</div><!-- /header -->
    41. 

  41. 

  42. 	<div role="main" class="ui-content jqm-content">
    43. 

  43. 

  44. 		<h1>Slider</h1>
    45. 

  45. 

  46. 		<a href="http://api.jquerymobile.com/slider/" class="jqm-api-docs-link ui-nodisc-icon ui-alt-icon" title="Visit the API Documentation" target="_blank">API Documentation <span class="ui-icon ui-icon-action"></span></a>
    47. 

  47. 

  48. 		<p>Sliders are used to enter numeric values along a continuum and can also be dual handle <a href="../rangeslider/">range sliders</a>.
    49. 

  49. 			</p>
    50. 

  50. 

  51.                 <h2>Basic slider</h2>
    52. 

  52. 

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

  54. 				<form>
    55. 

  55.                     <label for="slider-1">Slider:</label>
    56. 

  56.                     <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50">
    57. 

  57. 				</form>
    58. 

  58.                 </div><!-- /demo-html -->
    59. 

  59. 

  60.                 <h2>Step attribute</h2>
    61. 

  61. 

  62.                 <div data-demo-html="true">
    63. 

  63. 				<form>
    64. 

  64.                     <label for="slider-10">Slider:</label>
    65. 

  65.                     <input type="range" name="slider-10" id="slider-10" min="0" max="10" step=".1" value="5">
    66. 

  66. 				</form>
    67. 

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

  68. 

  69.                 <h2>Highlight</h2>
    70. 

  70. 

  71.                 <div data-demo-html="true">
    72. 

  72. 				<form>
    73. 

  73.                     <label for="slider-2">Slider (default is "false"):</label>
    74. 

  74.                     <input type="range" name="slider-2" id="slider-2" data-highlight="true" min="0" max="100" value="50">
    75. 

  75. 				</form>
    76. 

  76.                 </div><!-- /demo-html -->
    77. 

  77. 

  78.                 <h2>Theme</h2>
    79. 

  79. 

  80.                 <div data-demo-html="true">
    81. 

  81. 				<form>
    82. 

  82.                     <label for="slider-3">Slider:</label>
    83. 

  83.                     <input type="range" name="slider-3" id="slider-3" data-track-theme="b" data-theme="b" min="0" max="100" value="50">
    84. 

  84. 				</form>
    85. 

  85.                 </div><!-- /demo-html -->
    86. 

  86. 

  87.                 <h2>Mini sized</h2>
    88. 

  88. 

  89.                 <div data-demo-html="true">
    90. 

  90. 				<form>
    91. 

  91.                     <label for="slider-4">Slider:</label>
    92. 

  92.                     <input type="range" name="slider-4" id="slider-4" data-mini="true" min="0" max="100" value="50">
    93. 

  93. 				</form>
    94. 

  94.                 </div><!-- /demo-html -->
    95. 

  95. 

  96.                 <h2>Disabled</h2>
    97. 

  97. 

  98.                 <div data-demo-html="true">
    99. 

  99. 				<form>
    100. 

  100.                     <label for="slider-5">Slider:</label>
    101. 

  101.                     <input type="range" name="slider-5" id="slider-5" disabled="disabled" min="0" max="100" value="50">
    102. 

  102. 				</form>
    103. 

  103.                 </div><!-- /demo-html -->
    104. 

  104. 

  105.                 <h2>Label hidden</h2>
    106. 

  106. 

  107.                 <div data-demo-html="true">
    108. 

  108. 				<form>
    109. 

  109.                     <label for="slider-6" class="ui-hidden-accessible">Slider:</label>
    110. 

  110.                     <input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50">
    111. 

  111. 				</form>
    112. 

  112.                 </div><!-- /demo-html -->
    113. 

  113. 

  114.                 <h2>Fieldcontain</h2>
    115. 

  115. 

  116.                 <div data-demo-html="true">
    117. 

  117. 				<form>
    118. 

  118. 					<div class="ui-field-contain">
    119. 

  119.                         <label for="slider-7">Slider:</label>
    120. 

  120.                         <input type="range" name="slider-7" id="slider-7" min="0" max="100" value="50">
    121. 

  121. 					</div>
    122. 

  122. 				</form>
    123. 

  123.                 </div><!-- /demo-html -->
    124. 

  124. 

  125.                 <h2>Fieldcontain, mini sized</h2>
    126. 

  126. 

  127.                 <div data-demo-html="true">
    128. 

  128. 				<form>
    129. 

  129. 					<div class="ui-field-contain">
    130. 

  130.                         <label for="slider-8">Slider:</label>
    131. 

  131.                         <input type="range" name="slider-8" id="slider-8" data-mini="true" min="0" max="100" value="50">
    132. 

  132. 					</div>
    133. 

  133. 				</form>
    134. 

  134.                 </div><!-- /demo-html -->
    135. 

  135. 

  136.                 <h2>Full width slider, no input</h2>
    137. 

  137. 

  138.                 <p>Here we show how you can hide the number input and make the slider full width with custom CSS.</p>
    139. 

  139. 

  140.                 <div data-demo-html="true" data-demo-css="#full-width-slider">
    141. 

  141.                 <form class="full-width-slider">
    142. 

  142.                     <label for="slider-12" class="ui-hidden-accessible">Slider:</label>
    143. 

  143.                     <input type="range" name="slider-12" id="slider-12" min="0" max="100" value="50">
    144. 

  144.                 </form>
    145. 

  145.                 </div><!-- /demo-html -->
    146. 

  146. 

  147. 				<h2>Dynamically injected</h2>
    148. 

  148. 				<p>The slider below has been created at runtime.</p>
    149. 

  149. 

  150. 				<div data-demo-html="true" data-demo-js="#dynamic-slider">
    151. 

  151. 					<form id="dynamic-slider-form">
    152. 

  152. 					</form>
    153. 

  153. 				</div>
    154. 

  154. 

  155. 	</div><!-- /content -->
    156. 

  156. 

  157. 	<?php include( '../jqm-navmenu.php' ); ?>
    158. 

  158. 

  159. 	<div data-role="toolbar" data-type="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
    160. 

  160. 		<h6>jQuery Mobile Version <span class="jqm-version"></span> Demos</h6>
    161. 

  161. 		<ul>
    162. 

  162. 			<li><a href="http://jquerymobile.com/" title="Visit the jQuery Mobile web site">jquerymobile.com</a></li>
    163. 

  163. 			<li><a href="https://github.com/jquery/jquery-mobile" title="Visit the jQuery Mobile GitHub repository">GitHub repository</a></li>
    164. 

  164. 		</ul>
    165. 

  165. 		<p>Copyright jQuery Foundation</p>
    166. 

  166. 	</div><!-- /footer -->
    167. 

  167. 

  168. </div><!-- /page -->
    169. 

  169. 

  170. <?php include( '../jqm-search.php' ); ?>
    171. 

  171. 

  172. </body>
    173. 

  173. </html>
    174. 

  174.