Skip to content

Commit 79d8d1a

Browse files
jaspermdegrootarschmitz
jaspermdegroot
authored and
arschmitz
committed
Demos: First pass on updating to inline-block icons
1 parent 5c050aa commit 79d8d1a

File tree

61 files changed

+352
-376
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+352
-376
lines changed

‎demos/backbone-requirejs/index.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
</p>
3939
<p>Although there is a high amount of developer interest with using jQuery Mobile, Backbone.js, and Require.js together, there is a high barrier of entry. Many users are confused about how to use the Backbone.js Router class object with the jQuery Mobile routing system.</p>
4040

41-
<a href="backbone-require.html" rel="external" class="ui-button ui-button-inline ui-corner-all ui-shadow ui-icon-end">View example page<span class="ui-icon ui-icon-caret-r"></span></a>
41+
<a href="backbone-require.html" rel="external" class="ui-button ui-button-inline ui-corner-all ui-shadow">View example page <span class="ui-icon ui-icon-caret-r"></span></a>
4242

4343
<h2>jQuery Mobile configuration</h2>
4444

‎demos/button/index.php

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,6 @@
1111
<script src="../../external/jquery/jquery.js"></script>
1212
<script src="../_assets/js/"></script>
1313
<script src="../../js/"></script>
14-
<style>
15-
/* border-radius values are copied from theme.css */
16-
.custom-border-radius.ui-button-icon-only.ui-button-corner-all {
17-
-webkit-border-radius: .3125em;
18-
border-radius: .3125em;
19-
}
20-
</style>
2114
</head>
2215
<body>
2316
<div data-role="page" class="jqm-demos" data-quicklinks="true">
@@ -31,7 +24,7 @@
3124

3225
<div role="main" class="ui-content jqm-content">
3326

34-
<h1>Buttons <a href="http://api.jquerymobile.com/button/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-caret-r"></span></a></h1>
27+
<h1>Buttons <a href="http://api.jquerymobile.com/button/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-caret-r"></span></a></h1>
3528

3629
<h2>Basic markup</h2>
3730

@@ -51,7 +44,7 @@
5144

5245
<div data-demo-html="true">
5346
<form>
54-
<label>Input value
47+
<label>Label
5548
<input type="button" data-enhanced="true" value="Input value" class="ui-input-button ui-button ui-corner-all ui-shadow">
5649
</label>
5750
</form>
@@ -64,15 +57,7 @@
6457
<input type="button" value="Has corners by default">
6558
<input type="button" data-corners="false" value="Unset corners">
6659
<input type="button" data-enhanced="true" value="Enhanced" class="ui-input-button ui-button ui-corner-all">
67-
</form>
68-
</div><!--/demo-html -->
69-
70-
<p>Icon-only buttons are round by default. Here we show how you can set the same border-radius as other buttons.</p>
71-
72-
<div data-demo-html="true" data-demo-css="true">
73-
<form>
74-
<input type="button" data-icon="delete" data-iconpos="notext" value="Icon only">
75-
</form>
60+
</form>
7661
</div><!--/demo-html -->
7762

