- Creating a Basic Dialog Window
- Using a Dialog Window as a Popup
- Working with Buttons
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Working with Buttons
Buttons are merely anchor and input elements on steroids. Other than being more visually appealing, buttons offer a more usable alternative to standard hyperlinks and inputs because they create a larger click area for fat fingers on mobile devices. To tell jQuery Mobile that a hyperlink or input should be converted to a button, the data-role attribute needs to be added and set to “button”:
<a href="#my-link" data-role="button">My button</a>
A number of additional attributes can also be added to offer enhancements:
|
data- Attributes |
Values |
|---|---|
|
data-corners |
true | false (true is the default value) |
|
data-icon |
home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
|
data-iconpos |
left | right | top | bottom | notext (left is the default value) |
|
data-iconshadow |
true | false (true is the default value) |
|
data-inline |
true | false (false is the default value) |
|
data-shadow |
true | false (true is the default value) |
|
data-theme |
swatch letter (a-z) |
In addition to all these great enhancements, icons can also be added to buttons using the data-icon attribute. There are a number of default icons, which are as follows:
|
Name |
Attribute |
|---|---|
|
Left arrow |
data-icon=”arrow-l” |
|
Right arrow |
data-icon=”arrow-r” |
|
Up arrow |
data-icon=”arrow-u” |
|
Down arrow |
data-icon=”arrow-d” |
|
Delete |
data-icon=”delete” |
|
Plus |
data-icon=”plus” |
|
Minus |
data-icon=”minus” |
|
Check |
data-icon=”check” |
|
Gear |
data-icon=”gear” |
|
Refresh |
data-icon=”refresh” |
|
Forward |
data-icon=”forward” |
|
Back |
data-icon=”back” |
|
Grid |
data-icon=”grid” |
|
Star |
data-icon=”star” |
|
Alert |
data-icon=”alert” |
|
Info |
data-icon=”info” |
|
Home |
data-icon=”home” |
|
Search |
data-icon=”search” |
You can create custom icons to replace any of these existing images, or you can create your own and refer to them as a custom data-icon. If you were to create an icon named circle, the first thing you could do is create a circle image named app-icon-circle.png, then you would associate a CSS class so that jQuery Mobile was aware of it. The CSS class will need to include ui-icon- before the custom value; therefore, the CSS class for the custom value we defined will be ui-icon-circle. With this class in place, you can easily target the class and add a background image as the icon:
.ui-icon-circle {
background-image: url("app-icon-circle.png");
}
Icons need to be created as 18x18-pixel PNG-8s with alpha transparency to match the existing jQuery Mobile icons and render properly.