mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 06:50:23 +00:00
161f5e6ae3
This makes our include model match the include model on the CDN, and allows devs to make use of mobileinit for debugging some of the samples since that must be set up after jquery.js, but before jquery-mobile.
55 lines
No EOL
2 KiB
HTML
Executable file
55 lines
No EOL
2 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>jQuery Mobile Docs - Buttons</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script type="text/javascript" src="../../js/jquery.js"></script>
|
|
<script type="text/javascript" src="../../js/"></script>
|
|
<script type="text/javascript" src="../docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Inline buttons</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<p>By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:</p>
|
|
|
|
<a href="index.html" data-role="button">Button</a>
|
|
|
|
|
|
<p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code>data-inline="true"</code> attribute to the button:</p>
|
|
|
|
|
|
<a href="index.html" data-role="button" data-inline="true">Button</a>
|
|
|
|
<p>If you have multiple buttons that should sit side-by-side on the same line, wrap the buttons in a container that has a <code>data-inline="true"</code> attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
|
|
|
|
<pre><code>
|
|
<div data-inline="true">
|
|
<a href="index.html" data-role="button">Cancel</a>
|
|
<a href="index.html" data-role="button" data-theme="b">Save</a>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<p>This creates an inline button set:</p>
|
|
|
|
<a href="index.html" data-role="button" data-inline="true">Cancel</a>
|
|
<a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>
|
|
|
|
|
|
<p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the <a href="../content/content-grids.html">content column grids</a> to put normal full-width buttons into 2- or 3-columns.</p>
|
|
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |