jquery-mobile/docs/buttons/buttons-inline.html

<!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>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>
&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; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
&lt;/div&gt;
</pre></code>

		<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>
New button docs and demos 2010-10-11 18:25:08 +00:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<title>jQuery Mobile Docs - Buttons</title>`
Created a themes directory and moved all CSS and images there. Edited the PHP combiner and .htaccess logic to accommodate this change, as well as allowing manifest files to use a "../" when referencing files, which will be handy when adding themes that don't include structural files yet. Modified all HTML files to point to /themes/default for their theme. 2010-10-13 16:45:10 +00:00			`<link rel="stylesheet" href="../../themes/default" />`
fixed paths to js and css files when these files are opened standalone 2010-10-11 23:44:14 +00:00			`<script type="text/javascript" src="../../js/all"></script>`
			`<script type="text/javascript" src="../docs/docs.js"></script>`
New button docs and demos 2010-10-11 18:25:08 +00:00			`</head>`
			`<body>`

			`<div data-role="page">`

			`<div data-role="header">`
			`<h1>Inline buttons</h1>`
			`</div><!-- /header -->`

switched up padding and margins on content div. Now it will get 15px padding, unless its a fullscreen page. Inset listviews have no margin now, and regular listviews have -15px margins. Also, collapsibles now have no padding. Updated HTML to remove ui-body classes for content divs, to match these changes. Fixes #161 2010-10-12 19:50:28 +00:00			`<div data-role="content">`
New button docs and demos 2010-10-11 18:25:08 +00:00
improved inline btn docs for patty to re-write 2010-10-15 21:56:26 +00:00			`<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>`
simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00
			`<pre><code>`
			`<div data-inline="true">`
			`<a href="index.html" data-role="button">Cancel</a>`
improved inline btn docs for patty to re-write 2010-10-15 21:56:26 +00:00			`<a href="index.html" data-role="button" data-theme="b">Save</a>`
simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00			`</div>`
			`</pre></code>`

improved inline btn docs for patty to re-write 2010-10-15 21:56:26 +00:00			`<p>This creates an inline button set:</p>`
updated to use the new data-inline="true" attribute 2010-10-11 20:19:31 +00:00
			`<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>`

New button docs and demos 2010-10-11 18:25:08 +00:00
edits 2010-10-16 01:27:32 +00:00			`<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>`
simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00
New button docs and demos 2010-10-11 18:25:08 +00:00
removed the class="ui-body" wrappers on pages, added to content div. hopefully, we can remove the class completely and have the framework add it for you. 2010-10-11 19:51:59 +00:00
New button docs and demos 2010-10-11 18:25:08 +00:00			`</div><!-- /content -->`
			`</div><!-- /page -->`

			`</body>`
			`</html>`