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

<!DOCTYPE html> 
<html> 
	<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="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../js/jquery.js"></script>
	<script src="../../js/"></script>
	<script src="../docs/docs.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header" data-theme="b">
		<h1>Button markup options</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">
	
	<p>Buttons that are used for navigation should be coded as anchor links, and those that submit forms as <code>button</code> elements &mdash; each will be styled identically by the framework.</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> to the link. The framework will add all necessary 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>
		
		<h2>Form buttons</h2>
		<p>For ease of styling, the framework automatically converts any <code>button</code> element or <code>input</code> with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled link-based button &mdash; there is no need to add the <code> data-role="button"</code> attribute. </p>
		<p>The original form-based button is hidden, but remains in the markup.  When a click event fires on a link button, it triggers a click on the original form button.</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="Input type=button" />
		
		<p><strong>Input type="submit"</strong> based button:</p>
		<input type="submit" value="Input type=submit" />
		
		<p><strong>Input type="reset"</strong> based button:</p>
		<input type="reset" value="Input type=reset" />
		
		<p><strong>Input type="image"</strong> based button:</p>
		<input type="image" value="Input type=image" />
		
	</div><!-- /content -->
</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 - Button types</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>`
			`<script src="../../js/"></script>`
			`<script src="../docs/docs.js"></script>`
New button docs and demos 2010-10-11 18:25:08 +00:00			`</head>`
			`<body>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="page">`
New button docs and demos 2010-10-11 18:25:08 +00:00
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="header" data-theme="b">`
New button docs and demos 2010-10-11 18:25:08 +00:00			`<h1>Button markup options</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">`
content edits 2010-10-15 21:34:00 +00:00
			`<p>Buttons that are used for navigation should be coded as anchor links, and those that submit forms as <code>button</code> elements — each will be styled identically by the framework.</p>`

simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00			`<h2>Styling links as buttons</h2>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +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> to the link. The framework will add all necessary 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
simplied button docs to merge docs into examples 2010-10-13 20:38:29 +00:00			`<h2>Form buttons</h2>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<p>For ease of styling, the framework automatically converts any <code>button</code> element or <code>input</code> with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled link-based button — there is no need to add the <code> data-role="button"</code> attribute. </p>`
content edits 2010-10-15 21:29:50 +00:00			`<p>The original form-based button is hidden, but remains in the markup. When a click event fires on a link button, it triggers a click on the original form button.</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>`
New button docs and demos 2010-10-11 18:25:08 +00:00			`<input type="button" value="Input type=button" />`

content edits 2010-10-15 21:31:29 +00:00			`<p><strong>Input type="submit"</strong> based button:</p>`
New button docs and demos 2010-10-11 18:25:08 +00:00			`<input type="submit" value="Input type=submit" />`

content edits 2010-10-15 21:31:29 +00:00			`<p><strong>Input type="reset"</strong> based button:</p>`
New button docs and demos 2010-10-11 18:25:08 +00:00			`<input type="reset" value="Input type=reset" />`

content edits 2010-10-15 21:31:29 +00:00			`<p><strong>Input type="image"</strong> based button:</p>`
New button docs and demos 2010-10-11 18:25:08 +00:00			`<input type="image" value="Input type=image" />`

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

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