2010-10-10 14:41:34 +00:00
<!DOCTYPE html>
< html >
< head >
< title > jQuery Mobile Docs - Lists< / title >
2010-10-13 16:45:10 +00:00
< link rel = "stylesheet" href = "../../themes/default" / >
2010-10-12 21:24:33 +00:00
< script type = "text/javascript" src = "../../js/all" > < / script >
< script type = "text/javascript" src = "../docs/docs.js" > < / script >
2010-10-10 14:41:34 +00:00
< / head >
< body >
< div data-role = "page" >
< div data-role = "header" >
2010-10-12 20:11:13 +00:00
< h1 > Theming lists< / h1 >
2010-10-10 14:41:34 +00:00
< / div > <!-- /header -->
2010-10-12 20:10:19 +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
< 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 >
< ul data-role=" listview" data-inset=" true" >
< / code >
< ul data-role = "listview" data-inset = "true" >
< li data-role = "list-divider" > Divider< / li >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < / li >
< li > < a href = "index.html" > Sent< / a > < span class = "ui-li-count" > 328< / span > < / li >
< / ul >
2010-10-12 21:02:48 +00:00
< h2 > Theming list items< / h2 >
2010-10-12 20:10:19 +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 >
2010-10-14 03:38:01 +00:00
< ul data-role=" listview" data-inset=" true" data-theme=" d" >
2010-10-12 20:10:19 +00:00
< / code >
2010-10-14 03:38:01 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "d" >
2010-10-12 20:10:19 +00:00
< li data-role = "list-divider" > Divider< / li >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < / li >
< li > < a href = "index.html" > Sent< / a > < span class = "ui-li-count" > 328< / span > < / li >
< / ul >
< h2 > Theming dividers< / h2 >
< p > The theme for < strong > list dividers< / strong > can be set by adding the < code > data-dividertheme< / 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 >
< code >
2010-10-14 03:38:01 +00:00
< ul data-role=" listview" data-inset=" true" data-theme=" d" data-dividertheme=" c" >
2010-10-12 20:10:19 +00:00
< / code >
2010-10-14 03:38:01 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "d" data-dividertheme = "c" >
2010-10-12 20:10:19 +00:00
< li data-role = "list-divider" > Divider< / li >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < / li >
< li > < a href = "index.html" > Sent< / a > < span class = "ui-li-count" > 328< / span > < / li >
< / ul >
< h2 > Theming count bubbles< / h2 >
< p > The theme for < strong > count bubbles< / strong > can be set by adding the < code > data-counttheme< / code > to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.< / p >
< code >
< ul data-role=" listview" data-inset=" true" data-theme=" a" data-dividertheme=" d" data-counttheme=" e" >
< / code >
< ul data-role = "listview" data-inset = "true" data-theme = "a" data-dividertheme = "d" data-counttheme = "e" >
< li data-role = "list-divider" > Divider< / li >
2010-10-12 17:25:29 +00:00
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < / li >
< li > < a href = "index.html" > Sent< / a > < span class = "ui-li-count" > 328< / span > < / li >
2010-10-12 20:10:19 +00:00
< / ul >
2010-10-12 20:38:07 +00:00
< h2 > Theming split buttons< / h2 >
< 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 21:02:48 +00:00
< ul data-role = "listview" data-inset = "true" >
< li >
< img src = "images/album-bb.jpg" / >
< h3 > < a href = "index.html" > Broken Bells< / a > < / h3 >
< p > Broken Bells< / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< li >
< img src = "images/album-hc.jpg" / >
< h3 > < a href = "index.html" > Warning< / a > < / h3 >
< p > Hot Chip< / p >
< a href = "index.html" > Purchase album< / a >
< / li >
2010-10-12 20:38:07 +00:00
< / ul >
< code >
< ul data-role=" listview" data-inset=" true" data-splittheme=" a" >
< / code >
2010-10-12 21:02:48 +00:00
< p > To specify the color swatch for the icon button on the right, add the < code > data-splittheme< / 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 >
2010-10-12 20:38:07 +00:00
< ul data-role = "listview" data-inset = "true" data-splittheme = "a" >
2010-10-12 21:02:48 +00:00
< li >
< img src = "images/album-bb.jpg" / >
< h3 > < a href = "index.html" > Broken Bells< / a > < / h3 >
< p > Broken Bells< / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< li >
< img src = "images/album-hc.jpg" / >
< h3 > < a href = "index.html" > Warning< / a > < / h3 >
< p > Hot Chip< / p >
< a href = "index.html" data-theme = "e" > Purchase album< / a >
< / li >
2010-10-12 20:38:07 +00:00
< / ul >
2010-10-12 21:02:48 +00:00
< p > The icon for the split theme can set at the list level by adding the < code > data-spliticon< / 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 >
< ul data-role=" listview" data-inset=" true" data-splittheme=" a" data-spliticon=" plus" >
< / code >
< ul data-role = "listview" data-inset = "true" data-splittheme = "a" data-spliticon = "plus" >
2010-10-12 21:02:48 +00:00
< li >
< img src = "images/album-bb.jpg" / >
< h3 > < a href = "index.html" > Broken Bells< / a > < / h3 >
< p > Broken Bells< / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< li >
< img src = "images/album-hc.jpg" / >
< h3 > < a href = "index.html" > Warning< / a > < / h3 >
< p > Hot Chip< / p >
< a href = "index.html" data-theme = "e" data-icon = "delete" > Purchase album< / a >
< / li >
2010-10-12 20:38:07 +00:00
< / ul >
2010-10-12 20:10:19 +00:00
< h2 > Examples of all basic list swatches< / h2 >
< p > < strong > A< / strong > swatch< / p >
< ul data-role = "listview" data-inset = "true" data-theme = "a" >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < / li >
2010-10-12 17:25:29 +00:00
< li > < a href = "index.html" > Trash< / a > < span class = "ui-li-count" > 62< / span > < / li >
< / ul >
< p > < strong > B< / strong > swatch< / p >
< ul data-role = "listview" data-inset = "true" data-theme = "b" >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < / li >
< li > < a href = "index.html" > Trash< / a > < span class = "ui-li-count" > 62< / span > < / li >
< / ul >
< p > < strong > C< / strong > swatch< / p >
< ul data-role = "listview" data-inset = "true" data-theme = "c" >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < / li >
< li > < a href = "index.html" > Trash< / a > < span class = "ui-li-count" > 62< / span > < / li >
< / ul >
< p > < strong > D< / strong > swatch< / p >
< ul data-role = "listview" data-inset = "true" data-theme = "d" >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < / li >
< li > < a href = "index.html" > Trash< / a > < span class = "ui-li-count" > 62< / span > < / li >
< / ul >
< p > < strong > E< / strong > swatch< / p >
< ul data-role = "listview" data-inset = "true" data-theme = "e" >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < / li >
< li > < a href = "index.html" > Trash< / a > < span class = "ui-li-count" > 62< / span > < / li >
< / 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 >
< / html >
