mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 23:10:24 +00:00
161f5e6ae3
This makes our include model match the include model on the CDN, and allows devs to make use of mobileinit for debugging some of the samples since that must be set up after jquery.js, but before jquery-mobile.
59 lines
No EOL
2.4 KiB
HTML
Executable file
59 lines
No EOL
2.4 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>jQuery Mobile Docs - Lists</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script type="text/javascript" src="../../js/jquery.js"></script>
|
|
<script type="text/javascript" src="../../js/"></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">
|
|
|
|
<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>
|
|
|
|
<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>
|
|
<a href="index.html" data-role="button">Link button</a>
|
|
</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 — 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> |