2010-10-11 18:25:08 +00:00
<!DOCTYPE html>
< html >
< head >
< title > jQuery Mobile Docs - Buttons< / title >
2010-10-13 16:45:10 +00:00
< link rel = "stylesheet" href = "../../themes/default" / >
2010-10-11 23:44:14 +00:00
< script type = "text/javascript" src = "../../js/all" > < / script >
< script type = "text/javascript" src = "../docs/docs.js" > < / script >
2010-10-11 18:25:08 +00:00
< / head >
< body >
< div data-role = "page" >
< div data-role = "header" >
< h1 > Button icons< / h1 >
< / div > <!-- /header -->
2010-10-12 19:50:28 +00:00
< div data-role = "content" >
2010-10-13 20:38:29 +00:00
2010-10-15 21:03:19 +00:00
< h2 > Adding Icons to Buttons< / h2 >
< p > The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.< / p >
2010-10-13 20:38:29 +00:00
2010-10-15 21:03:19 +00:00
< p > An icon can be added to a button by adding a < code > data-icon< / code > attribute on the anchor specifying the icon to display. For example, the following markup:< / p >
2010-10-11 18:31:33 +00:00
2010-10-13 20:38:29 +00:00
< code >
< a href=" index.html" data-role=" button" < strong > data-icon=" delete" < / strong > > Delete< /a>
< / code >
< p > Creates this button with an icon:< / p >
< a href = "index.html" data-role = "button" data-icon = "delete" > Delete< / a >
< h2 > Icon set< / h2 >
2010-10-15 21:15:29 +00:00
< p > The following < code > data-icon< / code > attributes can be referenced to create the icons shown below:< / p >
2010-10-13 20:38:29 +00:00
2010-10-18 22:22:56 +00:00
< p > < strong > Left arrow< / strong > - data-icon="arrow-l"< / p >
2010-10-13 20:38:29 +00:00
< a href = "index.html" data-role = "button" data-icon = "arrow-l" > My button< / a >
2010-10-18 22:22:56 +00:00
< p > < strong > Right arrow< / strong > - data-icon="arrow-r"< / p >
2010-10-13 20:38:29 +00:00
< a href = "index.html" data-role = "button" data-icon = "arrow-r" > My button< / a >
< p > < strong > Up arrow< / strong > - data-icon="arrow-u"< / p >
< a href = "index.html" data-role = "button" data-icon = "arrow-u" > My button< / a >
< p > < strong > Down arrow< / strong > - data-icon="arrow-d"< / p >
< a href = "index.html" data-role = "button" data-icon = "arrow-d" > My button< / a >
< p > < strong > Delete< / strong > - data-icon="delete"< / p >
< a href = "index.html" data-role = "button" data-icon = "delete" > My button< / a >
< p > < strong > Plus< / strong > - data-icon="plus"< / p >
< a href = "index.html" data-role = "button" data-icon = "plus" > My button< / a >
< p > < strong > Minus< / strong > - data-icon="minus"< / p >
< a href = "index.html" data-role = "button" data-icon = "minus" > My button< / a >
2010-10-15 16:33:10 +00:00
< p > < strong > Check< / strong > - data-icon="check"< / p >
< a href = "index.html" data-role = "button" data-icon = "check" > My button< / a >
< p > < strong > Gear< / strong > - data-icon="gear"< / p >
< a href = "index.html" data-role = "button" data-icon = "gear" > My button< / a >
< p > < strong > Refresh< / strong > - data-icon="refresh"< / p >
< a href = "index.html" data-role = "button" data-icon = "refresh" > My button< / a >
< p > < strong > Forward< / strong > - data-icon="forward"< / p >
< a href = "index.html" data-role = "button" data-icon = "forward" > My button< / a >
< p > < strong > Back< / strong > - data-icon="back"< / p >
< a href = "index.html" data-role = "button" data-icon = "back" > My button< / a >
< p > < strong > Grid< / strong > - data-icon="grid"< / p >
< a href = "index.html" data-role = "button" data-icon = "grid" > My button< / a >
< p > < strong > Star< / strong > - data-icon="star"< / p >
< a href = "index.html" data-role = "button" data-icon = "star" > My button< / a >
< p > < strong > Alert< / strong > - data-icon="alert"< / p >
< 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 >
2010-10-16 00:00:21 +00:00
<!-- A themed -->
2010-10-16 01:21:04 +00:00
< h3 > Swatch "A" themed buttons< / h3 >
2010-10-16 00:00:21 +00:00
< 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 -->
2010-10-16 01:21:04 +00:00
< h3 > Swatch "B" themed buttons< / h3 >
2010-10-16 00:00:21 +00:00
< 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 -->
2010-10-16 01:21:04 +00:00
< h3 > Swatch "C" themed buttons< / h3 >
2010-10-16 00:00:21 +00:00
< 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 >
2010-10-13 20:38:29 +00:00
< h2 > Icon positioning< / h2 >
2010-10-15 21:15:29 +00:00
< 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 >
2010-10-13 20:38:29 +00:00
< code >
< a href=" index.html" data-role=" button" data-icon=" delete" < strong > data-iconpos=" right" < / strong > > Delete< /a>
< / code >
< p > Creates this button with right-aligned icon:< / p >
< a href = "index.html" data-role = "button" data-icon = "delete" data-iconpos = "right" > Delete< / a >
2010-10-15 21:15:29 +00:00
< p > You can also create an icon-only button, by setting the < code > data-iconpos< / code > attribute to < code > notext< / code > . The button plugin will hide the text on-screen, but add it as a < code > title< / code > attribute on the link to provide context for screen readers and devices that support tooltips. In this example, we're adding a plus (+) icon and positioning it to the right of the text with our < code > data-< / code > attributes on the link.< / p >
2010-10-13 20:38:29 +00:00
< code >
< a href=" index.html" data-role=" button" data-icon=" delete" < strong > data-iconpos=" notext" < / strong > > Delete< /a>
< / code >
< p > Creates this icon-only button:< / p >
< a href = "index.html" data-role = "button" data-icon = "delete" data-iconpos = "notext" > Delete< / a >
2010-10-15 21:15:29 +00:00
< h2 > Custom Icons< / h2 >
2010-10-13 20:38:29 +00:00
< p > To use custom icons, specify a < code > data-icon< / code > value that has a unique name like < code > myapp-email< / code > and the button plugin will generate a class by prefixing < code > ui-icon-< / code > to the < code > data-icon< / code > value and apply it to the button. You can then write a CSS rule that targets the < code > ui-icon-myapp-email< / code > class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.< / p >
2010-10-11 18:31:33 +00:00
2010-10-13 20:38:29 +00:00
2010-10-11 18:25:08 +00:00
< / div > <!-- /content -->
< / div > <!-- /page -->
< / body >
2010-10-18 22:22:56 +00:00
< / html >
