Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

116 lines (80 sloc) 5.988 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Button types</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.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/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Button basics</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>Button basics</h2>
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="buttons-types.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
<li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
<li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
<li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<p>Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (<code>a</code> elements) to mark up navigation buttons, and <code>input</code> or <code>button</code> elements for form submission.</p>
<p>View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes for buttons including adding <a href="buttons-icons.html">icons</a> or displaying them <a href="buttons-inline.html">inline</a> or <a href="buttons-grouped.html">grouped</a>.</p>
<h2>Styling links as buttons</h2>
<p>In the main content block of a page, you can style any anchor link as a button by adding the <code>data-role="button"</code> attribute. The framework will enhance the link with markup and classes to style the link as a button. For example, this markup: </p>
<code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a&gt;
</code>
<p>Produces this <strong>link-based</strong> button:</p>
<a href="index.html" data-role="button">Link button</a>
<p><strong>Note:</strong> Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the <code>button</code> plugin and only just use the underlying <code>buttonMarkup</code> plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.</p>
<h2>Mini size</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 button to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; <strong>data-mini=&quot;true&quot;</strong>&gt;Link button&lt;/a&gt;
</code></pre>
<p>This will produce a search input that a not as tall as the standard version and has a smaller text size.</p>
<a href="index.html" data-role="button" data-mini="true">Link button</a>
<h2>Form buttons</h2>
<p>For ease of styling, the framework automatically converts any <code>button</code> or <code>input</code> element with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled button &mdash; there is no need to add the <code> data-role="button"</code> attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:</p>
<code>
$('[type='submit']').button();
</code>
<p>To preserve events bound to the original <code>button</code> or <code>input</code>, the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the the custom-styled button, they're actually clicking on the original element. To prevent a form button from being converted into an enhanced button, add the <code>data-role="none"</code> attribute and the native control will be rendered.</p>
<p><strong>Button</strong> based button:</p>
<button>Button element</button>
<p><strong>Input type="button"</strong> based button:</p>
<input type="button" value="buttonBtn" />
<p><strong>Input type="submit"</strong> based button:</p>
<input type="submit" value="submitBtn" />
<p><strong>Input type="reset"</strong> based button:</p>
<input type="reset" value="resetBtn" />
</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">Buttons</li>
<li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
<li><a href="buttons-icons.html">Button icons</a></li>
<li><a href="buttons-inline.html">Inline buttons</a></li>
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
<li><a href="buttons-themes.html">Theming buttons</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>
Jump to Line
Something went wrong with that request. Please try again.