7863
<h2>Shadow</h2>
@@ -133,7 +118,7 @@
133118
<div data-demo-html="true">
134119
<form>
135120
<input type="button" data-icon="delete" value="Input">
136-
<div class="ui-input-button ui-button ui-icon-delete ui-icon-beginning">
121+
<div class="ui-input-button ui-button ui-icon-delete">
137122
Enhanced
138123
<input type="button" data-enhanced="true" value="Enhanced">
139124
</div>
@@ -149,19 +134,19 @@
149134
<input type="button" data-icon="delete" data-iconpos="top" value="Top">
150135
<input type="button" data-icon="delete" data-iconpos="bottom" value="Bottom">
151136
<input type="button" data-icon="delete" data-iconpos="notext" value="Icon only">
152-
<div class="ui-input-button ui-button ui-icon-delete ui-icon-beginning">
137+
<div class="ui-input-button ui-button ui-icon-delete">
153138
Enhanced - Left
154139
<input type="button" data-enhanced="true" value="Enhanced - Left">
155140
</div>
156-
<div class="ui-input-button ui-button ui-icon-delete ui-icon-end">
141+
<div class="ui-input-button ui-button ui-icon-delete">
157142
Enhanced - Right
158143
<input type="button" data-enhanced="true" value="Enhanced - Right">
159144
</div>
160-
<div class="ui-input-button ui-button ui-icon-delete ui-icon-top">
145+
<div class="ui-input-button ui-button ui-icon-delete">
161146
Enhanced - Top
162147
<input type="button" data-enhanced="true" value="Enhanced - Top">
163148
</div>
164-
<div class="ui-input-button ui-button ui-icon-delete ui-icon-bottom">
149+
<div class="ui-input-button ui-button ui-icon-delete">
165150
Enhanced - Bottom
166151
<input type="button" data-enhanced="true" value="Enhanced - Bottom">
167152
</div>
@@ -177,7 +162,7 @@
177162
<div data-demo-html="true">
178163
<form>
179164
<input type="button" data-theme="b" data-icon="delete" data-iconshadow="true" value="Input">
180-
<div class="ui-input-button ui-button ui-button-b ui-icon-delete ui-icon-beginning ui-shadow-icon">
165+
<div class="ui-input-button ui-button ui-button-b ui-icon-delete ui-shadow-icon">
181166
Enhanced
182167
<input type="button" data-enhanced="true" value="Enhanced">
183168
</div>

‎demos/checkboxradio-checkbox/index.php

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
<div role="main" class="ui-content jqm-content">
2626

27-
<h1>Checkbox <a href="http://api.jquerymobile.com/checkboxradio/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-caret-r"></span></a></h1>
27+
<h1>Checkbox <a href="http://api.jquerymobile.com/checkboxradio/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-caret-r"></span></a></h1>
2828

2929
<p>Checkbox inputs are used to provide a list of options where more than one can be selected. Checkbox buttons are enhanced by the checkboxradio widget.</p>
3030

@@ -87,24 +87,6 @@
8787
</form>
8888
</div><!--/demo-html -->
8989

90-
<h2>Icon position</h2>
91-
92-
<p>To swap the position of the check icon from the default position on the left, add the <code>data-iconpos="right"</code> attribute to the fieldset.</p>
93-
94-
<div data-demo-html="true">
95-
<form>
96-
<fieldset data-role="controlgroup" data-iconpos="right">
97-
<legend>Icon right:</legend>
98-
<input type="checkbox" name="checkbox-h-6a" id="checkbox-h-6a">
99-
<label for="checkbox-h-6a">One</label>
100-
<input type="checkbox" name="checkbox-h-6b" id="checkbox-h-6b">
101-
<label for="checkbox-h-6b">Two</label>
102-
<input type="checkbox" name="checkbox-h-6c" id="checkbox-h-6c">
103-
<label for="checkbox-h-6c">Three</label>
104-
</fieldset>
105-
</form>
106-
</div><!--/demo-html -->
107-
10890
<h2>Theme</h2>
10991

11092
<p>To set the theme, add the <code>data-theme</code> attribute on the <code>fieldset</code> to the individual checkbox inputs.</p>
@@ -136,7 +118,7 @@
136118

137119
<div data-demo-html="true">
138120
<div class="ui-checkbox">
139-
<label for="checkbox-enhanced" class="ui-button ui-corner-all ui-button-inherit ui-icon-beginning ui-checkbox-off">I agree</label>
121+
<label for="checkbox-enhanced" class="ui-button ui-corner-all ui-button-inherit ui-checkbox-off">I agree</label>
140122
<input type="checkbox" name="checkbox-enhanced" id="checkbox-enhanced" data-enhanced="true">
141123
</div>
142124
</div><!--/demo-html -->

‎demos/checkboxradio-radio/index.php

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
<div role="main" class="ui-content jqm-content">
2626

27-
<h1>Radio buttons <a href="http://api.jquerymobile.com/checkboxradio/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-caret-r"></span></a></h1>
27+
<h1>Radio buttons <a href="http://api.jquerymobile.com/checkboxradio/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-caret-r"></span></a></h1>
2828

