PageRenderTime 191ms CodeModel.GetById 1ms 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. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Slider - 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. <style id="full-width-slider">
  15. /* Hide the number input */
  16. .full-width-slider input {
  17. display: none;
  18. }
  19. .full-width-slider .ui-slider-track {
  20. margin-left: 15px;
  21. }
  22. </style>
  23. <script id="dynamic-slider">
  24. $( document ).on( "pagecreate", function() {
  25. $( "<input type='number' data-type='range' min='0' max='100' step='1' value='17'>" )
  26. .appendTo( "#dynamic-slider-form" )
  27. .slider()
  28. .textinput()
  29. });
  30. </script>
  31. </head>
  32. <body>
  33. <div data-role="page" class="jqm-demos" data-quicklinks="true">
  34. <div data-role="toolbar" data-type="header" class="jqm-header">
  35. <h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquerymobile-logo.png" alt="jQuery Mobile"></a></h2>
  36. <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>
  37. <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>
  38. <div class="jqm-banner"><h3>Version <span class="jqm-version"></span> Demos</h3></div>
  39. </div><!-- /header -->
  40. <div role="main" class="ui-content jqm-content">
  41. <h1>Slider</h1>
  42. <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>
  43. <p>Sliders are used to enter numeric values along a continuum and can also be dual handle <a href="../rangeslider/">range sliders</a>.
  44. </p>
  45. <h2>Basic slider</h2>
  46. <div data-demo-html="true">
  47. <form>
  48. <label for="slider-1">Slider:</label>
  49. <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50">
  50. </form>
  51. </div><!-- /demo-html -->
  52. <h2>Step attribute</h2>
  53. <div data-demo-html="true">
  54. <form>
  55. <label for="slider-10">Slider:</label>
  56. <input type="range" name="slider-10" id="slider-10" min="0" max="10" step=".1" value="5">
  57. </form>
  58. </div><!-- /demo-html -->
  59. <h2>Highlight</h2>
  60. <div data-demo-html="true">
  61. <form>
  62. <label for="slider-2">Slider (default is "false"):</label>
  63. <input type="range" name="slider-2" id="slider-2" data-highlight="true" min="0" max="100" value="50">
  64. </form>
  65. </div><!-- /demo-html -->
  66. <h2>Theme</h2>
  67. <div data-demo-html="true">
  68. <form>
  69. <label for="slider-3">Slider:</label>
  70. <input type="range" name="slider-3" id="slider-3" data-track-theme="b" data-theme="b" min="0" max="100" value="50">
  71. </form>
  72. </div><!-- /demo-html -->
  73. <h2>Mini sized</h2>
  74. <div data-demo-html="true">
  75. <form>
  76. <label for="slider-4">Slider:</label>
  77. <input type="range" name="slider-4" id="slider-4" data-mini="true" min="0" max="100" value="50">
  78. </form>
  79. </div><!-- /demo-html -->
  80. <h2>Disabled</h2>
  81. <div data-demo-html="true">
  82. <form>
  83. <label for="slider-5">Slider:</label>
  84. <input type="range" name="slider-5" id="slider-5" disabled="disabled" min="0" max="100" value="50">
  85. </form>
  86. </div><!-- /demo-html -->
  87. <h2>Label hidden</h2>
  88. <div data-demo-html="true">
  89. <form>
  90. <label for="slider-6" class="ui-hidden-accessible">Slider:</label>
  91. <input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50">
  92. </form>
  93. </div><!-- /demo-html -->
  94. <h2>Fieldcontain</h2>
  95. <div data-demo-html="true">
  96. <form>
  97. <div class="ui-field-contain">
  98. <label for="slider-7">Slider:</label>
  99. <input type="range" name="slider-7" id="slider-7" min="0" max="100" value="50">
  100. </div>
  101. </form>
  102. </div><!-- /demo-html -->
  103. <h2>Fieldcontain, mini sized</h2>
  104. <div data-demo-html="true">
  105. <form>
  106. <div class="ui-field-contain">
  107. <label for="slider-8">Slider:</label>
  108. <input type="range" name="slider-8" id="slider-8" data-mini="true" min="0" max="100" value="50">
  109. </div>
  110. </form>
  111. </div><!-- /demo-html -->
  112. <h2>Full width slider, no input</h2>
  113. <p>Here we show how you can hide the number input and make the slider full width with custom CSS.</p>
  114. <div data-demo-html="true" data-demo-css="#full-width-slider">
  115. <form class="full-width-slider">
  116. <label for="slider-12" class="ui-hidden-accessible">Slider:</label>
  117. <input type="range" name="slider-12" id="slider-12" min="0" max="100" value="50">
  118. </form>
  119. </div><!-- /demo-html -->
  120. <h2>Dynamically injected</h2>
  121. <p>The slider below has been created at runtime.</p>
  122. <div data-demo-html="true" data-demo-js="#dynamic-slider">
  123. <form id="dynamic-slider-form">
  124. </form>
  125. </div>
  126. </div><!-- /content -->
  127. <?php include( '../jqm-navmenu.php' ); ?>
  128. <div data-role="toolbar" data-type="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
  129. <h6>jQuery Mobile Version <span class="jqm-version"></span> Demos</h6>
  130. <ul>
  131. <li><a href="http://jquerymobile.com/" title="Visit the jQuery Mobile web site">jquerymobile.com</a></li>
  132. <li><a href="https://github.com/jquery/jquery-mobile" title="Visit the jQuery Mobile GitHub repository">GitHub repository</a></li>
  133. </ul>
  134. <p>Copyright jQuery Foundation</p>
  135. </div><!-- /footer -->
  136. </div><!-- /page -->
  137. <?php include( '../jqm-search.php' ); ?>
  138. </body>
  139. </html>