PageRenderTime 88ms CodeModel.GetById 31ms RepoModel.GetById 1ms app.codeStats 0ms

/demos/checkboxradio-checkbox/index.php

https://github.com/lialex100/jquery-mobile
PHP | 149 lines | 122 code | 27 blank | 0 comment | 2 complexity | aa2832d37621b46701abfcf9dd746fa3 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>Checkbox - 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. </head>
    15. 

  15. <body>
    16. 

  16. <div data-role="page" class="jqm-demos" data-quicklinks="true">
    17. 

  17. 

  18. 	<div data-role="toolbar" data-type="header" class="jqm-header">
    19. 

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

  20. 		<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>
    21. 

  21. 		<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>
    22. 

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

  23. 	</div><!-- /header -->
    24. 

  24. 

  25. 	<div role="main" class="ui-content jqm-content">
    26. 

  26. 

  27. 		<h1>Checkbox</h1>
    28. 

  28. 

  29. 		<a href="http://api.jquerymobile.com/checkboxradio/" 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>
    30. 

  30. 

  31. 		<p>Checkbox inputs are used to provide a list of options where more than one can be selected. Checkbox buttons are enhanced by the Checkboxradio widget.</p>
    32. 

  32. 

  33. 		<h2>Basic markup</h2>
    34. 

  34. 

  35. 		<p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. If the <code>input</code> isn't wrapped in its corresponding <code>label</code>, be sure to set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated.</p>
    36. 

    37. 

  37. 		<div data-demo-html="true">
    38. 

  38. 			<form>
    39. 

  39. 				<label>
    40. 

  40. 					<input type="checkbox" name="checkbox-0 ">Check me
    41. 

  41. 				</label>
    42. 

  42. 			</form>
    43. 

  43. 		</div><!--/demo-html -->
    44. 

  44. 

  45. 		<h2>Mini size</h2>
    46. 

  46. 

  47. 		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>ui-mini</code> class to the element's <code>data-wrapper-class</code> attribute to create a mini version. </p>
    48. 

    49. 

  49. 		<div data-demo-html="true">
    50. 

  50. 			<form>
    51. 

  51. 				<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-wrapper-class="ui-mini">
    52. 

  52. 				<label for="checkbox-mini-0">I agree</label>
    53. 

  53. 			</form>
    54. 

  54. 		</div><!--/demo-html -->
    55. 

  55. 

  56. 		<h2>Horizontal group</h2>
    57. 

  57. 

  58. 		<p>Checkboxes can be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the <code>fieldset</code>.</p>
    59. 

  59. 

  60. 		<div data-demo-html="true">
    61. 

  61. 			<form>
    62. 

  62. 				<fieldset data-role="controlgroup">
    63. 

  63. 					<legend>Horizontal:</legend>
    64. 

  64. 					<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
    65. 

  65. 					<label for="checkbox-h-2a">B</label>
    66. 

  66. 					<input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
    67. 

  67. 					<label for="checkbox-h-2b"><span style="font-style:italic;font-weight:normal;">I</span></label>
    68. 

  68. 					<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
    69. 

  69. 					<label for="checkbox-h-2c"><span style="text-decoration:underline;font-weight:normal;">U</span></label>
    70. 

  70. 				</fieldset>
    71. 

  71. 			</form>
    72. 

  72. 		</div><!--/demo-html -->
    73. 

  73. 

  74. 		<h2>Vertical group</h2>
    75. 

  75. 

  76. 		<p>To make a vertical button set, add <code>data-direction="vertical"</code> to the <code>fieldset</code>.</p>
    77. 

  77. 

  78. 		<div data-demo-html="true">
    79. 

  79. 			<form>
    80. 

  80. 				<fieldset data-role="controlgroup" data-direction="vertical">
    81. 

  81. 					<legend>Vertical:</legend>
    82. 

  82. 					<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
    83. 

  83. 					<label for="checkbox-v-2a">One</label>
    84. 

  84. 					<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
    85. 

  85. 					<label for="checkbox-v-2b">Two</label>
    86. 

  86. 					<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
    87. 

  87. 					<label for="checkbox-v-2c">Three</label>
    88. 

  88. 				</fieldset>
    89. 

  89. 			</form>
    90. 

  90. 		</div><!--/demo-html -->
    91. 

  91. 

  92. 		<h2>Theme</h2>
    93. 

  93. 

  94. 		<p>To set the theme, add the <code>data-theme</code> attribute to the <code>fieldset</code> or to the individual checkbox inputs.</p>
    95. 

  95. 

  96. 		<div data-demo-html="true">
    97. 

  97. 			<form>
    98. 

  98. 				<fieldset data-role="controlgroup">
    99. 

  99. 					<legend>Swatch B:</legend>
    100. 

  100. 					<input type="checkbox" name="checkbox-t-2a" id="checkbox-t-2a" data-theme="b">
    101. 

  101. 					<label for="checkbox-t-2a">One</label>
    102. 

  102. 					<input type="checkbox" name="checkbox-t-2b" id="checkbox-t-2b" data-theme="b">
    103. 

  103. 					<label for="checkbox-t-2b">Two</label>
    104. 

  104. 					<input type="checkbox" name="checkbox-t-2c" id="checkbox-t-2c" data-theme="b">
    105. 

  105. 					<label for="checkbox-t-2c">Three</label>
    106. 

  106. 				</fieldset>
    107. 

  107. 			</form>
    108. 

  108. 		</div><!--/demo-html -->
    109. 

  109. 

  110. 		<h2>Disabled</h2>
    111. 

  111. 

  112. 		<div data-demo-html="true">
    113. 

  113. 			<form>
    114. 

  114. 				<input disabled type="checkbox" name="checkbox-t-3a" id="checkbox-t-3a" data-theme="a">
    115. 

  115. 				<label for="checkbox-t-3a">One</label>
    116. 

  116. 			</form>
    117. 

  117. 		</div><!--/demo-html -->
    118. 

  118. 

  119. 		<h2>Enhanced</h2>
    120. 

  120. 

  121. 		<div data-demo-html="true">
    122. 

  122. 			<form>
    123. 

  123. 				<label class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-button-inherit">
    124. 

  124. 					<span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span>
    125. 

  125. 					<span class="ui-checkboxradio-icon-space"> </span>
    126. 

  126. 					<input type="checkbox" data-enhanced="true" name="checkbox-enhanced" class="ui-checkboxradio ui-helper-hidden-accessible">I agree
    127. 

  127. 				</label>
    128. 

  128. 			</form>
    129. 

  129. 		</div><!--/demo-html -->
    130. 

  130. 

  131. 	</div><!-- /content -->
    132. 

  132. 

  133. 	<?php include( '../jqm-navmenu.php' ); ?>
    134. 

  134. 

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

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

  137. 		<ul>
    138. 

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

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

  140. 		</ul>
    141. 

  141. 		<p>Copyright jQuery Foundation</p>
    142. 

  142. 	</div><!-- /footer -->
    143. 

  143. 

  144. </div><!-- /page -->
    145. 

  145. 

  146. <?php include( '../jqm-search.php' ); ?>
    147. 

  147. 

  148. </body>
    149. 

  149. </html>
    150. 

  150.