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 21:40:07 +00:00
< title > jQuery Mobile Docs - Inset Readonly 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 >
2011-06-20 19:41:40 +00:00
< script src = "../../experiments/themeswitcher/jquery.mobile.themeswitcher.js" > < / script >
< script src = "../_assets/js/jqm-docs.js" > < / script >
2011-04-14 20:04:47 +00:00
< script src = "../../js/" > < / script >
2010-10-10 14:41:34 +00:00
< / head >
< body >
2011-06-20 19:57:04 +00:00
< div data-role = "page" class = "type-interior" >
2011-08-04 21:12:59 +00:00
2011-08-04 21:15:44 +00:00
< style type = "text/css" >
2011-08-04 21:12:59 +00:00
h2 { margin:50px 0 30px 0; }
< / style >
2010-10-10 14:41:34 +00:00
2011-06-20 19:57:04 +00:00
< div data-role = "header" data-theme = "f" >
2011-03-31 21:40:07 +00:00
< h1 > Inset Readonly Lists< / h1 >
2011-02-03 23:34:35 +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 -->
< div data-role = "content" >
2011-06-20 20:35:27 +00:00
< div class = "content-primary" >
2011-08-04 21:12:59 +00:00
< p > Here is a variety of full-width lists that are read-only. If a list has the < code > data-role="listview"< / code > attribute, but the contents aren't linked, it will display as read-only. These look like normal lists, but don't have a right arrow.< / ap >
2011-03-31 21:34:31 +00:00
< h2 > Simple list< / h2 >
2011-08-04 21:12:59 +00:00
2011-03-31 21:34:31 +00:00
< ul data-role = "listview" >
2010-10-10 14:41:34 +00:00
< li > Acura< / li >
< li > Audi< / li >
< li > BMW< / li >
< li > Cadillac< / li >
< li > Ferrari< / li >
< / ul >
2011-03-31 21:34:31 +00:00
< h2 > Count bubbles< / h2 >
< ul data-role = "listview" >
< li > Inbox < span class = "ui-li-count" > 12< / span > < / li >
< li > Outbox < span class = "ui-li-count" > 0< / span > < / li >
< li > Drafts < span class = "ui-li-count" > 4< / span > < / li >
< li > Sent < span class = "ui-li-count" > 328< / span > < / li >
< li > Trash < span class = "ui-li-count" > 62< / span > < / li >
< / ul >
< h2 > Numbered list< / h2 >
< ol data-role = "listview" >
< li > The Godfather< / li >
< li > Inception< / li >
< li > The Good, the Bad and the Ugly < / li >
< li > Pulp Fiction< / li >
< li > Schindler's List< / li >
< / ol >
< h2 > Divided, formatted content< / h2 >
< ul data-role = "listview" >
< li >
< h3 > Stephen Weber< / h3 >
< p > < strong > You've been invited to a meeting at Filament Group in Boston, MA< / strong > < / p >
< p > Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.< / p >
< p class = "ui-li-aside" > < strong > 6:24< / strong > PM< / p >
< / li >
< li >
< h3 > jQuery Team< / h3 >
< p > < strong > Boston Conference Planning< / strong > < / p >
< p > In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.< / p >
< p class = "ui-li-aside" > < strong > 9:18< / strong > AM< / p >
< / li >
< / ul >
< h2 > Icon list< / h2 >
< ul data-role = "listview" >
< li > < img src = "images/gf.png" alt = "France" class = "ui-li-icon" > France < span class = "ui-li-count" > 4< / span > < / li >
< li > < img src = "images/de.png" alt = "Germany" class = "ui-li-icon" > Germany < span class = "ui-li-count" > 4< / span > < / li >
< li > < img src = "images/gb.png" alt = "Great Britain" class = "ui-li-icon" > Great Britain < span class = "ui-li-count" > 0< / span > < / li >
< li > < img src = "images/fi.png" alt = "Finland" class = "ui-li-icon" > Finland < span class = "ui-li-count" > 12< / span > < / li >
< li > < img src = "images/sj.png" alt = "Norway" class = "ui-li-icon" > Norway < span class = "ui-li-count" > 328< / span > < / li >
< li > < img src = "images/us.png" alt = "United States" class = "ui-li-icon" > United States < span class = "ui-li-count" > 62< / span > < / li >
< / ul >
< h2 > Thumbnail list< / h2 >
< ul data-role = "listview" >
< li >
< img src = "images/album-bb.jpg" / >
< h3 > Broken Bells< / h3 >
< p > Broken Bells< / p >
< / li >
< li >
< img src = "images/album-hc.jpg" / >
< h3 > Warning< / h3 >
< p > Hot Chip< / p >
< / li >
< li >
< img src = "images/album-p.jpg" / >
< h3 > Wolfgang Amadeus Phoenix< / h3 >
< p > Phoenix< / p >
< / li >
< / ul >
< h2 > Divided, filterable list< / h2 >
< ul data-role = "listview" data-filter = "true" >
< li data-role = "list-divider" > A< / li >
< li > Adam Kinkaid< / li >
< li > Alex Wickerham< / li >
< li > Avery Johnson< / li >
< li data-role = "list-divider" > B< / li >
< li > Bob Cabot< / li >
< li data-role = "list-divider" > C< / li >
< li > Caleb Booth< / li >
< li > Christopher Adams< / li >
< / ul >
2011-06-20 20:35:27 +00:00
< / div > <!-- /content - primary -->
2010-10-10 14:41:34 +00:00
2011-06-20 20:35:27 +00:00
< div class = "content-secondary" >
2011-09-29 20:35:31 +00:00
< div data-role = "collapsible" data-collapsed = "true" data-theme = "b" data-content-theme = "d" >
2011-06-20 20:35:27 +00:00
2011-06-20 22:23:09 +00:00
< h3 > More in this section< / h3 >
2011-06-20 20:35:27 +00:00
< ul data-role = "listview" data-theme = "c" data-dividertheme = "d" >
2011-06-20 21:17:04 +00:00
< li data-role = "list-divider" > List views< / li >
< li > < a href = "docs-lists.html" > List markup conventions< / a > < / li >
< li > < a href = "lists-ul.html" > Basic linked list< / a > < / li >
< li > < a href = "lists-nested.html" > Nested list< / a > < / li >
< li > < a href = "lists-ol.html" > Numbered list< / a > < / li >
< li > < a href = "lists-split.html" > Split button list< / a > < / li >
< li > < a href = "lists-divider.html" > List dividers< / a > < / li >
< li > < a href = "lists-count.html" > Count bubble< / a > < / li >
< li > < a href = "lists-thumbnails.html" > Thumbnails< / a > < / li >
< li > < a href = "lists-icons.html" > Icons< / a > < / li >
< li > < a href = "lists-formatting.html" > Content formatting< / a > < / li >
< li > < a href = "lists-search.html" > Search filter bar< / a > < / li >
< li > < a href = "lists-search-inset.html" > Inset search filter bar< / a > < / li >
< li > < a href = "lists-search-with-dividers.html" > Search filter bar with dividers< / a > < / li >
< li data-theme = "a" > < a href = "lists-readonly.html" > Read-only lists< / a > < / li >
< li > < a href = "lists-readonly-inset.html" > Read-only inset lists< / a > < / li >
< li > < a href = "lists-forms.html" > Lists with forms< / a > < / li >
< li > < a href = "lists-forms-inset.html" > Inset lists with forms< / a > < / li >
< li > < a href = "lists-inset.html" > Inset styled lists< / a > < / li >
< li > < a href = "lists-performance.html" > List performance test< / a > < / li >
< li > < a href = "lists-themes.html" > Theming lists< / a > < / li >
2011-06-20 20:35:27 +00:00
< / ul >
< / div >
< / div >
< / div > <!-- /content -->
< div data-role = "footer" class = "footer-docs" data-theme = "c" >
2011-06-20 22:50:52 +00:00
< p > © 2011 The jQuery Project< / p >
2011-06-20 20:35:27 +00:00
< / div >
< / div > <!-- /page -->
< / body >
< / html >
