jquery-mobile/docs/buttons/buttons-icons.html
2010-10-11 14:31:33 -04:00

52 lines
No EOL
2 KiB
HTML
Executable file

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Buttons</title>
<link rel="stylesheet" media="only all" href="css/all" />
<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">
<div class="ui-body ui-body-c">
<h2>Icon position options</h2>
<p><strong>No icon</strong></p>
<a href="index.html" data-role="button">My button</a>
<p><strong>Left icon</strong> (default) - data-iconpos="left"</p>
<a href="index.html" data-role="button" data-icon="delete">My button</a>
<p><strong>Right icon</strong> - data-iconpos="right"</p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">My button</a>
<p><strong>Icon only</strong> - data-iconpos="notext"</p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">My button</a>
<h2>Icon glyphs</h2>
<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>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>