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

<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Inline buttons</title> 
	<link rel="stylesheet"  href="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../js/jquery.js"></script>
	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
	<script src="../_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>Inline buttons</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<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, add the <code> data-inline="true"</code> attribute to each button. 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;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Cancel&lt;/a&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
</code></pre>

		<p>The result is this:</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-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><a href="buttons-types.html">Button basics</a></li>
						<li><a href="buttons-icons.html">Button icons</a></li>
						<li data-theme="a"><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 The jQuery Project</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>
New button docs and demos 2010-10-11 18:25:08 +00:00			`<!DOCTYPE html>`
			`<html>`
set utf-8 2010-11-02 01:46:29 +00:00			`<head>`
Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags. 2011-02-18 20:00:18 +00:00			`<meta charset="utf-8">`
Ya'll can scale your pages now. Fixes #1645. Note: we originally disabled user zooming to work around a bug in iOS that automatically zooms the page beyond the constraints of the viewport on orientation change. We are not working around this bug at all now, but you are free to include any meta tag you'd like, or better yet, consider this polyfill: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ 2011-05-17 21:28:19 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1">`
Added a home link to all pages and changed the header bar theme swatch to b globally 2011-02-03 22:29:48 +00:00			`<title>jQuery Mobile Docs - Inline buttons</title>`
Sweep through all files to add a trailing slash to <link> tags that include thems/default. This should fix Opera Mobile Issue 763. 2011-01-06 00:19:24 +00:00			`<link rel="stylesheet" href="../../themes/default/" />`
Added link to demo css file to all docs pages 2010-11-11 19:15:42 +00:00			`<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>`
been meaning to do this for a while. 2011-04-14 20:04:47 +00:00			`<script src="../../js/jquery.js"></script>`
linked up js docs references properly 2011-06-20 19:41:40 +00:00			`<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>`
			`<script src="../_assets/js/jqm-docs.js"></script>`
been meaning to do this for a while. 2011-04-14 20:04:47 +00:00			`<script src="../../js/"></script>`
New button docs and demos 2010-10-11 18:25:08 +00:00			`</head>`
			`<body>`

updated header themes 2011-06-20 19:57:04 +00:00			`<div data-role="page" class="type-interior">`
New button docs and demos 2010-10-11 18:25:08 +00:00
updated header themes 2011-06-20 19:57:04 +00:00			`<div data-role="header" data-theme="f">`
New button docs and demos 2010-10-11 18:25:08 +00:00			`<h1>Inline buttons</h1>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>`
New button docs and demos 2010-10-11 18:25:08 +00:00			`</div><!-- /header -->`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="content">`
added navigation components to most docs pages 2011-06-20 20:35:27 +00:00			`<div class="content-primary">`
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>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<a href="index.html" data-role="button">Button</a>`
improved inline btn docs for patty to re-write 2010-10-15 21:56:26 +00:00

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<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>`
improved inline btn docs for patty to re-write 2010-10-15 21:56:26 +00:00

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<a href="index.html" data-role="button" data-inline="true">Button</a>`
improved inline btn docs for patty to re-write 2010-10-15 21:56:26 +00:00
Fixed inline button docs to remove the incorrect info that wrapping multiple buttons in a container with data-inline="true" woudl work. You must add this each each button. 2011-07-15 20:11:26 +00:00			`<p>If you have multiple buttons that should sit side-by-side on the same line, add the <code> data-inline="true"</code> attribute to each button. 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>`
Fixed inline button docs to remove the incorrect info that wrapping multiple buttons in a container with data-inline="true" woudl work. You must add this each each button. 2011-07-15 20:11:26 +00:00			`<a href="index.html" data-role="button" data-inline="true">Cancel</a>`
			`<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>`
fixed doc: missing/invalid HTML tags and wrong paths 2010-11-16 11:31:44 +00:00			`</code></pre>`
simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00
Fixed inline button docs to remove the incorrect info that wrapping multiple buttons in a container with data-inline="true" woudl work. You must add this each each button. 2011-07-15 20:11:26 +00:00			`<p>The result is this:</p>`
updated to use the new data-inline="true" attribute 2010-10-11 20:19:31 +00:00
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +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>`
updated to use the new data-inline="true" attribute 2010-10-11 20:19:31 +00:00
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
added navigation components to most docs pages 2011-06-20 20:35:27 +00:00			`</div><!--/content-primary -->`

			`<div class="content-secondary">`

adjusted the presentation of the left nav and footer for the docs 2011-09-29 20:35:31 +00:00			`<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">`
added navigation components to most docs pages 2011-06-20 20:35:27 +00:00
more updates to the docs markup. getting close! 2011-06-20 22:23:09 +00:00			`<h3>More in this section</h3>`
added navigation components to most docs pages 2011-06-20 20:35:27 +00:00
			`<ul data-role="listview" data-theme="c" data-dividertheme="d">`

updated the rest of the navs to be local to their section. 2011-06-20 21:17:04 +00:00			`<li data-role="list-divider">Buttons</li>`
added nav bar and updated content (now includes a nav bar for options, methods, and events pages) 2011-09-29 17:03:35 +00:00			`<li><a href="buttons-types.html">Button basics</a></li>`
updated the rest of the navs to be local to their section. 2011-06-20 21:17:04 +00:00			`<li><a href="buttons-icons.html">Button icons</a></li>`
			`<li data-theme="a"><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>`
added navigation components to most docs pages 2011-06-20 20:35:27 +00:00
			`</ul>`
			`</div>`
			`</div>`

New button docs and demos 2010-10-11 18:25:08 +00:00			`</div><!-- /content -->`

added navigation components to most docs pages 2011-06-20 20:35:27 +00:00			`<div data-role="footer" class="footer-docs" data-theme="c">`
updated the footers in the new docs templates 2011-06-20 22:50:52 +00:00			`<p>© 2011 The jQuery Project</p>`
added navigation components to most docs pages 2011-06-20 20:35:27 +00:00			`</div>`

			`</div><!-- /page -->`

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