|
121 | 121 | <p>By default, icons in <code>input</code> buttons are placed to the left of the button text. This default may be overridden using the <code>data-iconpos</code> attribute to set the icon position to "right", "top", or "bottom". In case of link buttons or <code>button</code> elements you have to add an icon position class (<code>ui-btn-icon-[value]</code>).</p>
|
122 | 122 |
|
123 | 123 | <div data-demo-html="true">
|
124 |
| - <a href="index.html" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-left">Left</a> |
125 |
| - <a href="index.html" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right">Right</a> |
126 |
| - <a href="index.html" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-u ui-btn-icon-top">Top</a> |
127 |
| - <a href="index.html" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-d ui-btn-icon-bottom">Bottom</a> |
| 124 | + <a href="index.php" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-left">Left</a> |
| 125 | + <a href="index.php" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right">Right</a> |
| 126 | + <a href="index.php" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-u ui-btn-icon-top">Top</a> |
| 127 | + <a href="index.php" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-d ui-btn-icon-bottom">Bottom</a> |
128 | 128 | </div><!--/demo-html -->
|
129 | 129 |
|
130 | 130 | <h2>Icon-only</h2>
|
131 | 131 |
|
132 | 132 | <p>Use "notext" as value for icon position if you want to create an icon-only button.</p>
|
133 | 133 |
|
134 | 134 | <div data-demo-html="true">
|
135 |
| - <a href="index.html" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext">Delete</a> |
| 135 | + <a href="index.php" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext">Delete</a> |
136 | 136 | </div><!--/demo-html -->
|
137 | 137 |
|
138 | 138 | <h2>Icon shadow</h2>
|
|
142 | 142 | <p><strong>Note: Icon shadow (option <code>iconShadow</code> in the button widget and class <code>ui-shadow-icon</code>) is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.</strong></p>
|
143 | 143 |
|
144 | 144 | <div data-demo-html="true">
|
145 |
| - <a href="index.html" class="ui-shadow-icon ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-left">Icon shadow</a> |
146 |
| - <a href="index.html" class="ui-shadow-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Icon shadow</a> |
| 145 | + <a href="index.php" class="ui-shadow-icon ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-left">Icon shadow</a> |
| 146 | + <a href="index.php" class="ui-shadow-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Icon shadow</a> |
147 | 147 | </div><!--/demo-html -->
|
148 | 148 |
|
149 | 149 | <h2>Removing the disc</h2>
|
150 | 150 |
|
151 | 151 | <p>The semi-transparent dark circle behind the icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. If you prefer to not have this disc, it can be removed by adding the class <code>ui-nodisc-icon</code> to the element or its container.</p>
|
152 | 152 |
|
153 | 153 | <div data-demo-html="true">
|
154 |
| - <a href="index.html" class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-left">No disc</a> |
155 |
| - <a href="index.html" class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">No disc</a> |
| 154 | + <a href="index.php" class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-left">No disc</a> |
| 155 | + <a href="index.php" class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">No disc</a> |
156 | 156 | </div><!--/demo-html -->
|
157 | 157 |
|
158 | 158 | <p>Example of the class being applied to a wrapper.</p>
|
|
171 | 171 | <p>Icons are white by default but you can switch to black icons by adding the <code>ui-alt-icon</code> class to the element or its container. This also changes the color that is used for the discs.</p>
|
172 | 172 |
|
173 | 173 | <div data-demo-html="true">
|
174 |
| - <a href="index.html" class="ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-left">Alt icon</a> |
175 |
| - <a href="index.html" class="ui-alt-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Alt icon</a> |
| 174 | + <a href="index.php" class="ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-left">Alt icon</a> |
| 175 | + <a href="index.php" class="ui-alt-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Alt icon</a> |
176 | 176 | </div><!--/demo-html -->
|
177 | 177 |
|
178 | 178 | <p>Example of the class being applied to a wrapper.</p>
|
|
0 commit comments