mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-23 17:30:31 +00:00
65 lines
No EOL
2.9 KiB
HTML
Executable file
65 lines
No EOL
2.9 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Buttons</title>
|
|
<link rel="stylesheet" href="../../themes/default" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
<script type="text/javascript" src="../docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Grouped buttons</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
<p>To visually group a set of buttons together to form a single block of buttons that look 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 and the framework will create a vertical button group. This removes all margins and drop shadows between the buttons and only rounds the top and bottom buttons to get the effect that they are group together. </p>
|
|
<pre><code>
|
|
<div data-role="controlgroup">
|
|
<a href="index.html" data-role="button">Yes</a>
|
|
<a href="index.html" data-role="button">No</a>
|
|
<a href="index.html" data-role="button">Maybe</a>
|
|
</div>
|
|
</pre></code>
|
|
|
|
<p>By default, grouped buttons are presented as a vertical list:</p>
|
|
|
|
<div data-role="controlgroup">
|
|
<a href="index.html" data-role="button">Yes</a>
|
|
<a href="index.html" data-role="button">No</a>
|
|
<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><strong>Horizontal</strong> grouped buttons</p>
|
|
<div data-role="controlgroup" data-type="horizontal">
|
|
<a href="index.html" data-role="button">Yes</a>
|
|
<a href="index.html" data-role="button">No</a>
|
|
<a href="index.html" data-role="button">Maybe</a>
|
|
</div>
|
|
|
|
<p><strong>Horizontal</strong> grouped buttons with icons</p>
|
|
<div data-role="controlgroup" data-type="horizontal" >
|
|
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
|
|
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
|
|
</div>
|
|
|
|
<p><strong>Horizontal</strong> grouped buttons, icon only</p>
|
|
<div data-role="controlgroup" data-type="horizontal" >
|
|
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
|
|
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |