mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-25 18:30:23 +00:00
161 lines
12 KiB
HTML
Executable file
161 lines
12 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">
|
|
|
|
<h2>Adding Icons to Buttons</h2>
|
|
<p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p>
|
|
|
|
|
|
<p>An icon can be added to a button by adding a <code>data-icon</code> attribute on the anchor specifying the icon to display. For example, the following markup:</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>The following <code>data-icon</code> attributes can be referenced to create the icons shown below:</p>
|
|
|
|
<p><strong>Left arrow</strong> - data-icon="arrow-l"</p>
|
|
<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
|
|
<p><strong>Right arrow</strong> - data-icon="arrow-r"</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>
|
|
<p><strong>Check</strong> - data-icon="check"</p>
|
|
<a href="index.html" data-role="button" data-icon="check">My button</a>
|
|
<p><strong>Gear</strong> - data-icon="gear"</p>
|
|
<a href="index.html" data-role="button" data-icon="gear">My button</a>
|
|
<p><strong>Refresh</strong> - data-icon="refresh"</p>
|
|
<a href="index.html" data-role="button" data-icon="refresh">My button</a>
|
|
<p><strong>Forward</strong> - data-icon="forward"</p>
|
|
<a href="index.html" data-role="button" data-icon="forward">My button</a>
|
|
<p><strong>Back</strong> - data-icon="back"</p>
|
|
<a href="index.html" data-role="button" data-icon="back">My button</a>
|
|
<p><strong>Grid</strong> - data-icon="grid"</p>
|
|
<a href="index.html" data-role="button" data-icon="grid">My button</a>
|
|
<p><strong>Star</strong> - data-icon="star"</p>
|
|
<a href="index.html" data-role="button" data-icon="star">My button</a>
|
|
<p><strong>Alert</strong> - data-icon="alert"</p>
|
|
<a href="index.html" data-role="button" data-icon="alert">My button</a>
|
|
<p><strong>Info</strong> - data-icon="info"</p>
|
|
<a href="index.html" data-role="button" data-icon="info">My button</a>
|
|
|
|
<!-- A themed -->
|
|
<h3>Swatch "A" themed buttons</h3>
|
|
<div data-role="controlgroup" data-type="horizontal">
|
|
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
|
|
</div>
|
|
|
|
<!-- B themed -->
|
|
<h3>Swatch "B" themed buttons</h3>
|
|
<div data-role="controlgroup" data-type="horizontal">
|
|
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
|
|
</div>
|
|
|
|
<!-- C themed -->
|
|
<h3>Swatch "C" themed buttons</h3>
|
|
<div data-role="controlgroup" data-type="horizontal">
|
|
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
|
|
</div>
|
|
|
|
<h2>Icon positioning</h2>
|
|
<p>By default, all icons in buttons are placed to the left of the text. This default may be overridden using the <code>data-iconpos</code> attribute. For example, the markup:</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>You can also create an icon-only button, by setting the <code>data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but 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>
|
|
|
|
<h2>Custom Icons</h2>
|
|
<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>
|