2929
<p>Radio inputs are used to provide a list of options where only a single option can be selected. Radio buttons are enhanced by the checkboxradio widget.</p>
3030

@@ -97,24 +97,6 @@
9797
</form>
9898
</div><!--/demo-html -->
9999

100-
<h2>Icon position</h2>
101-
102-
<p>To swap the position of the radio icon from the default position on the left, add the <code>data-iconpos="right"</code> attribute to the controlgroup.</p>
103-
104-
<div data-demo-html="true">
105-
<form>
106-
<fieldset data-role="controlgroup" data-iconpos="right">
107-
<legend>Vertical, icon right:</legend>
108-
<input type="radio" name="radio-choice-w-6" id="radio-choice-w-6a" value="on" checked="checked">
109-
<label for="radio-choice-w-6a">One</label>
110-
<input type="radio" name="radio-choice-w-6" id="radio-choice-w-6b" value="off">
111-
<label for="radio-choice-w-6b">Two</label>
112-
<input type="radio" name="radio-choice-w-6" id="radio-choice-w-6c" value="other">
113-
<label for="radio-choice-w-6c">Three</label>
114-
</fieldset>
115-
</form>
116-
</div><!--/demo-html -->
117-
118100
<h2>Theme</h2>
119101

120102
<p>To set the theme, add the <code>data-theme</code> attribute to the controlgroup or each of the individual checkbox inputs.</p>
@@ -149,7 +131,7 @@
149131

150132
<div data-demo-html="true">
151133
<div class="ui-radio">
152-
<label for="radio-enhanced" class="ui-button ui-corner-all ui-button-inherit ui-icon-beginning ui-radio-off">I agree</label>
134+
<label for="radio-enhanced" class="ui-button ui-corner-all ui-button-inherit ui-radio-off">I agree</label>
153135
<input type="radio" name="radio-enhanced" id="radio-enhanced" data-enhanced="true">
154136
</div>
155137
</div><!--/demo-html -->

‎demos/collapsible/index.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
<div role="main" class="ui-content jqm-content">
2929

30-
<h1>Collapsible <a href="http://api.jquerymobile.com/collapsible/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-caret-r"></span></a></h1>
30+
<h1>Collapsible <a href="http://api.jquerymobile.com/collapsible/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-caret-r"></span></a></h1>
3131

3232
<p>Collapsibles are simple widgets that allow you to expand or collapse content when tapped and are useful in mobile to provide a compact presentation of content.</p>
3333

@@ -225,7 +225,7 @@
225225
<div data-demo-html="true">
226226
<div data-role="collapsible" data-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed">
227227
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
228-
<a href="#" class="ui-collapsible-heading-toggle ui-button ui-icon-beginning ui-icon-plus">
228+
<a href="#" class="ui-collapsible-heading-toggle ui-button ui-icon-plus">
229229
Heading
230230
<div class="ui-collapsible-heading-status"> click to expand contents</div>
231231
</a>

‎demos/collapsibleset/index.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
<div role="main" class="ui-content jqm-content">
2626

27-
<h1>Collapsible set <a href="http://api.jquerymobile.com/collapsibleset/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-caret-r"></span></a></h1>
27+
<h1>Collapsible set <a href="http://api.jquerymobile.com/collapsibleset/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-caret-r"></span></a></h1>
2828

2929
<p>An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set.</p>
3030

‎demos/controlgroup/index.php

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
<div role="main" class="ui-content jqm-content">
3535

36-
<h1>Controlgroup <a href="http://api.jquerymobile.com/controlgroup/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-caret-r"></span></a></h1>
36+
<h1>Controlgroup <a href="http://api.jquerymobile.com/controlgroup/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-caret-r"></span></a></h1>
3737

3838
<p>Controlgroups are used to visually group a set of buttons to form a single block that looks contained like a navigation component.</p>
3939

