mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-20 20:31:52 +00:00
improved page layout and typography
This commit is contained in:
parent
5b24a75f3c
commit
2a481b5e90
3 changed files with 27 additions and 15 deletions
|
|
@ -15,31 +15,36 @@
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="ui-body ui-body-c">
|
||||
|
||||
<h2>Icon position options</h2>
|
||||
<p>No icon</p>
|
||||
<p><strong>No icon</strong></p>
|
||||
<a href="index.html" data-role="button">My button</a>
|
||||
<p>Left icon (default) - <code>data-iconpos="left"</code></p>
|
||||
<p><strong>Left icon</strong> (default) - data-iconpos="left"</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete">My button</a>
|
||||
<p>Right icon - <code>data-iconpos="right"</code></p>
|
||||
<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>Icon only - <code>data-iconpos="notext"</code></p>
|
||||
<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>Left arrow - <code>data-icon="arrow-u"</code></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>Right arrow - <code>data-icon="arrow-d"</code></p>
|
||||
<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>Up arrow - <code>data-icon="arrow-u"</code></p>
|
||||
<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>Down arrow - <code>data-icon="arrow-d"</code></p>
|
||||
<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>Delete - <code>data-icon="delete"</code></p>
|
||||
<p><strong>Delete</strong> - data-icon="delete"</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete">My button</a>
|
||||
<p>Plus - <code>data-icon="plus"</code></p>
|
||||
<p><strong>Plus</strong> - data-icon="plus"</p>
|
||||
<a href="index.html" data-role="button" data-icon="plus">My button</a>
|
||||
<p>Minus - <code>data-icon="minus"</code></p>
|
||||
<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 -->
|
||||
|
||||
|
|
|
|||
|
|
@ -32,10 +32,7 @@
|
|||
<a href="index.html" data-role="button" data-icon="plus">Add</a>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-u">Move</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
|
||||
|
|
|
|||
|
|
@ -15,18 +15,28 @@
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="ui-body ui-body-c">
|
||||
|
||||
<p><strong>Link</strong> based button</p>
|
||||
<a href="index.html" data-role="button">Link element</a>
|
||||
|
||||
<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><!-- /ui-body wrapper -->
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue