mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-11 01:41:01 +00:00
90 lines
No EOL
4.3 KiB
HTML
Executable file
90 lines
No EOL
4.3 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Buttons</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 icons</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<p>There a core set of standard icons included in the framework. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and black colored sprites and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>
|
|
|
|
|
|
|
|
<h2>Adding icons</h2>
|
|
|
|
<p>Icons can be added to buttons by adding a <code>data-icon</code> attribute on the anchor to specify the icon to display.</p>
|
|
|
|
<code>
|
|
<a href="index.html" data-role="button" <strong>data-icon="delete"</strong>>Delete</a>
|
|
</code>
|
|
|
|
<p>Creates this button with an icon:</p>
|
|
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
|
|
|
|
<h2>Icon set</h2>
|
|
|
|
<p>This is a reference for the icon names you can specify in the <code>data-icon</code> attribute.</p>
|
|
|
|
<p><strong>Left arrow</strong> - data-icon="arrow-u"</p>
|
|
<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
|
|
<p><strong>Right arrow</strong> - data-icon="arrow-d"</p>
|
|
<a href="index.html" data-role="button" data-icon="arrow-r">My button</a>
|
|
<p><strong>Up arrow</strong> - data-icon="arrow-u"</p>
|
|
<a href="index.html" data-role="button" data-icon="arrow-u">My button</a>
|
|
<p><strong>Down arrow</strong> - data-icon="arrow-d"</p>
|
|
<a href="index.html" data-role="button" data-icon="arrow-d">My button</a>
|
|
<p><strong>Delete</strong> - data-icon="delete"</p>
|
|
<a href="index.html" data-role="button" data-icon="delete">My button</a>
|
|
<p><strong>Plus</strong> - data-icon="plus"</p>
|
|
<a href="index.html" data-role="button" data-icon="plus">My button</a>
|
|
<p><strong>Minus</strong> - data-icon="minus"</p>
|
|
<a href="index.html" data-role="button" data-icon="minus">My button</a>
|
|
|
|
|
|
<code>
|
|
<a href="index.html" data-role="button" <strong>data-icon="delete"</strong>>Delete</a>
|
|
</code>
|
|
|
|
<p>Creates this button with an icon:</p>
|
|
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
|
|
|
|
<h2>Icon positioning</h2>
|
|
<p>By default, icons in buttons are added to the left of the text, but the <code>data-iconpos</code> attribute specifies the icon position: <code>left</code> or <code>right</code> of the text.</p>
|
|
|
|
<code>
|
|
<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="right"</strong>>Delete</a>
|
|
</code>
|
|
|
|
<p>Creates this button with right-aligned icon:</p>
|
|
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
|
|
|
|
<p>To create an icon-only button that has an icon but no text, set the <code>data-iconpos</code> attribute to <code>notext</code> and the button plugin will hide the text and add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. In this example, we're adding a plus (+) icon and positioning it to the right of the text with our <code>data-</code> attributes on the link.</p>
|
|
|
|
<code>
|
|
<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="notext"</strong>>Delete</a>
|
|
</code>
|
|
|
|
<p>Creates this icon-only button:</p>
|
|
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
|
|
|
|
|
|
<p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code>data-icon</code> value and apply it to the button. You can then write a CSS rule that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
|
|
|
|
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |