Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-28 09:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved inline btn docs for patty to re-write

Browse source
This commit is contained in:
Todd Parker 2010-10-15 17:56:26 -04:00
parent 458d905095
commit 922e27adbe
1 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
docs/buttons/buttons-inline.html
View file

@ -16,16 +16,26 @@
<div data-role="content">
<p>If you have multiple buttons that should sit side-by-side on the same line instead of stacked like the default buttons, 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>
<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>
&lt;div data-inline=&quot;true&quot;&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Cancel&lt;/a&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Save&lt;/a&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
&lt;/div&gt;
</pre></code>
<p><strong>Inline</strong> buttons</p>
<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>