Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-20 06:10:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added more icons examples

Browse source
This commit is contained in:
Todd Parker 2010-10-15 20:00:21 -04:00
parent 30f11b9f60
commit e60216a1df
2 changed files with 81 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
docs/buttons/buttons-icons.html
View file

@ -65,8 +65,69 @@
<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>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>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>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>

35
docs/pages/pages-themes.html
View file

@ -24,21 +24,27 @@
<p>The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:</p>
<div class="ui-bar ui-bar-a">
<a href="#" data-icon="arrow-l">Back</a>
<div data-role="header" data-position="inline">
<h1>Default Theme Bar</h1>
</div>
<div class="ui-bar ui-bar-c">
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" data-icon="gear" data-role="button" data-inline="true">Tools</a>
<a href="#" data-icon="star" data-role="button" data-inline="true">Like</a>
<a href="#" data-icon="refresh" data-role="button" data-inline="true">Refresh</a>
</div><!-- /controlgroup -->
</div>
<div class="ui-body ui-body-c">
<h3>Default Theme Content Header</h3>
<p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
<label for="slider1">Input slider:</label>
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="a" />
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" />
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Cache settings:</legend>
<input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
<label for="radio-choice-a1">On</label>
<input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off" />
<label for="radio-choice-b1">Off</label>
<input type="radio" name="radio-choice-y1" id="radio-choice-y1" value="on" checked="checked" />
<label for="radio-choice-y1">On</label>
<input type="radio" name="radio-choice-z1" id="radio-choice-z1" value="off" />
<label for="radio-choice-z1">Off</label>
</fieldset>
<a href="#" data-role="button" data-inline="true">Button</a>
</div>
@ -52,8 +58,7 @@
<p>And each of the five "swatches" applies its style consistently across all page elements, as shown below:</p>
<h2>Swatch A</h2>
<div class="ui-bar ui-bar-a">
<a href="#" data-icon="arrow-l">Back</a>
<div data-role="header" data-position="inline" data-theme="a">
<h1>Header A</h1>
</div>
<div class="ui-body ui-body-a">
@ -78,8 +83,7 @@
<h2>Swatch B</h2>
<div class="ui-bar ui-bar-b">
<a href="#" data-icon="arrow-l">Back</a>
<div data-role="header" data-position="inline" data-theme="b">
<h1>Header B</h1>
</div>
<div class="ui-body ui-body-b">
@ -103,8 +107,7 @@
</div>
<h2>Swatch C</h2>
<div class="ui-bar ui-bar-c">
<a href="#" data-icon="arrow-l">Back</a>
<div data-role="header" data-position="inline" data-theme="c">
<h1>Header C</h1>
</div>
<div class="ui-body ui-body-c">
@ -128,8 +131,7 @@
</div>
<h2>Swatch D</h2>
<div class="ui-bar ui-bar-d">
<a href="#" data-icon="arrow-l">Back</a>
<div data-role="header" data-position="inline" data-theme="d">
<h1>Header D</h1>
</div>
<div class="ui-body ui-body-d">
@ -153,8 +155,7 @@
</div>
<h2>Swatch E</h2>
<div class="ui-bar ui-bar-e">
<a href="#" data-icon="arrow-l">Back</a>
<div data-role="header" data-position="inline" data-theme="e">
<h1>Header E</h1>
</div>
<div class="ui-body ui-body-e">