mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-22 17:00:24 +00:00
53 lines
No EOL
2.1 KiB
HTML
Executable file
53 lines
No EOL
2.1 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Lists</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>Button markup options</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
<h2>Styling links as buttons</h2>
|
|
|
|
<p>In the main content block of a page, you can style any link as a button by adding the <code>data-role="button"</code> to the link. The framework will add the necessary classes to style the link as a button. </p>
|
|
|
|
<code>
|
|
<a href="index.html" data-role="button">Link button</a>
|
|
</code>
|
|
|
|
<p><strong>Link</strong> based button example:</p>
|
|
<a href="index.html" data-role="button">Link button</a>
|
|
|
|
<h2>Form buttons</h2>
|
|
<p>A <code>button</code> element or an <code>input</code> with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> will all be automatically transformed into a custom styled button, no need to add the <code>data-role="button"</code> attribute. </p>
|
|
<p>Because it's not possible to consistently form buttons consistently across platforms, the framework actually generates a new link-based button for each form button button and hides the original. 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> |