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:34:31 +00:00
< title > jQuery Mobile Docs - Lists with Form Controls< / 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" >
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:34:31 +00:00
< h1 > Inset list samples< / h1 >
2011-03-24 23:54:47 +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-03-31 21:34:31 +00:00
< form >
< h2 > Simple list< / h2 >
2010-10-10 14:41:34 +00:00
< ul data-role = "listview" data-inset = "true" >
2011-03-31 21:34:31 +00:00
< li > < a href = "index.html" > Acura< / a > < / li >
< li > < a href = "index.html" > Audi< / a > < / li >
< li > < a href = "index.html" > BMW< / a > < / li >
< li > < a href = "index.html" > Cadillac< / a > < / li >
< li > < a href = "index.html" > Ferrari< / a > < / li >
< / ul >
< h2 > Count bubbles< / h2 >
< ul data-role = "listview" data-inset = "true" >
< li > < a href = "index.html" > Inbox < span class = "ui-li-count" > 12< / span > < / a > < / li >
2011-03-24 23:29:28 +00:00
< li > < a href = "index.html" > Outbox < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > Drafts < span class = "ui-li-count" > 4< / span > < / a > < / li >
< li > < a href = "index.html" > Sent < span class = "ui-li-count" > 328< / span > < / a > < / li >
< li > < a href = "index.html" > Trash < span class = "ui-li-count" > 62< / span > < / a > < / li >
2011-03-31 21:34:31 +00:00
< / ul >
< h2 > Numbered list< / h2 >
2010-10-10 14:41:34 +00:00
< ol data-role = "listview" data-inset = "true" >
< li > < a href = "index.html" > The Godfather< / a > < / li >
< li > < a href = "index.html" > Inception< / a > < / li >
< li > < a href = "index.html" > The Good, the Bad and the Ugly < / a > < / li >
< li > < a href = "index.html" > Pulp Fiction< / a > < / li >
< li > < a href = "index.html" > Schindler's List< / a > < / li >
< / ol >
2011-03-31 21:34:31 +00:00
< h2 > Divided, formatted content< / h2 >
< ul data-role = "listview" data-inset = "true" >
< li > < a href = "index.html" >
< 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 >
< / a > < / li >
< li > < a href = "index.html" >
< 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 >
< / a > < / li >
< / ul >
< h2 > Icon list< / h2 >
< ul data-role = "listview" data-inset = "true" >
2011-08-17 19:12:05 +00:00
< li > < a href = "index.html" > < img src = "images/gf.png" alt = "France" class = "ui-li-icon ui-corner-none" > France < span class = "ui-li-count" > 4< / span > < / a > < / li >
2011-03-31 21:34:31 +00:00
< li > < a href = "index.html" > < img src = "images/de.png" alt = "Germany" class = "ui-li-icon" > Germany < span class = "ui-li-count" > 4< / span > < / a > < / li >
< li > < a href = "index.html" > < img src = "images/gb.png" alt = "Great Britain" class = "ui-li-icon" > Great Britain < span class = "ui-li-count" > 0< / span > < / a > < / li >
< li > < a href = "index.html" > < img src = "images/fi.png" alt = "Finland" class = "ui-li-icon" > Finland < span class = "ui-li-count" > 12< / span > < / a > < / li >
< li > < a href = "index.html" > < img src = "images/sj.png" alt = "Norway" class = "ui-li-icon" > Norway < span class = "ui-li-count" > 328< / span > < / a > < / li >
2011-08-17 19:12:05 +00:00
< li > < a href = "index.html" > < img src = "images/us.png" alt = "United States" class = "ui-li-icon ui-corner-none" > United States < span class = "ui-li-count" > 62< / span > < / a > < / li >
2011-03-31 21:34:31 +00:00
< / ul >
< h2 > Thumbnail, split button list< / h2 >
2010-10-10 14:41:34 +00:00
< ul data-role = "listview" data-inset = "true" >
2011-03-31 21:34:31 +00:00
< li > < a href = "index.html" >
< img src = "images/album-bb.jpg" / >
< h3 > Broken Bells< / h3 >
< p > Broken Bells< / p >
< / a > < a href = "lists-split-purchase.html" data-rel = "dialog" data-transition = "slideup" > 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 = "lists-split-purchase.html" data-rel = "dialog" data-transition = "slideup" > Purchase album
< / a > < / li >
< li > < a href = "index.html" >
< img src = "images/album-p.jpg" / >
< h3 > Wolfgang Amadeus Phoenix< / h3 >
< p > Phoenix< / p >
< / a > < a href = "lists-split-purchase.html" data-rel = "dialog" data-transition = "slideup" > Purchase album
< / a > < / li >
< / ul >
< h2 > Divided, filterable list< / h2 >
< ul data-role = "listview" data-filter = "true" data-inset = "true" >
2011-03-24 23:46:05 +00:00
< li data-role = "list-divider" > A< / li >
2010-10-10 14:41:34 +00:00
< 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 >
2011-03-24 23:46:05 +00:00
< li data-role = "list-divider" > B< / li >
2010-10-10 14:41:34 +00:00
< li > < a href = "index.html" > Bob Cabot< / a > < / li >
2011-03-24 23:46:05 +00:00
< li data-role = "list-divider" > C< / li >
2010-10-10 14:41:34 +00:00
< li > < a href = "index.html" > Caleb Booth< / a > < / li >
< li > < a href = "index.html" > Christopher Adams< / a > < / li >
< / ul >
2011-03-31 21:34:31 +00:00
< / form >
2011-06-20 20:35:27 +00:00
< / div > <!-- /content - primary -->
< 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 > < 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 data-theme = "a" > < 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 >
2010-10-10 14:41:34 +00:00
< / div > <!-- /content -->
2011-06-20 20:35:27 +00:00
< 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 >
