2010-10-10 14:41:34 +00:00
<!DOCTYPE html>
< html >
< head >
< title > jQuery Mobile Docs - Lists< / title >
2010-10-12 20:10:19 +00:00
< link rel = "stylesheet" href = "css/all" / >
< 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-11 19:51:59 +00:00
< h2 > Assigning theme swatches to lists< / h2 >
2010-10-12 20:10:19 +00:00
< p > All the standard button swatches can be applied to lists. Here is an example of the default list theme "c" (silver in the default theme) with default divider swatch "b" (blue in default theme).< / 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-10 14:41:34 +00:00
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 >
< ul data-role=" listview" data-inset=" true" data-theme=" a" >
< / code >
< ul data-role = "listview" data-inset = "true" data-theme = "a" >
< 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 >
< ul data-role=" listview" data-inset=" true" data-theme=" a" data-dividertheme=" d" >
< / code >
< ul data-role = "listview" data-inset = "true" data-theme = "a" data-dividertheme = "d" >
< 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 >
< ul data-role = "listview" data-inset = "true" data-splittheme = "a" >
< li data-role = "list-divider" > Divider< / li >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < a href = "index.html" > Purchase album< / a > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < a href = "index.html" > Purchase album< / a > < / li >
< li > < a href = "index.html" > Sent< / a > < span class = "ui-li-count" > 328< / span > < a href = "index.html" > Purchase album< / a > < / li >
< / ul >
< code >
< ul data-role=" listview" data-inset=" true" data-splittheme=" a" >
< / code >
< p > To specify the color swatch for the icon button on the right, add the < code > data-splittheme< / code > to the list and specifying 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.< / p >
< ul data-role = "listview" data-inset = "true" data-splittheme = "a" >
< li data-role = "list-divider" > Divider< / li >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < a href = "index.html" > Purchase album< / a > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < a href = "index.html" > Purchase album< / a > < / li >
< li > < a href = "index.html" > Sent< / a > < span class = "ui-li-count" > 328< / span > < a href = "index.html" data-theme = "e" > Purchase album< / a > < / li >
< / ul >
< 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.< / p >
< 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" >
< li data-role = "list-divider" > Divider< / li >
< li > < a href = "index.html" > Inbox< / a > < span class = "ui-li-count" > 12< / span > < a href = "index.html" > Purchase album< / a > < / li >
< li > < a href = "index.html" > Outbox< / a > < span class = "ui-li-count" > 0< / span > < a href = "index.html" > Purchase album< / a > < / li >
< li > < a href = "index.html" > Sent< / a > < span class = "ui-li-count" > 328< / span > < a href = "index.html" data-theme = "e" data-icon = "delete" > Purchase album< / a > < / li >
< / 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 20:10:19 +00:00
< h2 > Theme variations< / h2 >
< p > < strong > A< / strong > page, < strong > A< / strong > lists, < strong > D< / strong > dividers< / p >
2010-10-11 19:51:59 +00:00
< div class = "ui-body-a" >
2010-10-12 17:25:29 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "a" >
2010-10-10 14:41:34 +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" > Drafts< / a > < span class = "ui-li-count" > 4< / span > < / li >
< li > < a href = "index.html" > Sent< / a > < span class = "ui-li-count" > 328< / span > < / li >
< li > < a href = "index.html" > Trash< / a > < span class = "ui-li-count" > 62< / span > < / li >
< / ul >
2010-10-12 17:25:29 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "a" >
2010-10-10 14:41:34 +00:00
< li >
< img src = "images/album-bb.jpg" / >
< h3 > < a href = "index.html" > Broken Bells< / a > < / h3 >
< p > Broken Bells< / p >
< p class = "ui-li-aside" > $< strong > 11.99< / strong > < / 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 >
< p class = "ui-li-aside" > $< strong > 12.99< / strong > < / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< li >
< img src = "images/album-p.jpg" / >
< h3 > < a href = "index.html" > Wolfgang Amadeus Phoenix< / a > < / h3 >
< p > Phoenix< / p >
< p class = "ui-li-aside" > $< strong > 11.99< / strong > < / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< li >
< img src = "images/album-ok.jpg" / >
< h3 > < a href = "index.html" > Of The Blue Colour Of The Sky< / a > < / h3 >
< p > Ok Go< / p >
< p class = "ui-li-aside" > $< strong > 10.99< / strong > < / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< / ul >
2010-10-12 20:10:19 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "a" data-dividertheme = "d" >
2010-10-10 14:41:34 +00:00
< li data-role = "list-divider" > A< / li >
< li > < a href = "index.html" > Adam Kinkaid< / a > < / li >
< li > < a href = "index.html" > Alex Wickerham< / a > < / li >
< li > < a href = "index.html" > Avery Johnson< / a > < / li >
< li data-role = "list-divider" > B< / li >
< li > < a href = "index.html" > Bob Cabot< / a > < / li >
< li data-role = "list-divider" > C< / li >
< li > < a href = "index.html" > Caleb Booth< / a > < / li >
< li > < a href = "index.html" > Christopher Adams< / a > < / li >
< / ul >
2010-10-11 12:11:20 +00:00
< / div > <!-- / body wrapper -->
2010-10-12 20:10:19 +00:00
< p > < strong > B< / strong > page, < strong > C< / strong > lists, < strong > D< / strong > dividers< / p >
2010-10-11 19:51:59 +00:00
< div class = "ui-body-b" >
2010-10-11 12:11:20 +00:00
2010-10-12 17:25:29 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "c" >
2010-10-11 12:11:20 +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" > Drafts< / a > < span class = "ui-li-count" > 4< / span > < / li >
< li > < a href = "index.html" > Sent< / a > < span class = "ui-li-count" > 328< / span > < / li >
< li > < a href = "index.html" > Trash< / a > < span class = "ui-li-count" > 62< / span > < / li >
< / ul >
2010-10-12 17:25:29 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "c" >
2010-10-11 12:11:20 +00:00
< li >
< img src = "images/album-bb.jpg" / >
< h3 > < a href = "index.html" > Broken Bells< / a > < / h3 >
< p > Broken Bells< / p >
< p class = "ui-li-aside" > $< strong > 11.99< / strong > < / 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 >
< p class = "ui-li-aside" > $< strong > 12.99< / strong > < / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< li >
< img src = "images/album-p.jpg" / >
< h3 > < a href = "index.html" > Wolfgang Amadeus Phoenix< / a > < / h3 >
< p > Phoenix< / p >
< p class = "ui-li-aside" > $< strong > 11.99< / strong > < / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< li >
< img src = "images/album-ok.jpg" / >
< h3 > < a href = "index.html" > Of The Blue Colour Of The Sky< / a > < / h3 >
< p > Ok Go< / p >
< p class = "ui-li-aside" > $< strong > 10.99< / strong > < / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< / ul >
2010-10-12 20:10:19 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "c" data-dividertheme = "d" >
2010-10-11 12:11:20 +00:00
< li data-role = "list-divider" > A< / li >
< li > < a href = "index.html" > Adam Kinkaid< / a > < / li >
< li > < a href = "index.html" > Alex Wickerham< / a > < / li >
< li > < a href = "index.html" > Avery Johnson< / a > < / li >
< li data-role = "list-divider" > B< / li >
< li > < a href = "index.html" > Bob Cabot< / a > < / li >
< li data-role = "list-divider" > C< / li >
< li > < a href = "index.html" > Caleb Booth< / a > < / li >
< li > < a href = "index.html" > Christopher Adams< / a > < / li >
< / ul >
< / div > <!-- / body wrapper -->
2010-10-10 14:41:34 +00:00
2010-10-11 12:11:20 +00:00
2010-10-12 20:10:19 +00:00
< p > < strong > D< / strong > page, < strong > C< / strong > lists, < strong > E< / strong > dividers< / p >
2010-10-11 19:51:59 +00:00
2010-10-12 17:25:29 +00:00
< div class = "ui-body-d" >
2010-10-11 12:11:20 +00:00
2010-10-12 17:25:29 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "c" >
2010-10-11 12:11:20 +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" > Drafts< / a > < span class = "ui-li-count" > 4< / span > < / li >
< li > < a href = "index.html" > Sent< / a > < span class = "ui-li-count" > 328< / span > < / li >
< li > < a href = "index.html" > Trash< / a > < span class = "ui-li-count" > 62< / span > < / li >
< / ul >
2010-10-12 17:25:29 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "c" >
2010-10-11 12:11:20 +00:00
< li >
< img src = "images/album-bb.jpg" / >
< h3 > < a href = "index.html" > Broken Bells< / a > < / h3 >
< p > Broken Bells< / p >
< p class = "ui-li-aside" > $< strong > 11.99< / strong > < / 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 >
< p class = "ui-li-aside" > $< strong > 12.99< / strong > < / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< li >
< img src = "images/album-p.jpg" / >
< h3 > < a href = "index.html" > Wolfgang Amadeus Phoenix< / a > < / h3 >
< p > Phoenix< / p >
< p class = "ui-li-aside" > $< strong > 11.99< / strong > < / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< li >
< img src = "images/album-ok.jpg" / >
< h3 > < a href = "index.html" > Of The Blue Colour Of The Sky< / a > < / h3 >
< p > Ok Go< / p >
< p class = "ui-li-aside" > $< strong > 10.99< / strong > < / p >
< a href = "index.html" > Purchase album< / a >
< / li >
< / ul >
2010-10-12 20:10:19 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "c" data-dividertheme = "e" >
2010-10-11 12:11:20 +00:00
< li data-role = "list-divider" > A< / li >
< li > < a href = "index.html" > Adam Kinkaid< / a > < / li >
< li > < a href = "index.html" > Alex Wickerham< / a > < / li >
< li > < a href = "index.html" > Avery Johnson< / a > < / li >
< li data-role = "list-divider" > B< / li >
< li > < a href = "index.html" > Bob Cabot< / a > < / li >
< li data-role = "list-divider" > C< / li >
< li > < a href = "index.html" > Caleb Booth< / a > < / li >
< li > < a href = "index.html" > Christopher Adams< / a > < / li >
< / ul >
2010-10-12 17:25:29 +00:00
2010-10-11 12:11:20 +00:00
2010-10-10 14:41:34 +00:00
< / div > <!-- /content -->
< / div > <!-- /page -->
< / body >
< / html >
