Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-23 21:55:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

edit

Browse source
This commit is contained in:
PattyToland 2010-10-15 21:35:35 -04:00
parent c48989e0b3
commit 0be6ab1012
1 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/buttons/buttons-grouped.html
View file

@ -15,7 +15,7 @@
</div><!-- /header -->
<div data-role="content">
<p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code>data-role="controlgroup"</code> attribute &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are group together. </p>
<p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code>data-role="controlgroup"</code> attribute &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
<pre><code>
&lt;div data-role=&quot;controlgroup&quot;&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Yes&lt;/a&gt;
@ -32,7 +32,7 @@
<a href="index.html" data-role="button">Maybe</a>
</div>
<p>By adding the <code>data-type="horizontal"</code> attribute to the control group container, you can swap this to a horizontal style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.
<p>By adding the <code>data-type="horizontal"</code> attribute to the <code>controlgroup</code> container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. (Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.)
<p><strong>Horizontal</strong> grouped buttons</p>
<div data-role="controlgroup" data-type="horizontal">