@@ -42,16 +42,16 @@
4242
<div data-demo-html="true">
4343
<div data-role="controlgroup">
4444
<a href="#" class="ui-button ui-corner-all">No icon</a>
45-
<a href="#" class="ui-button ui-corner-all ui-icon-beginning">Left<span class="ui-icon ui-icon-delete"></span></a>
46-
<a href="#" class="ui-button ui-corner-all ui-icon-end">Right<span class="ui-icon ui-icon-delete"></span></a>
45+
<a href="#" class="ui-button ui-corner-all">Left<span class="ui-icon ui-icon-delete"></span></a>
46+
<a href="#" class="ui-button ui-corner-all">Right<span class="ui-icon ui-icon-delete"></span></a>
4747
</div>
4848
<div data-role="controlgroup">
49-
<a href="#" class="ui-button ui-corner-all ui-icon-top">Top<span class="ui-icon ui-icon-delete"></span></a>
50-
<a href="#" class="ui-button ui-corner-all ui-icon-top">Top<span class="ui-icon ui-icon-delete"></span></a>
49+
<a href="#" class="ui-button ui-corner-all">Top<span class="ui-icon ui-icon-delete"></span></a>
50+
<a href="#" class="ui-button ui-corner-all">Top<span class="ui-icon ui-icon-delete"></span></a>
5151
</div>
5252
<div data-role="controlgroup">
53-
<a href="#" class="ui-button ui-corner-all ui-icon-bottom">Bottom<span class="ui-icon ui-icon-delete"></span></a>
54-
<a href="#" class="ui-button ui-corner-all ui-icon-bottom">Bottom<span class="ui-icon ui-icon-delete"></span></a>
53+
<a href="#" class="ui-button ui-corner-all">Bottom<span class="ui-icon ui-icon-delete"></span></a>
54+
<a href="#" class="ui-button ui-corner-all">Bottom<span class="ui-icon ui-icon-delete"></span></a>
5555
</div>
5656
<div data-role="controlgroup">
5757
<a href="#" class="ui-button ui-corner-all ui-button-icon-only">Icon only<span class="ui-icon ui-icon-delete"></span></a>
@@ -78,10 +78,10 @@
7878
<div data-demo-html="true">
7979
<div data-role="controlgroup" data-direction="vertical">
8080
<a href="#" class="ui-button ui-corner-all">No icon</a>
81-
<a href="#" class="ui-button ui-corner-all ui-icon-beginning">Left<span class="ui-icon ui-icon-delete"></span></a>
82-
<a href="#" class="ui-button ui-corner-all ui-icon-end">Right<span class="ui-icon ui-icon-delete"></span></a>
83-
<a href="#" class="ui-button ui-corner-all ui-icon-top">Top<span class="ui-icon ui-icon-delete"></span></a>
84-
<a href="#" class="ui-button ui-corner-all ui-icon-bottom">Bottom<span class="ui-icon ui-icon-delete"></span></a>
81+
<a href="#" class="ui-button ui-corner-all">Left<span class="ui-icon ui-icon-delete"></span></a>
82+
<a href="#" class="ui-button ui-corner-all">Right<span class="ui-icon ui-icon-delete"></span></a>
83+
<a href="#" class="ui-button ui-corner-all">Top<span class="ui-icon ui-icon-delete"></span></a>
84+
<a href="#" class="ui-button ui-corner-all">Bottom<span class="ui-icon ui-icon-delete"></span></a>
8585
<a href="#" class="ui-button ui-corner-all ui-button-icon-only">Icon only<span class="ui-icon ui-icon-delete"></span></a>
8686
</div>
8787
</div><!--/demo-html -->
@@ -91,16 +91,16 @@
9191
<div data-demo-html="true">
9292
<div data-role="controlgroup" data-mini="true">
9393
<a href="#" class="ui-button ui-corner-all">No icon</a>
94-
<a href="#" class="ui-button ui-corner-all ui-icon-beginning">Left<span class="ui-icon ui-icon-delete"></span></a>
95-
<a href="#" class="ui-button ui-corner-all ui-icon-end">Right<span class="ui-icon ui-icon-delete"></span></a>
94+
<a href="#" class="ui-button ui-corner-all">Left<span class="ui-icon ui-icon-delete"></span></a>
95+
<a href="#" class="ui-button ui-corner-all">Right<span class="ui-icon ui-icon-delete"></span></a>
9696
</div>
9797
<div data-role="controlgroup" data-mini="true">
98-
<a href="#" class="ui-button ui-corner-all ui-icon-top">Top<span class="ui-icon ui-icon-delete"></span></a>
99-
<a href="#" class="ui-button ui-corner-all ui-icon-top">Top<span class="ui-icon ui-icon-delete"></span></a>
98+
<a href="#" class="ui-button ui-corner-all">Top<span class="ui-icon ui-icon-delete"></span></a>
99+
<a href="#" class="ui-button ui-corner-all">Top<span class="ui-icon ui-icon-delete"></span></a>
100100
</div>
101101
<div data-role="controlgroup" data-mini="true">
102-
<a href="#" class="ui-button ui-corner-all ui-icon-bottom">Bottom<span class="ui-icon ui-icon-delete"></span></a>
103-
<a href="#" class="ui-button ui-corner-all ui-icon-bottom">Bottom<span class="ui-icon ui-icon-delete"></span></a>
102+
<a href="#" class="ui-button ui-corner-all">Bottom<span class="ui-icon ui-icon-delete"></span></a>
103+
<a href="#" class="ui-button ui-corner-all">Bottom<span class="ui-icon ui-icon-delete"></span></a>
104104
</div>
105105
<div data-role="controlgroup" data-mini="true">
106106
<a href="#" class="ui-button ui-corner-all ui-button-icon-only">Icon only<span class="ui-icon ui-icon-delete"></span></a>
@@ -124,10 +124,10 @@
124124
<div data-demo-html="true">
125125
<div data-role="controlgroup" data-direction="vertical" data-mini="true">
126126
<a href="#" class="ui-button ui-corner-all">No icon</a>
127-
<a href="#" class="ui-button ui-corner-all ui-icon-beginning">Left<span class="ui-icon ui-icon-delete"></span></a>
128-
<a href="#" class="ui-button ui-corner-all ui-icon-end">Right<span class="ui-icon ui-icon-delete"></span></a>
129-
<a href="#" class="ui-button ui-corner-all ui-icon-top">Top<span class="ui-icon ui-icon-delete"></span></a>
130-
<a href="#" class="ui-button ui-corner-all ui-icon-bottom">Bottom<span class="ui-icon ui-icon-delete"></span></a>
127+
<a href="#" class="ui-button ui-corner-all">Left<span class="ui-icon ui-icon-delete"></span></a>
128+
<a href="#" class="ui-button ui-corner-all">Right<span class="ui-icon ui-icon-delete"></span></a>
129+
<a href="#" class="ui-button ui-corner-all">Top<span class="ui-icon ui-icon-delete"></span></a>
130+
<a href="#" class="ui-button ui-corner-all">Bottom<span class="ui-icon ui-icon-delete"></span></a>
131131
<a href="#" class="ui-button ui-corner-all ui-button-icon-only">Icon only<span class="ui-icon ui-icon-delete"></span></a>
132132
</div>
133133
</div><!--/demo-html -->

‎demos/external-widgets/page-c.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
<div data-role="popup" id="purchase" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
104104
<h3>Purchase Album?</h3>
105105
<p>Your download will begin immediately on your mobile device when you purchase.</p>
106-
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow ui-icon-beginning" data-rel="back">Buy: $10.99<span class="ui-icon ui-icon-check"></span></a>
106+
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Buy: $10.99<span class="ui-icon ui-icon-check"></span></a>
107107
<a href="#" class="ui-button ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a>
108108
</div>
109109

‎demos/filterable/index.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
<div role="main" class="ui-content jqm-content">
2626

27-
<h1>Filterable <a href="http://api.jquerymobile.com/filterable/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-caret-r"></span></a></h1>
27+
<h1>Filterable <a href="http://api.jquerymobile.com/filterable/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-caret-r"></span></a></h1>
2828

2929
<p>
3030
The children of any element can be filtered by setting the attribute <code>data-filter="true"</code> on the element. By default, the text contained in each child is used for filtering, however, you also have the option of setting the attribute <code>data-filtertext</code> to a string value on any child that will be considered for filtering to associate custom filter text instead.</p>

0 commit comments

Comments
 (0)