libs/js/jquery-mobile-1.1.0/docs/forms/checkboxes/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 - Checkboxes</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="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
  10         <script src="../../../js/jquery.js"></script>
  11         <script src="../../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17         <div data-role="page" class="type-interior">
  18
  19                 <div data-role="header" data-theme="f">
  20                 <h1>Checkboxes</h1>
  21                 <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  22                 <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  23         </div><!-- /header -->
  24
  25         <div data-role="content">
  26                 <div class="content-primary">
  27
  28                 <form action="#" method="get">
  29
  30                 <h2>Checkboxes</h2>
  31
  32     <ul data-role="controlgroup" data-type="horizontal" class="localnav">
  33       <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
  34       <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
  35       <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
  36       <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
  37     </ul>
  38
  39                 <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 additional visual feedback.</p>
  40
  41                 <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. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to checkboxes.</p>
  42
  43                 <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 ID of the <code>input</code> so they are semantically associated.</p>
  44
  45                 <pre><code>
  46 &lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; /&gt; I agree &lt;/label&gt;
  47
  48 &lt;input type=&quot;checkbox&quot; name=&quot;checkbox-0&quot; id=&quot;checkbox-0&quot; class=&quot;custom&quot; /&gt;
  49 &lt;label for=&quot;checkbox-0&quot;&gt;I agree&lt;/label&gt;
  50                 </code></pre>
  51
  52                 <p>The above snippets will produce two basic checkboxes. The default styles will set the width of the element to 100% of the parent container.</p>
  53
  54                 <label> <input type="checkbox" name="checkbox-1 "/> I agree</label>
  55
  56                 <input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
  57                 <label for="checkbox-0">I agree</label>
  58
  59
  60                 <h2>Mini version</h2>
  61
  62                 <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>
  63
  64 <pre><code>
  65 &lt;input type=&quot;checkbox&quot; name=&quot;checkbox-0&quot; id=&quot;checkbox-mini-0&quot; class=&quot;custom&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;
  66 &lt;label for=&quot;checkbox-mini-0&quot;&gt;I agree&lt;/label&gt;
  67 </code></pre>
  68
  69                 <p>This will produce a select that is not as tall as the standard version and has a smaller text size.</p>
  70                 <input type="checkbox" name="checkbox-0" id="checkbox-mini-0" class="custom" data-mini="true" />
  71                 <label for="checkbox-mini-0">I agree</label>
  72
  73
  74                 <h2>Field containers &amp; Legends</h2>
  75                 <p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the  <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>
  76
  77                 <p>Wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="fieldcontain"</code> attribute so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
  78
  79
  80 <pre><code>
  81 &lt;div data-role=&quot;fieldcontain&quot;&gt;
  82     <strong>&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
  83            &lt;legend&gt;Agree to the terms:&lt;/legend&gt;</strong>
  84            &lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot; class=&quot;custom&quot; /&gt;
  85            &lt;label for=&quot;checkbox-1&quot;&gt;I agree&lt;/label&gt;
  86     <strong>&lt;/fieldset&gt;</strong>
  87 &lt;/div&gt;
  88 </code></pre>
  89
  90         <div data-role="fieldcontain">
  91                 <fieldset data-role="controlgroup">
  92                         <legend>Agree to the terms:</legend>
  93                         <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
  94                         <label for="checkbox-1">I agree</label>
  95             </fieldset>
  96         </div>
  97
  98
  99
 100                 <h2>Vertically grouped checkboxes</h2>
 101
 102                 <p>Typically, there are multiple checkboxes listed under a question title. 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 fie.</p>
 103
 104                         <div  data-role="fieldcontain">
 105                                 <fieldset data-role="controlgroup">
 106                                         <legend>Choose as many snacks as you'd like:</legend>
 107                                         <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
 108                                         <label for="checkbox-1a">Cheetos</label>
 109
 110                                         <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
 111                                         <label for="checkbox-2a">Doritos</label>
 112
 113                                         <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
 114                                         <label for="checkbox-3a">Fritos</label>
 115
 116                                         <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
 117                                         <label for="checkbox-4a">Sun Chips</label>
 118                             </fieldset>
 119                         </div>
 120
 121                 <h2>Horizontal toggle sets</h2>
 122
 123                 <p>Checkboxes can also 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 make a horizontal button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
 124
 125 <code>
 126 &lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-type=&quot;horizontal&quot;</strong>&gt;
 127 </code>
 128
 129                         <p>The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.</p>
 130
 131                 <div data-role="fieldcontain">
 132                     <fieldset data-role="controlgroup" data-type="horizontal">
 133                         <legend>Font styling:</legend>
 134                         <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
 135                                 <label for="checkbox-6">b</label>
 136
 137                                 <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
 138                                 <label for="checkbox-7"><em>i</em></label>
 139
 140                                 <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
 141                                 <label for="checkbox-8">u</label>
 142                     </fieldset>
 143                 </div>
 144
 145
 146
 147
 148         </form>
 149
 150         </div><!--/content-primary -->
 151
 152         <div class="content-secondary">
 153
 154                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 155
 156                                 <h3>More in this section</h3>
 157
 158                                 <ul data-role="listview" data-theme="c" data-dividertheme="d">
 159
 160                                         <li data-role="list-divider">Form elements</li>
 161                                         <li><a href="../docs-forms.html">Form basics</a></li>
 162                                         <li><a href="../forms-all.html">Form element gallery</a></li>
 163                                         <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
 164                                         <li><a href="../textinputs/index.html">Text inputs</a></li>
 165                                         <li><a href="../search/">Search input</a></li>
 166                                         <li><a href="../slider/">Slider</a></li>
 167                                         <li><a href="../switch/">Flip toggle switch</a></li>
 168                                         <li><a href="../radiobuttons/">Radio buttons</a></li>
 169                                         <li data-theme="a"><a href="index.html">Checkboxes</a></li>
 170                                         <li><a href="../selects/">Select menus</a></li>
 171                                         <li><a href="../forms-themes.html">Theming forms</a></li>
 172                                         <li><a href="../forms-all-native.html">Native form elements</a></li>
 173                                         <li><a href="../forms-sample.html">Submitting forms</a></li>
 174
 175
 176                                 </ul>
 177                 </div>
 178         </div>
 179
 180 </div><!-- /content -->
 181
 182 <div data-role="footer" class="footer-docs" data-theme="c">
 183                 <p>&copy; 2011-12 The jQuery Foundation</p>
 184 </div>
 185
 186 </div><!-- /page -->
 187
 188 </body>
 189 </html>