2010-10-10 14:41:34 +00:00
<!DOCTYPE html>
< html >
< head >
< title > jQuery Mobile Docs - Lists< / title >
2010-10-12 19:14:07 +00:00
< link rel = "stylesheet" href = "css/all" / >
2010-10-10 14:41:34 +00:00
< script type = "text/javascript" src = "js/all" > < / script >
< script type = "text/javascript" src = "docs/docs.js" > < / script >
< / head >
< body >
< div data-role = "page" >
< div data-role = "header" >
< h1 > List themes< / h1 >
< / div > <!-- /header -->
2010-10-11 19:51:59 +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 >
< p > All the standard button swatches can be applied to lists. The default theme is "f" (silver in the default theme). < / p >
< p > The list item color scheme can be changed to any button color theme swatch by adding the < code > data-theme="e"< / code > attribute to the list, and setting the letter theme swatch. < / p >
2010-10-11 12:11:20 +00:00
2010-10-12 17:25:29 +00:00
< p > The theme for list dividers can be set by adding the < code > data-dividertheme< / code > to the list and specifying a swatch letter.< / p >
2010-10-10 14:41:34 +00:00
2010-10-12 17:25:29 +00:00
< p > The theme for list dividers can be set by adding the < code > data-counttheme< / code > to the list and specifying a swatch letter.< / p >
< p > < strong > A< / strong > swatch< / p >
< ul data-role = "listview" data-inset = "true" data-theme = "a" data-counttheme = "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" > 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 >
< 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" > 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 >
< 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" > 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 >
< 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" > 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 >
< 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" > 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 >
< h2 > Theme variation: "a" body, "a" lists, "a" dividers< / h2 >
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 17:25:29 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "a" data-dividertheme = "a" >
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 17:25:29 +00:00
< h2 > Theme variation: "b" body, "c" lists, "b" dividers< / h2 >
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 17:25:29 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "c" data-dividertheme = "b" >
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 17:25:29 +00:00
< h2 > Theme variation: "d" body, "c" lists, "b" dividers< / h2 >
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 17:25:29 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "c" data-dividertheme = "b" >
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 >
