mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 14:30:28 +00:00
161f5e6ae3
This makes our include model match the include model on the CDN, and allows devs to make use of mobileinit for debugging some of the samples since that must be set up after jquery.js, but before jquery-mobile.
122 lines
No EOL
6.4 KiB
HTML
Executable file
122 lines
No EOL
6.4 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>jQuery Mobile Docs - Forms</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script type="text/javascript" src="../../js/jquery.js"></script>
|
|
<script type="text/javascript" src="../../js/"></script>
|
|
<script type="text/javascript" src="../docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Radio buttons</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<form action="#" method="get">
|
|
|
|
<h2>Radio buttons</h2>
|
|
<p>Radio buttons are used to provide a list of options where only a single items can be selected. Traditional desktop radio buttons are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
|
|
|
|
<p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. </p>
|
|
|
|
<h2>Vertically grouped radio buttons</h2>
|
|
|
|
<p>To create a set of radio buttons, add an <code>input</code> with a <code>type="radio"</code> attribute and a corresponding <code>label</code>. 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.</p>
|
|
|
|
<p>Because radio buttons use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the radio buttons in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question.</p>
|
|
|
|
<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code>data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
|
|
|
|
<pre><code>
|
|
<div data-role="fieldcontain">
|
|
<fieldset data-role="controlgroup">
|
|
<legend>Choose a pet:</legend>
|
|
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
|
|
<label for="radio-choice-1">Cat</label>
|
|
|
|
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
|
|
<label for="radio-choice-2">Dog</label>
|
|
|
|
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
|
|
<label for="radio-choice-3">Hampster</label>
|
|
|
|
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
|
|
<label for="radio-choice-4">Lizard</label>
|
|
</fieldset>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<p>To visually integrate multiple radio buttons into a vertically 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 fie.</p>
|
|
|
|
<div data-role="fieldcontain">
|
|
<fieldset data-role="controlgroup">
|
|
<legend>Choose a pet:</legend>
|
|
<input type="radio" name="radio-pet-1" id="radio-pet-1" value="choice-1" checked="checked" />
|
|
<label for="radio-pet-1">Cat</label>
|
|
|
|
<input type="radio" name="radio-pet-1" id="radio-pet-2" value="choice-2" />
|
|
<label for="radio-pet-2">Dog</label>
|
|
|
|
<input type="radio" name="radio-pet-1" id="radio-pet-3" value="choice-3" />
|
|
<label for="radio-pet-3">Hampster</label>
|
|
|
|
<input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4" />
|
|
<label for="radio-pet-4">Lizard</label>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<h2>Horizontal radio button sets</h2>
|
|
|
|
<p>Radio buttons can also be used for grouped button sets only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
|
|
|
|
<code>
|
|
<fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong> data-role="fieldcontain">
|
|
</code>
|
|
|
|
<p>The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.</p>
|
|
|
|
<div data-role="fieldcontain">
|
|
<fieldset data-role="controlgroup" data-type="horizontal">
|
|
<legend>Layout view:</legend>
|
|
<input type="radio" name="radio-view" id="radio-view-a" value="list" />
|
|
<label for="radio-view-a">List</label>
|
|
<input type="radio" name="radio-view" id="radio-view-b" value="grid" />
|
|
<label for="radio-view-b">Grid</label>
|
|
<input type="radio" name="radio-view" id="radio-view-c" value="gallery" />
|
|
<label for="radio-view-c">Gallery</label>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<!--
|
|
<h2>No icon option</h2>
|
|
|
|
<p>If you don't want the default radiobutton icon to be added, add the <code></code> attribute to each radio <code>input</code>. </p>
|
|
|
|
<div data-role="fieldcontain">
|
|
<fieldset data-role="controlgroup">
|
|
<legend>These don't have the radio state icons:</legend>
|
|
<input type="radio" name="radio-noicon" id="radio-noicon1" value="a" checked="checked" />
|
|
<label for="radio-noicon1">Yes</label>
|
|
<input type="radio" name="radio-noicon" id="radio-noicon2" value="b" />
|
|
<label for="radio-noicon2">No</label>
|
|
<input type="radio" name="radio-noicon" id="radio-noicon3" value="c" />
|
|
<label for="radio-noicon3">Maybe</label>
|
|
</fieldset>
|
|
</div>
|
|
-->
|
|
|
|
</form>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |