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

<!DOCTYPE html> 
<html class="ui-mobile-rendering"> 
	<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 data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
	<script src="../../js/jquery.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" class="ui-btn-right jqm-home">Home</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. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to buttons.</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>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>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 hte 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" />
		
		<p><strong>Input type="image"</strong> based button:</p>
		<input type="image" value="imageBtn" />
		
	</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 The jQuery Project</p>
</div>
	
</div><!-- /page -->

</body>
</html>
New button docs and demos 2010-10-11 18:25:08 +00:00			`<!DOCTYPE html>`
add ui-mobile-rendering to docs to temprarily prevent fouc with async load. @gseguin to address with jqm-docs.js change 2012-01-04 21:59:17 +00:00			`<html class="ui-mobile-rendering">`
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 - Button types</title>`
Updated docs’ CSS to use new @import scheme. 2012-01-10 21:35:08 +00:00			`<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />`
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"/>`
Move require.js to first tag so it can catch jquery module registration Otherwise jquery may be loaded twice 2012-01-13 05:25:59 +00:00
Added require.js 1.0.3 as a submodule 2011-12-24 08:48:08 +00:00			`<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>`
Move require.js to first tag so it can catch jquery module registration Otherwise jquery may be loaded twice 2012-01-13 05:25:59 +00:00			`<script src="../../js/jquery.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">`
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			`<h1>Button basics</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">`
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
			`<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>`


Added links to the data- attribute reference to key pages, removed old API pages 2011-11-14 02:13:53 +00:00			`<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. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to buttons.</p>`
content edits 2010-10-15 21:34:00 +00:00
simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00			`<h2>Styling links as buttons</h2>`

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			`<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>`
simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00
			`<code>`
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">Link button</a>`
simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00			`</code>`

content edits 2010-10-15 21:29:50 +00:00			`<p>Produces this <strong>link-based</strong> button:</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">Link button</a>`
improved page layout and typography 2010-10-11 18:31:33 +00:00
Text tweak 2011-10-16 03:26:21 +00:00			<p>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>
Added notes about how link-based buttons differ from form buttons 2011-10-16 03:23:52 +00:00
simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00			`<h2>Form buttons</h2>`
Added notes about how link-based buttons differ from form buttons 2011-10-16 03:23:52 +00:00			`<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 — 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 hte native control will be rendered.</p>`
simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00
content edits 2010-10-15 21:31:29 +00:00			`<p><strong>Button</strong> based button:</p>`
New button docs and demos 2010-10-11 18:25:08 +00:00			`<button>Button element</button>`

content edits 2010-10-15 21:31:29 +00:00			`<p><strong>Input type="button"</strong> based button:</p>`
Tweaked odd input values in demo page for buttons 2011-10-12 22:08:43 +00:00			`<input type="button" value="buttonBtn" />`
New button docs and demos 2010-10-11 18:25:08 +00:00
content edits 2010-10-15 21:31:29 +00:00			`<p><strong>Input type="submit"</strong> based button:</p>`
Tweaked odd input values in demo page for buttons 2011-10-12 22:08:43 +00:00			`<input type="submit" value="submitBtn" />`
New button docs and demos 2010-10-11 18:25:08 +00:00
content edits 2010-10-15 21:31:29 +00:00			`<p><strong>Input type="reset"</strong> based button:</p>`
Tweaked odd input values in demo page for buttons 2011-10-12 22:08:43 +00:00			`<input type="reset" value="resetBtn" />`
New button docs and demos 2010-10-11 18:25:08 +00:00
content edits 2010-10-15 21:31:29 +00:00			`<p><strong>Input type="image"</strong> based button:</p>`
Tweaked odd input values in demo page for buttons 2011-10-12 22:08:43 +00:00			`<input type="image" value="imageBtn" />`
New button docs and demos 2010-10-11 18:25:08 +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
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			`<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 data-theme="a"><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><a href="buttons-inline.html">Inline buttons</a></li>`
			`<li><a href="buttons-grouped.html">Grouped buttons</a></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-themes.html">Theming buttons</a></li>`
added navigation components to most docs pages 2011-06-20 20:35:27 +00:00			`</ul>`
			`</div>`
			`</div>`

			`</div><!-- /content -->`

			`<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>`

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

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