mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 23:10:24 +00:00
71 lines
No EOL
3 KiB
HTML
Executable file
71 lines
No EOL
3 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Forms</title>
|
|
<link rel="stylesheet" href="../../themes/default" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
<script type="text/javascript" src="../docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Checkboxes</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<form action="#" method="get">
|
|
|
|
<h2>Checkboxes</h2>
|
|
<p>Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide visual feedback.</p>
|
|
<p>To create a checkbox, To add a slider widget to your page, start with an <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to group them.</p>
|
|
|
|
<pre><code>
|
|
<div data-role="fieldcontain">
|
|
<label for="slider2">Select slider:</label>
|
|
<select name="slider2" id="slider2" data-role="slider">
|
|
<option value="off">Off</option>
|
|
<option value="on">On</option>
|
|
</select>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<p>A radiobutton list is displayed like this:</p>
|
|
<fieldset data-role="controlgroup">
|
|
<legend>Choose one or more:</legend>
|
|
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
|
|
<label for="checkbox-1">Choice 1</label>
|
|
|
|
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
|
|
<label for="checkbox-2">Choice 2</label>
|
|
|
|
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" checked="checked" />
|
|
<label for="checkbox-3">Choice 3</label>
|
|
</fieldset>
|
|
|
|
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
|
<legend>Font styling:</legend>
|
|
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
|
|
<label for="checkbox-6">b</label>
|
|
|
|
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
|
|
<label for="checkbox-7"><em>i</em></label>
|
|
|
|
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
|
|
<label for="checkbox-8">u</label>
|
|
</fieldset>
|
|
|
|
<fieldset data-role="controlgroup">
|
|
<legend>Single checkbox:</legend>
|
|
<input type="checkbox" name="checkbox-9" id="checkbox-9" class="custom" />
|
|
<label for="checkbox-9">Single Checkbox</label>
|
|
</fieldset>
|
|
</form>
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |