2010-10-16 00:05:35 +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 13:11:26 +00:00
< title > jQuery Mobile Framework - Persistent footer A< / 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-16 00:05:35 +00:00
< / head >
< body >
2011-06-20 19:57:04 +00:00
< div data-role = "page" class = "type-interior" >
< div data-role = "header" data-theme = "f" data-position = "fixed" >
2010-10-16 00:15:49 +00:00
< h1 > Friends< / 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-16 00:05:35 +00:00
< / div >
< div data-role = "content" >
2011-06-20 20:35:27 +00:00
< div class = "content-primary" >
2011-03-28 22:30:55 +00:00
< p > This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the footer remain fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same < code > data-id< / code > attribute. < strong > Note:< / strong > If you'd like an active button in your navbar to remain active when you return to it again, add a class of < code > ui-state-persist< / code > in addition to < code > ui-btn-active< / code > < / p >
2010-10-16 00:15:49 +00:00
2010-10-16 00:05:35 +00:00
2010-10-16 00:15:49 +00:00
< ul data-role = "listview" data-dividertheme = "d" style = "margin-top: 0;" >
2010-10-16 00:05:35 +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 >
< li > < a href = "index.html" > Culver James< / a > < / li >
< li data-role = "list-divider" > D< / li >
< li > < a href = "index.html" > David Walsh< / a > < / li >
< li > < a href = "index.html" > Drake Alfred< / a > < / li >
< li data-role = "list-divider" > E< / li >
< li > < a href = "index.html" > Elizabeth Bacon< / a > < / li >
< li > < a href = "index.html" > Emery Parker< / a > < / li >
< li > < a href = "index.html" > Enid Voldon< / a > < / li >
< li data-role = "list-divider" > F< / li >
< li > < a href = "index.html" > Francis Wall< / a > < / li >
< li data-role = "list-divider" > G< / li >
< li > < a href = "index.html" > Graham Smith< / a > < / li >
< li > < a href = "index.html" > Greta Peete< / a > < / li >
< li data-role = "list-divider" > H< / li >
< li > < a href = "index.html" > Harvey Walls< / a > < / li >
< li data-role = "list-divider" > M< / li >
< li > < a href = "index.html" > Mike Farnsworth< / a > < / li >
< li > < a href = "index.html" > Murray Vanderbuilt< / a > < / li >
< li data-role = "list-divider" > N< / li >
< li > < a href = "index.html" > Nathan Williams< / a > < / li >
< li data-role = "list-divider" > P< / li >
< li > < a href = "index.html" > Paul Baker< / a > < / li >
< li > < a href = "index.html" > Pete Mason< / a > < / li >
< li data-role = "list-divider" > R< / li >
< li > < a href = "index.html" > Rod Tarker< / a > < / li >
< li data-role = "list-divider" > S< / li >
< li > < a href = "index.html" > Sawyer Wakefield< / a > < / li >
< / ul >
2011-06-20 20:35:27 +00:00
< / div > <!-- /content - primary -->
< div class = "content-secondary" >
< div data-role = "collapsible" data-collapsed = "true" data-theme = "b" >
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" > Toolbars< / li >
< li > < a href = "docs-bars.html" > Toolbar basics< / a > < / li >
< li > < a href = "docs-headers.html" > Header bars< / a > < / li >
< li > < a href = "docs-footers.html" > Footer bars< / a > < / li >
< li > < a href = "docs-navbar.html" > Navbars< / a > < / li >
< li > < a href = "bars-fixed.html" > Fixed positioning< / a > < / li >
< li > < a href = "bars-fullscreen.html" > Fullscreen positioning< / a > < / li >
< li data-theme = "a" > < a href = "footer-persist-a.html" > Persistent footer nav bar< / a > < / li >
< li > < a href = "bars-themes.html" > Theming toolbars< / a > < / li >
2011-06-20 20:35:27 +00:00
< / ul >
< / div >
< / div >
< / div > <!-- /content -->
2010-10-16 00:05:35 +00:00
< div data-role = "footer" data-id = "foo1" data-position = "fixed" >
< div data-role = "navbar" >
< ul >
2011-03-28 22:30:55 +00:00
< li > < a href = "footer-persist-a.html" class = "ui-btn-active ui-state-persist" > Friends< / a > < / li >
2010-10-16 00:05:35 +00:00
< li > < a href = "footer-persist-b.html" > Albums< / a > < / li >
< li > < a href = "footer-persist-c.html" > Emails< / a > < / li >
< / ul >
< / div > <!-- /navbar -->
2010-11-11 16:14:27 +00:00
< / div > <!-- /footer -->
2010-10-16 00:05:35 +00:00
2011-06-20 20:35:27 +00:00
< / div > <!-- /page -->
< / body >
< / html >
