RubyGems - RubyApp - Versions diffs - 0.6.59 → 0.6.60 - Mend

RubyApp 0.6.59 → 0.6.60

Files changed (870) hide show

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/content/content-html.html ADDED

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - HTML formatting</title>
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+	<div data-role="page" class="type-interior">
+		<div data-role="header" data-theme="f">
+		<h1>HTML Formatting</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div><!-- /header -->
+	<div data-role="content">
+		<div class="content-primary">
+		<style>
+			table { width:100%; }
+			table caption { text-align:left;  }
+			table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
+			table th, td { text-align:left; padding:6px;}
+		</style>
+		<p>The default approach to styling content in jQuery Mobile is simple: Use a light hand.  Our goal is to let the browser's native rendering take precedence; we add a bit of padding for more comfortable readability, and use the <a href="../api/themes.html">theming system</a>  to apply the font family and colors. </p>
+		<p>Taking a light hand with content styling gives designers and developers a clean slate to work with, instead of fighting against a lot of complex style overhead.</p>
+		<h2>Default HTML markup styling</h2>
+		<p>By default, jQuery Mobile themes use standard HTML styles and sizes for standard markup elements like headers, paragraph content, block quotes, anchor links, standard ordered, unordered and definition lists, and tables &mdash; as shown in the examples below:</p>
+		<hr>
+		<h1>H1 Heading</h1>
+		<h2>H2 Heading</h2>
+		<h3>H3 Heading</h3>
+		<h4>H4 Heading</h4>
+		<h5>H5 Heading</h5>
+		<h6>H6 Heading</h6>
+		<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+		<blockquote>How about some blockquote action with a <cite>cite</cite></blockquote>
+		<p>This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.</p>
+		<p>We add a few styles to <code>tables</code> and <code>fieldsets</code> to make them more legible, which are easily overridden with customs styles.</p>
+		<ul>
+			<li>Unordered list item 1</li>
+			<li>Unordered list item 1</li>
+			<li>Unordered list item 1</li>
+		</ul>
+		<ol>
+			<li>Ordered list item 1</li>
+			<li>Ordered list item 1</li>
+			<li>Ordered list item 1</li>
+		</ol>
+		<dl title="Definition list">
+			<dt>Definition term</dt>
+			<dd>I'm the definition text</dd>
+			<dt>Definition term</dt>
+			<dd>I'm the definition text</dd>
+		</dl>
+		<table summary="This table lists all the JetBlue flights.">
+		  <caption>Travel Itinerary</caption>
+		  <thead>
+		    <tr>
+		       <th scope="col">Flight:</th>
+		      <th scope="col">From:</th>
+		      <th scope="col">To:</th>
+		    </tr>
+		  </thead>
+		  <tfoot>
+		    <tr>
+		      <td colspan="5">Total: 3 flights</td>
+		    </tr>
+		  </tfoot>
+		  <tbody>
+		  <tr>
+		    <th scope="row">JetBlue 983</th>
+		    <td>Boston (BOS)</td>
+		    <td>New York (JFK)</td>
+		  </tr>
+		  <tr>
+		    <th scope="row">JetBlue 354</th>
+		    <td>San Francisco (SFO)</td>
+		    <td>Los Angeles (LAX)</td>
+		  </tr>
+		<tr>
+		    <th scope="row">JetBlue 465</th>
+		    <td>New York (JFK)</td>
+		    <td>Portland (PDX)</td>
+		  </tr>
+		  </tbody>
+		</table>
+	</div><!--/content-primary -->
+	<div class="content-secondary">
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				<h3>More in this section</h3>
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+						<li data-role="list-divider">Content Formatting</li>
+						<li data-theme="a"><a href="content-html.html">Basic HTML styles</a></li>
+						<li><a href="content-grids.html">Layout grids (columns)</a></li>
+						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+						<li><a href="content-themes.html">Theming content</a></li>
+				</ul>
+		</div>
+	</div>
+</div><!-- /content -->
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011-12 The jQuery Foundation</p>
+</div>
+</div><!-- /page -->
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/content/content-themes.html ADDED

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Content Themes</title>
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+	<div data-role="page" class="type-interior">
+		<div data-role="header" data-theme="f">
+		<h1>Theming content</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div><!-- /header -->
+	<div data-role="content">
+			<div class="content-primary">
+		<h2>Theming the content area</h2>
+		<p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should be themed by adding the <code> data-theme</code> attribute to the <code> data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add the <code> data-theme</code> attribute to the content container, the background color will stop after the content. So there may be a gap in color between the content and fixed footer.)</p>
+		<p>Additionally, the content area of a collapsible can be themed to match the theme of the collapsible header using the <code>data-content-theme</code> attribute.</p>
+<code>
+&lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong> <strong>data-content-theme=&quot;a&quot;</strong>&gt;
+</code>
+		<h2>Theming collapsible blocks</h2>
+		<p>To set the color of the collapsible header, add the <code> data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>
+<code>
+&lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;true&quot; <strong> data-theme=&quot;a&quot;&gt;</strong>
+</code>
+		<h2>Themed examples</h2>
+		<p><strong>A</strong> theme swatch on content &amp; collapsible</p>
+		<div class="ui-body ui-body-a">
+			<h1>H1 Heading</h1>
+			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+			<div data-role="collapsible" data-collapsed="true" data-theme="a">
+				<h3>I'm a themed collapsible</h3>
+				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div><!-- /collapsible -->
+			<div data-role="collapsible" data-theme="a" data-content-theme="a">
+				<h3>I'm a themed collapsible with a themed content</h3>
+				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div>
+		</div><!-- /themed container -->
+		<p><strong>B</strong> theme swatch on content &amp; collapsible</p>
+		<div class="ui-body ui-body-b">
+			<h1>H1 Heading</h1>
+			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+			<div data-role="collapsible" data-collapsed="true" data-theme="b">
+				<h3>I'm a themed collapsible</h3>
+				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div><!-- /collapsible -->
+			<div data-role="collapsible" data-theme="b" data-content-theme="b">
+				<h3>I'm a themed collapsible with a themed content</h3>
+				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div>
+		</div><!-- /themed container -->
+		<p><strong>C</strong> theme swatch on content &amp; collapsible</p>
+		<div class="ui-body ui-body-c">
+			<h1>H1 Heading</h1>
+			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+			<div data-role="collapsible" data-collapsed="true" data-theme="c">
+				<h3>I'm a themed collapsible</h3>
+				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div><!-- /collapsible -->
+			<div data-role="collapsible" data-theme="c" data-content-theme="c">
+				<h3>I'm a themed collapsible with a themed content</h3>
+				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div>
+		</div><!-- /themed container -->
+		<p><strong>D</strong> theme swatch on content &amp; collapsible</p>
+		<div class="ui-body ui-body-d">
+			<h1>H1 Heading</h1>
+			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+			<div data-role="collapsible" data-collapsed="true" data-theme="d">
+				<h3>I'm a themed collapsible</h3>
+				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div><!-- /collapsible -->
+			<div data-role="collapsible" data-theme="d" data-content-theme="d">
+				<h3>I'm a themed collapsible with a themed content</h3>
+				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div>
+		</div><!-- /themed container -->
+		<p><strong>E</strong> theme swatch on content &amp; collapsible</p>
+		<div class="ui-body ui-body-e">
+			<h1>H1 Heading</h1>
+			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+			<div data-role="collapsible" data-collapsed="true" data-theme="e">
+				<h3>I'm a themed collapsible</h3>
+				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div><!-- /collapsible -->
+			<div data-role="collapsible" data-theme="e" data-content-theme="e">
+				<h3>I'm a themed collapsible with a themed content</h3>
+				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div>
+		</div><!-- /themed container -->
+	</div><!--/content-primary -->
+	<div class="content-secondary">
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				<h3>More in this section</h3>
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+						<li data-role="list-divider">Content Formatting</li>
+						<li><a href="content-html.html">Basic HTML styles</a></li>
+						<li><a href="content-grids.html">Layout grids (columns)</a></li>
+						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+						<li data-theme="a"><a href="content-themes.html">Theming content</a></li>
+				</ul>
+		</div>
+	</div>
+</div><!-- /content -->
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011-12 The jQuery Foundation</p>
+</div>
+</div><!-- /page -->
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/content/index.html ADDED

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Content formatting</title>
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+<div data-role="page" class="type-index">
+		<div data-role="header" data-theme="f">
+		<h1>Content formatting</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div><!-- /header -->
+	<div data-role="content">
+		<p>The content of pages in jQuery Mobile is completely open-ended, but the jQuery Mobile framework provides a number of helpful tools and widgets &mdash; such as collapsible panels and multiple-column grid layouts &mdash; to make it easy to format your content for mobile devices.</p>
+		<ul data-role="listview" data-inset="true">
+			<li><a href="content-html.html">Basic HTML styles</a></li>
+			<li><a href="content-grids.html">Layout grids (columns)</a></li>
+			<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+			<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+			<li><a href="content-themes.html">Theming content</a></li>
+			<!--<li><a href="api-content.html">API documentation</a></li>-->
+		</ul>
+	</div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/forms/checkboxes/events.html ADDED

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Checkboxes</title>
+	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+	<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../../../js/jquery.js"></script>
+	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+	<div data-role="page" class="type-interior">
+		<div data-role="header" data-theme="f">
+		<h1>Checkboxes</h1>
+		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div><!-- /header -->
+	<div data-role="content">
+		<div class="content-primary">
+		<form action="#" method="get">
+		<h2>Checkboxes</h2>
+			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
+				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+				<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+			</ul>
+			<p>Bind events directly to the <code>input</code> element.  Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+			<pre><code>
+$("input[type='checkbox']").bind( "change", function(event, ui) {
+  ...
+});
+</code></pre>
+			<p>The checkbox plugin has the following custom events:</p>
+	<dl>
+		<dt><code>create</code> triggered when a checkbox is created</dt>
+		<dd>
+			<pre><code>
+$("input[type='checkbox']").checkboxradio({
+   create: function(event, ui) { ... }
+});
+			</code></pre>
+		</dd>
+	</dl>
+	</form>
+	</div><!--/content-primary -->
+	<div class="content-secondary">
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				<h3>More in this section</h3>
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+					<li data-role="list-divider">Form elements</li>
+					<li><a href="../docs-forms.html">Form basics</a></li>
+					<li><a href="../forms-all.html">Form element gallery</a></li>
+					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+					<li><a href="../textinputs/index.html">Text inputs</a></li>
+					<li><a href="../search/">Search input</a></li>
+					<li><a href="../slider/">Slider</a></li>
+					<li><a href="../switch/">Flip toggle switch</a></li>
+					<li><a href="../radiobuttons/">Radio buttons</a></li>
+					<li data-theme="a"><a href="index.html">Checkboxes</a></li>
+					<li><a href="../selects/">Select menus</a></li>
+					<li><a href="../forms-themes.html">Theming forms</a></li>
+					<li><a href="../forms-all-native.html">Native form elements</a></li>
+					<li><a href="../forms-sample.html">Submitting forms</a></li>
+				</ul>
+		</div>
+	</div>
+</div><!-- /content -->
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011-12 The jQuery Foundation</p>
+</div>
+</div><!-- /page -->
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/forms/checkboxes/index.html ADDED

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Checkboxes</title>
+	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+	<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../../../js/jquery.js"></script>
+	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+	<div data-role="page" class="type-interior">
+		<div data-role="header" data-theme="f">
+		<h1>Checkboxes</h1>
+		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div><!-- /header -->
+	<div data-role="content">
+		<div class="content-primary">
+		<form action="#" method="get">
+		<h2>Checkboxes</h2>
+    <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+      <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+      <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+      <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+      <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+    </ul>
+		<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>
+		<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>
+		<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>
+		<pre><code>
+&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; /&gt; I agree &lt;/label&gt;
+&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-0&quot; id=&quot;checkbox-0&quot; class=&quot;custom&quot; /&gt;
+&lt;label for=&quot;checkbox-0&quot;&gt;I agree&lt;/label&gt;
+		</code></pre>
+		<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>
+		<label> <input type="checkbox" name="checkbox-1 "/> I agree</label>
+		<input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
+		<label for="checkbox-0">I agree</label>
+		<h2>Mini version</h2>
+		<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>
+<pre><code>
+&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;
+&lt;label for=&quot;checkbox-mini-0&quot;&gt;I agree&lt;/label&gt;
+</code></pre>
+		<p>This will produce a select that is not as tall as the standard version and has a smaller text size.</p>
+		<input type="checkbox" name="checkbox-0" id="checkbox-mini-0" class="custom" data-mini="true" />
+		<label for="checkbox-mini-0">I agree</label>
+		<h2>Field containers &amp; Legends</h2>
+		<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>
+		<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>
+<pre><code>
+&lt;div data-role=&quot;fieldcontain&quot;&gt;
+    <strong>&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
+	   &lt;legend&gt;Agree to the terms:&lt;/legend&gt;</strong>
+	   &lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot; class=&quot;custom&quot; /&gt;
+	   &lt;label for=&quot;checkbox-1&quot;&gt;I agree&lt;/label&gt;
+    <strong>&lt;/fieldset&gt;</strong>
+&lt;/div&gt;
+</code></pre>
+	<div data-role="fieldcontain">
+	 	<fieldset data-role="controlgroup">
+			<legend>Agree to the terms:</legend>
+			<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
+			<label for="checkbox-1">I agree</label>
+	    </fieldset>
+	</div>
+		<h2>Vertically grouped checkboxes</h2>
+		<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>
+			<div  data-role="fieldcontain">
+			 	<fieldset data-role="controlgroup">
+					<legend>Choose as many snacks as you'd like:</legend>
+					<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
+					<label for="checkbox-1a">Cheetos</label>
+					<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+					<label for="checkbox-2a">Doritos</label>
+					<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
+					<label for="checkbox-3a">Fritos</label>
+					<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
+					<label for="checkbox-4a">Sun Chips</label>
+			    </fieldset>
+			</div>
+		<h2>Horizontal toggle sets</h2>
+		<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>
+<code>
+&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-type=&quot;horizontal&quot;</strong>&gt;
+</code>
+			<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>
+		<div data-role="fieldcontain">
+		    <fieldset data-role="controlgroup" data-type="horizontal">
+		    	<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>
+		</div>
+	</form>
+	</div><!--/content-primary -->
+	<div class="content-secondary">
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				<h3>More in this section</h3>
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+					<li data-role="list-divider">Form elements</li>
+					<li><a href="../docs-forms.html">Form basics</a></li>
+					<li><a href="../forms-all.html">Form element gallery</a></li>
+					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+					<li><a href="../textinputs/index.html">Text inputs</a></li>
+					<li><a href="../search/">Search input</a></li>
+					<li><a href="../slider/">Slider</a></li>
+					<li><a href="../switch/">Flip toggle switch</a></li>
+					<li><a href="../radiobuttons/">Radio buttons</a></li>
+					<li data-theme="a"><a href="index.html">Checkboxes</a></li>
+					<li><a href="../selects/">Select menus</a></li>
+					<li><a href="../forms-themes.html">Theming forms</a></li>
+					<li><a href="../forms-all-native.html">Native form elements</a></li>
+					<li><a href="../forms-sample.html">Submitting forms</a></li>
+				</ul>
+		</div>
+	</div>
+</div><!-- /content -->
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011-12 The jQuery Foundation</p>
+</div>
+</div><!-- /page -->
+</body>
+</html>