libs/js/jquery-mobile-1.2.0/docs/forms/radiobuttons/index.html

   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>jQuery Mobile Docs - Radio Buttons</title>
   7         <link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
   9         <script src="../../../js/jquery.js"></script>
  10         <script src="../../../docs/_assets/js/jqm-docs.js"></script>
  11         <script src="../../../js/"></script>
  12
  13 </head>
  14 <body>
  15
  16         <div data-role="page" class="type-interior">
  17
  18                 <div data-role="header" data-theme="f">
  19                 <h1>Radio buttons</h1>
  20                 <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  21                 <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  22         </div><!-- /header -->
  23
  24         <div data-role="content">
  25                 <div class="content-primary">
  26
  27                 <form action="#" method="get">
  28
  29                 <h2>Radio buttons</h2>
  30
  31     <ul data-role="controlgroup" data-type="horizontal" class="localnav">
  32       <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
  33       <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
  34       <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
  35       <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
  36     </ul>
  37
  38                 <p>Radio buttons are used to provide a list of options where only a single item can be selected. Traditional desktop radio buttons are not optimized for touch input so jQuery Mobile styles 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>
  39
  40                 <p>The radio 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. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to radio buttons.</p>
  41
  42                 <h2>Vertically grouped radio buttons</h2>
  43
  44                 <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 <code>id</code> of the <code>input</code> so they are semantically associated.</p>
  45
  46                 <p>The <code>label</code> element is displayed next to the radio form element. Wrap the radio buttons in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question.</p>
  47
  48                 <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 container.</p>
  49
  50 <pre><code>
  51 <strong>&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
  52         &lt;legend&gt;Choose a pet:&lt;/legend&gt;</strong>
  53         &lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
  54         &lt;label for=&quot;radio-choice-1&quot;&gt;Cat&lt;/label&gt;
  55
  56         &lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-2&quot; value=&quot;choice-2&quot;  /&gt;
  57         &lt;label for=&quot;radio-choice-2&quot;&gt;Dog&lt;/label&gt;
  58
  59         &lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-3&quot; value=&quot;choice-3&quot;  /&gt;
  60         &lt;label for=&quot;radio-choice-3&quot;&gt;Hamster&lt;/label&gt;
  61
  62         &lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-4&quot; value=&quot;choice-4&quot;  /&gt;
  63         &lt;label for=&quot;radio-choice-4&quot;&gt;Lizard&lt;/label&gt;
  64 <strong>&lt;/fieldset&gt;</strong>
  65 </code></pre>
  66
  67
  68                 <p>This will produce a vertically grouped radio button set. The default styles set the width of the button group to 100% of the parent container and stacks the legend on a separate line.</p>
  69
  70
  71             <fieldset data-role="controlgroup">
  72                 <legend>Choose a pet:</legend>
  73                         <input type="radio" name="radio-pet" id="radio-pet-1a" value="choice-1" checked="checked"  />
  74                         <label for="radio-pet-1a">Cat</label>
  75
  76                         <input type="radio" name="radio-pet" id="radio-pet-2a" value="choice-2"  />
  77                         <label for="radio-pet-2a">Dog</label>
  78
  79                         <input type="radio" name="radio-pet" id="radio-pet-3a" value="choice-3"  />
  80                         <label for="radio-pet-3a">Hamster</label>
  81
  82                         <input type="radio" name="radio-pet" id="radio-pet-4a" value="choice-4"  />
  83                         <label for="radio-pet-4a">Lizard</label>
  84             </fieldset>
  85
  86                 <h2>Mini version</h2>
  87
  88                 <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
  89
  90 <pre><code>
  91 &lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-mini=&quot;true&quot;</strong>&gt;
  92         &lt;input type=&quot;radio&quot; name=&quot;radio-mini&quot; id=&quot;radio-mini-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
  93         &lt;label for=&quot;radio-mini-1&quot;&gt;Credit&lt;/label&gt;
  94
  95         &lt;input type=&quot;radio&quot; name=&quot;radio-mini&quot; id=&quot;radio-mini-2&quot; value=&quot;choice-2&quot;  /&gt;
  96         &lt;label for=&quot;radio-mini-2&quot;&gt;Debit&lt;/label&gt;
  97
  98         &lt;input type=&quot;radio&quot; name=&quot;radio-mini&quot; id=&quot;radio-mini-3&quot; value=&quot;choice-3&quot;  /&gt;
  99         &lt;label for=&quot;radio-mini-3&quot;&gt;Cash&lt;/label&gt;
 100 &lt;/fieldset&gt;
 101 </code></pre>
 102
 103                 <p>This will produce a radio button that is not as tall as the standard version and has a smaller text size.</p>
 104
 105                 <fieldset data-role="controlgroup" data-mini="true">
 106                         <input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" checked="checked" />
 107                         <label for="radio-mini-1">Credit</label>
 108                         <input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2"  />
 109                         <label for="radio-mini-2">Debit</label>
 110                         <input type="radio" name="radio-mini" id="radio-mini-3" value="choice-3"  />
 111                         <label for="radio-mini-3">Cash</label>
 112             </fieldset>
 113
 114                 <h2>Field containers</h2>
 115
 116                 <p>Optionally wrap the radiobuttons in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
 117         <pre><code>
 118 <strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;</strong>
 119     &lt;fieldset data-role=&quot;controlgroup&quot;&gt;
 120         &lt;legend&gt;Choose a pet:&lt;/legend&gt;
 121                 &lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-21&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
 122                 &lt;label for=&quot;radio-choice-21&quot;&gt;Cat&lt;/label&gt;
 123
 124                 &lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-22&quot; value=&quot;choice-2&quot;  /&gt;
 125                 &lt;label for=&quot;radio-choice-22&quot;&gt;Dog&lt;/label&gt;
 126
 127                 &lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-23&quot; value=&quot;choice-3&quot;  /&gt;
 128                 &lt;label for=&quot;radio-choice-23&quot;&gt;Hamster&lt;/label&gt;
 129
 130                 &lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-24&quot; value=&quot;choice-4&quot;  /&gt;
 131                 &lt;label for=&quot;radio-choice-24&quot;&gt;Lizard&lt;/label&gt;
 132     &lt;/fieldset&gt;
 133 <strong>&lt;/div&gt;
 134 </strong>       </code></pre>
 135
 136                 <div data-role="fieldcontain">
 137                     <fieldset data-role="controlgroup">
 138                         <legend>Choose a pet:</legend>
 139                                 <input type="radio" name="radio-pet-1" id="radio-pet-1" value="choice-1" checked="checked"  />
 140                                 <label for="radio-pet-1">Cat</label>
 141
 142                                 <input type="radio" name="radio-pet-1" id="radio-pet-2" value="choice-2"  />
 143                                 <label for="radio-pet-2">Dog</label>
 144
 145                                 <input type="radio" name="radio-pet-1" id="radio-pet-3" value="choice-3"  />
 146                                 <label for="radio-pet-3">Hamster</label>
 147
 148                                 <input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4"  />
 149                                 <label for="radio-pet-4">Lizard</label>
 150                     </fieldset>
 151                 </div>
 152                         <h2>Horizontal radio button sets</h2>
 153
 154                         <p>Radio buttons can also be used for grouped button sets where 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>
 155
 156         <code>
 157         &lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-type=&quot;horizontal&quot;</strong> &gt;
 158         </code>
 159
 160         <div data-role="fieldcontain">
 161             <fieldset data-role="controlgroup" data-type="horizontal">
 162                 <legend>Layout view:</legend>
 163                         <input type="radio" name="radio-view" id="radio-view-a" value="list"  />
 164                         <label for="radio-view-a">List</label>
 165                         <input type="radio" name="radio-view" id="radio-view-b" value="grid"  />
 166                         <label for="radio-view-b">Grid</label>
 167                         <input type="radio" name="radio-view" id="radio-view-c" value="gallery"  />
 168                         <label for="radio-view-c">Gallery</label>
 169             </fieldset>
 170         </div>
 171
 172                                 <p>The labels float so they sit side-by-side on a line. The radio button icons are hidden and only the left and right edges of the group are rounded.</p>
 173
 174
 175
 176
 177
 178
 179         </form>
 180
 181         </div><!--/content-primary -->
 182
 183         <div class="content-secondary">
 184
 185                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 186
 187                                 <h3>More in this section</h3>
 188
 189                                 <ul data-role="listview" data-theme="c" data-dividertheme="d">
 190
 191                                         <li data-role="list-divider">Form elements</li>
 192                                         <li><a href="../docs-forms.html">Form basics</a></li>
 193                                         <li><a href="../forms-all.html">Form element gallery</a></li>
 194                                         <li><a href="../textinputs/index.html">Text inputs</a></li>
 195                                         <li><a href="../search/">Search input</a></li>
 196                                         <li><a href="../slider/">Slider</a></li>
 197                                         <li><a href="../switch/">Flip toggle switch</a></li>
 198                                         <li data-theme="a"><a href="index.html">Radio buttons</a></li>
 199                                         <li><a href="../checkboxes/">Checkboxes</a></li>
 200                                         <li><a href="../selects/">Select menus</a></li>
 201                                         <li><a href="../forms-themes.html">Theming forms</a></li>
 202                                         <li><a href="../forms-all-native.html">Native form elements</a></li>
 203                                         <li><a href="../forms-sample.html">Submitting forms</a></li>
 204
 205
 206                                 </ul>
 207                 </div>
 208         </div>
 209
 210 </div><!-- /content -->
 211
 212 <div data-role="footer" class="footer-docs" data-theme="c">
 213                 <p class="jqm-version"></p>
 214                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 215 </div>
 216
 217 </div><!-- /page -->
 218
 219 </body>
 220 </html>