2010-10-10 14:41:34 +00:00
<!DOCTYPE html>
< html >
2010-11-02 01:46:29 +00:00
< head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
2011-05-17 21:28:19 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2011-03-31 13:11:26 +00:00
< title > jQuery Mobile Docs - Theming Lists< / title >
2011-01-06 00:19:24 +00:00
< link rel = "stylesheet" href = "../../themes/default/" / >
2010-11-11 19:15:42 +00:00
< link rel = "stylesheet" href = "../_assets/css/jqm-docs.css" / >
2011-04-14 20:04:47 +00:00
< script src = "../../js/jquery.js" > < / script >
< script src = "../../js/" > < / script >
< script src = "../docs/docs.js" > < / script >
2010-10-10 14:41:34 +00:00
< / head >
< body >
2011-03-10 03:36:14 +00:00
< div data-role = "page" >
2010-10-10 14:41:34 +00:00
2011-03-10 03:36:14 +00:00
< div data-role = "header" data-theme = "b" >
2010-10-12 20:11:13 +00:00
< h1 > Theming lists< / h1 >
2011-03-10 03:36:14 +00:00
< a href = "../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
2010-10-10 14:41:34 +00:00
< / div > <!-- /header -->
2011-03-10 03:36:14 +00:00
< div data-role = "content" class = "ui-body" >
2010-10-11 12:11:20 +00:00
2010-10-12 21:02:48 +00:00
2010-12-22 23:11:01 +00:00
< p > All the standard button swatches can be applied to lists. The framework assigns a default list theme swatch of " c" (silver in the default theme) and swatch " b" (blue in default theme) for dividers. Below is a default themed list.< / p >
2010-10-11 12:11:20 +00:00
2010-10-12 20:10:19 +00:00
< code >
2011-03-10 03:36:14 +00:00
< ul data-role=" listview" data-inset=" true" >
2010-10-12 20:10:19 +00:00
< / code >
2011-03-10 03:36:14 +00:00
< ul data-role = "listview" data-inset = "true" >
2011-03-24 23:46:05 +00:00
< li data-role = "list-divider" > Divider< / li >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Sent < span class = "ui-li-count" > 328< / span > < / a > < / li >
2010-10-12 20:10:19 +00:00
< / ul >
2010-12-22 23:11:01 +00:00
< h2 > Theming list items< / h2 >
2011-03-10 03:36:14 +00:00
< p > The list item color scheme can be changed to any button color theme swatch by adding the < code > data-theme< / code > attribute to the list, and setting the letter theme swatch. Here is the same list above with the " a" swatch applied. < / p >
2010-10-12 17:25:29 +00:00
2010-10-12 20:10:19 +00:00
< code >
2011-03-10 03:36:14 +00:00
< ul data-role=" listview" data-inset=" true" data-theme=" d" >
2010-10-12 20:10:19 +00:00
< / code >
2011-03-10 03:36:14 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "d" >
2011-03-24 23:46:05 +00:00
< li data-role = "list-divider" > Divider< / li >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Sent < span class = "ui-li-count" > 328< / span > < / a > < / li >
2010-10-12 20:10:19 +00:00
< / ul >
2011-03-10 03:36:14 +00:00
< p > data-theme attributes also work at the LI-level, for styling a single item.< / p >
2011-02-01 06:07:17 +00:00
2011-03-10 03:36:14 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "d" >
2011-03-24 23:46:05 +00:00
< li data-role = "list-divider" > Divider< / li >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Sent < span class = "ui-li-count" > 328< / span > < / a > < / li >
< li data-theme = "a" > Trash < span class = "ui-li-count" > 34< / span > < / a > < / li >
2011-02-01 06:07:17 +00:00
< / ul >
2010-10-12 20:10:19 +00:00
< h2 > Theming dividers< / h2 >
2011-03-31 03:15:27 +00:00
< p > The theme for < strong > list dividers< / strong > can be set by adding the < code > data-divider-theme< / code > to the list and specifying a swatch letter. Here is an example of the same list above with swatch " d" set on the dividers.< / p >
2010-10-12 20:10:19 +00:00
< code >
2011-03-31 03:15:27 +00:00
< ul data-role=" listview" data-inset=" true" data-theme=" d" data-divider-theme=" e" >
2010-10-12 20:10:19 +00:00
< / code >
2011-03-31 03:15:27 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "d" data-divider-theme = "e" >
2011-03-24 23:46:05 +00:00
< li data-role = "list-divider" > Divider< / li >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Sent < span class = "ui-li-count" > 328< / span > < / a > < / li >
2010-10-12 20:10:19 +00:00
< / ul >
< h2 > Theming count bubbles< / h2 >
2011-03-31 03:15:27 +00:00
< p > The theme for < strong > count bubbles< / strong > can be set by adding the < code > data-count-theme< / code > to the list and specifying a swatch letter. Here is an example with swatch " e" set on the dividers.< / p >
2010-10-12 20:10:19 +00:00
< code >
2011-03-31 03:15:27 +00:00
< ul data-role=" listview" data-inset=" true" data-theme=" d" data-divider-theme=" e" data-count-theme=" b" >
2010-10-12 20:10:19 +00:00
< / code >
2011-03-31 03:15:27 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "d" data-divider-theme = "e" data-count-theme = "b" >
2011-03-24 23:46:05 +00:00
< li data-role = "list-divider" > Divider< / li >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Sent < span class = "ui-li-count" > 328< / span > < / a > < / li >
2010-10-12 20:10:19 +00:00
< / ul >
2010-12-22 23:11:01 +00:00
< h2 > Theming icons< / h2 >
2011-03-10 03:36:14 +00:00
< p > The default icon for each list item is < code > arrow-r< / code > . To override this, set the < code > data-icon< / code > attribute on the desired list item to the < a href = "../buttons/buttons-icons.html" > name of a standard icon< / a > . To prevent icons from appearing altogether, set the < code > data-icon< / code > attribute to " false" .< / p >
2010-12-22 23:11:01 +00:00
< pre >
< code >
2011-03-10 03:36:14 +00:00
< li data-icon=" info" > < a href="#"> Notices< /a> < /li>
< li data-icon=" alert" > < a href="#"> Alerts< /a> < /li>
2011-03-31 03:15:27 +00:00
< li data-icon=" false" > < a href="#"> No icon< /a> < /li>
2010-12-22 23:11:01 +00:00
< / code >
< / pre >
2011-03-31 03:15:27 +00:00
< ul data-role = "listview" data-inset = "true" >
2011-03-24 23:46:05 +00:00
< li data-role = "list-divider" > Divider< / li >
2011-03-31 03:15:27 +00:00
< li data-icon = "info" > < a href = "#" > Notices< / a > < / li >
< li data-icon = "alert" > < a href = "#" > Alerts< / a > < / li >
< li data-icon = "false" > < a href = "#" > No icon< / a > < / li >
2010-12-22 23:11:01 +00:00
< / ul >
2011-03-31 03:15:27 +00:00
2010-12-22 23:11:01 +00:00
2010-10-12 20:38:07 +00:00
< h2 > Theming split buttons< / h2 >
2010-12-22 23:11:01 +00:00
< p > For split lists which a second button, the framework default to " b" for the theme swatch (blue in the default theme) Here is a default split list:< / p >
2010-10-12 20:38:07 +00:00
2011-03-10 03:36:14 +00:00
< ul data-role = "listview" data-inset = "true" >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" >
2010-10-12 21:02:48 +00:00
< img src = "images/album-bb.jpg" / >
2011-03-24 23:29:28 +00:00
< h3 > Broken Bells< / h3 >
< p > Broken Bells< / p > < / a >
2010-10-12 21:02:48 +00:00
< a href = "index.html" > Purchase album< / a >
< / li >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" >
2010-10-12 21:02:48 +00:00
< img src = "images/album-hc.jpg" / >
2011-03-24 23:29:28 +00:00
< h3 > Warning< / h3 >
< p > Hot Chip< / p > < / a >
2010-10-12 21:02:48 +00:00
< a href = "index.html" > Purchase album< / a >
< / li >
2010-10-12 20:38:07 +00:00
< / ul >
< code >
2011-03-31 03:15:27 +00:00
< ul data-role=" listview" data-inset=" true" data-split-theme=" a" >
2010-10-12 20:38:07 +00:00
< / code >
2011-03-31 03:15:27 +00:00
< p > To specify the color swatch for the icon button on the right, add the < code > data-split-theme< / code > to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a < code > data-theme< / code > attribute to specific links (see second list item).< / p >
< ul data-role = "listview" data-inset = "true" data-split-theme = "a" >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" >
2010-10-12 21:02:48 +00:00
< img src = "images/album-bb.jpg" / >
2011-03-24 23:29:28 +00:00
< h3 > Broken Bells< / h3 >
2011-03-31 03:15:27 +00:00
< p > Broken Bells< / p >
< / a >
2010-10-12 21:02:48 +00:00
< a href = "index.html" > Purchase album< / a >
< / li >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" >
2010-10-12 21:02:48 +00:00
< img src = "images/album-hc.jpg" / >
2011-03-24 23:29:28 +00:00
< h3 > Warning< / h3 >
2010-10-12 21:02:48 +00:00
< p > Hot Chip< / p >
2011-03-24 23:29:28 +00:00
< / a >
2011-03-10 03:36:14 +00:00
< a href = "index.html" data-theme = "e" > Purchase album< / a >
2010-10-12 21:02:48 +00:00
< / li >
2010-10-12 20:38:07 +00:00
< / ul >
2011-03-31 03:15:27 +00:00
< p > The icon for the split theme can set at the list level by adding the < code > data-split-icon< / code > to the list and specifying a < a href = "../buttons/buttons-icons.html" > standard icon< / a > . This attribute can also be added to individual split inside list items by adding a < code > data-icon< / code > attribute to specific links (see second list item).< / p >
2010-10-12 20:38:07 +00:00
< code >
2011-03-31 03:15:27 +00:00
< ul data-role=" listview" data-inset=" true" data-split-theme=" d" data-split-icon=" delete" >
2010-10-12 20:38:07 +00:00
< / code >
2011-03-31 03:15:27 +00:00
< ul data-role = "listview" data-inset = "true" data-split-theme = "d" data-split-icon = "delete" >
< li > < a href = "index.html" >
< img src = "images/album-bb.jpg" / >
< h3 > Broken Bells< / h3 >
< p > Broken Bells< / p >
< / a >
< a href = "index.html" > Purchase album< / a >
< / li >
< li > < a href = "index.html" >
< img src = "images/album-hc.jpg" / >
< h3 > Warning< / h3 >
< p > Hot Chip< / p >
< / a >
< a href = "index.html" > Purchase album< / a >
< / li >
< / ul >
2010-10-12 20:38:07 +00:00
2010-10-12 20:10:19 +00:00
< h2 > Examples of all basic list swatches< / h2 >
< p > < strong > A< / strong > swatch< / p >
2011-03-10 03:36:14 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "a" >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Trash < span class = "ui-li-count" > 62< / span > < / a > < / li >
2010-10-12 17:25:29 +00:00
< / ul >
< p > < strong > B< / strong > swatch< / p >
2011-03-10 03:36:14 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "b" >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Trash < span class = "ui-li-count" > 62< / span > < / a > < / li >
2010-10-12 17:25:29 +00:00
< / ul >
< p > < strong > C< / strong > swatch< / p >
2011-03-10 03:36:14 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "c" >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Trash < span class = "ui-li-count" > 62< / span > < / a > < / li >
2010-10-12 17:25:29 +00:00
< / ul >
< p > < strong > D< / strong > swatch< / p >
2011-03-10 03:36:14 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "d" >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Trash < span class = "ui-li-count" > 62< / span > < / a > < / li >
2010-10-12 17:25:29 +00:00
< / ul >
< p > < strong > E< / strong > swatch< / p >
2011-03-10 03:36:14 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "e" >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Trash < span class = "ui-li-count" > 62< / span > < / a > < / li >
2010-10-12 17:25:29 +00:00
< / ul >
2010-10-12 21:02:48 +00:00
2010-10-11 12:11:20 +00:00
2010-10-10 14:41:34 +00:00
< / div > <!-- /content -->
< / div > <!-- /page -->
< / body >
2010-12-22 23:11:01 +00:00
< / html >
