Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
From the author of Working with Buttons

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.

  • + Share This
  • 🔖 Save To Your Account