Permalink
Browse files

First pass at toolbar widget

  • Loading branch information...
arschmitz committed Apr 25, 2013
1 parent 49c5dda commit 7abc72027abc39148490e4ded50c5ca47d8ab232
@@ -638,10 +638,11 @@ h2.jqm-home-widget {
}
/* Footer */
.ui-page .jqm-footer{
position:absolute;
}
.jqm-footer {
overflow: hidden;
position: absolute;
bottom: 0;
width: 100%;
}
.jqm-footer p {
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Headers - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
<script>
$(function(){
$("[data-role='header'], [data-role='footer']").toolbar();
});
</script>
</head>
<body>
<div data-role="header" class="jqm-header" data-position="fixed">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
</div><!-- /header -->
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="content" class="jqm-content">
<h1>Fixed External Headers <a href="http://api.jquerymobile.com/header/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>
<p class="jqm-intro">The Header and footer on this page are outside of the page within the body. They have been set to position fixed.</p>
<h2>True Persistant Toolbars</h2>
<p>Because External toolbars are outside of the page they are not effected by transition and make truely persistant toolbars possible</p>
<p><a href="footer-persist-a.php" data-ajax="false">Persistant Footer</a></p>
</div><!-- /content -->
<?php include( '../../global-nav.php' ); ?>
</div><!-- /page -->
<div data-role="footer" class="jqm-footer" data-position="fixed" style="background-color:white;">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /footer -->
</body>
</html>
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Headers - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
<script>
$(function(){
$("[data-role='header'], [data-role='footer']").toolbar();
});
</script>
</head>
<body>
<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
</div><!-- /header -->
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="content" class="jqm-content">
<h1>External Headers <a href="http://api.jquerymobile.com/header/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>
<p class="jqm-intro">
The Header and footer on this page are positioned outside the page. They are before and after the page withing the body. These Toolbars will remain in the dom until manually removed. If you navigate to a page that does not have a header or footer within it these toolbars will persist. Otherwise they will hide to allow the page's internal header and footer to show.
</p>
<h2>Header markup</h2>
<p>The markup for external headers is identical to normal headers you just place the header outside the page within the body of your page</p>
<h2>Auto Init</h2>
<p>Because these tolbars are not within the page they will not auto initalize. you must call the toolbar plugin yourself on document ready</p>
<h2>Ajax Navigation</h2>
<p>Because these toolbars are not within the page they will remain in the dom until manually removed. However they will automaticly hide if you navigate to a page containing a toolbar to allow the pages own toolbars to take their place. They will automaticly show again if you navigate to a page containing no toolbars.
</p>
<p>Toolbars not within a page will not be pulled into the dom durring ajax navigation</p>
<h2>Fixed External Toolbars</h2>
<p>External toolbars can also be set to fixed positioning just like normal toolbars <a href="external-fixed.php" data-ajax="false">Fixed Position External Toolbars</a></p>
</div><!-- /content -->
<?php include( '../../global-nav.php' ); ?>
</div><!-- /page -->
<div data-role="footer" class="jqm-footer">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /footer -->
</body>
</html>
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
<script>
$(function(){
$("[data-role='navbar']").navbar();
$("[data-role='header'], [data-role='footer']").toolbar();
});
</script>
</head>
<body>
<div data-role="header" class="jqm-header" data-position="fixed">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
</div><!-- /header -->
<div data-role="page" class="jqm-demos">
<div data-role="content" class="jqm-content">
<h1>Persistent navbars <a href="http://api.jquerymobile.com/navbar/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>
<p>These pages are a demo of a persistent <a href="../navbar/">navbar</a> in a fixed footer toolbar. Click on any of the links in the footer, and you'll see the page content transition. Both the persistent header and footer on these pages remain in place during the animation to a new HTML page.</p>
<p>With the new external toolbars no extra effort is required to now have persistant toolbars simply place them outside of the page container on each page they will be loaded on the first page and persist on subsequent pages. The toolbars still need to be placed on each page to account for refresh however they will be ignored if not within a page container.</p>
<p>Typically, the persistent toolbar technique will be combined with fixed positioning.</p>
<h2>Improving page load with persistant toolbars</h2>
<p>By combining this technique with a little bit of server side logic you can reduce the file size for each page load significantly by not sending anything execpt the actual page container back when the request is from ajax. this not only reduces file size but makes the actual processing of the page quicker also. To see an example of this technique see <a href="optimized-persistant-toolbars-a.php" data-ajax="false">Optimized Persistant Toolbars</a></p>
<h3>A note about transitions</h3>
<p>By Removing the toolbars from the page container they are no longer part of the page transition which dramaticly improves the performance of complex 3D page transitions over the older style of persistant toolbars.</p>
</div><!-- /content -->
<?php include( '../../global-nav.php' ); ?>
</div><!-- /page -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer-persist-a.php" data-prefetch="true" data-transition="none">Info</a></li>
<li><a href="footer-persist-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
<li><a href="footer-persist-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
<li><a href="footer-persist-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</body>
</html>
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
<script>
$(function(){
$("[data-role='navbar']").navbar();
$("[data-role='header'], [data-role='footer']").toolbar();
});
</script>
</head>
<body>
<div data-role="header" class="jqm-header" data-position="fixed">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
</div><!-- /header -->
<div data-role="page" class="jqm-demos">
<div data-role="content" class="jqm-content jqm-fullwidth">
<ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d"data-filter-placeholder="Search friends...">
<li data-role="list-divider">A</li>
<li><a href="#">Adam Kinkaid</a></li>
<li><a href="#">Alex Wickerham</a></li>
<li><a href="#">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="#">Bob Cabot</a></li>
<li data-role="list-divider">C</li>
<li><a href="#">Caleb Booth</a></li>
<li><a href="#">Christopher Adams</a></li>
<li><a href="#">Culver James</a></li>
<li data-role="list-divider">D</li>
<li><a href="#">David Walsh</a></li>
<li><a href="#">Drake Alfred</a></li>
<li data-role="list-divider">E</li>
<li><a href="#">Elizabeth Bacon</a></li>
<li><a href="#">Emery Parker</a></li>
<li><a href="#">Enid Voldon</a></li>
<li data-role="list-divider">F</li>
<li><a href="#">Francis Wall</a></li>
<li data-role="list-divider">G</li>
<li><a href="#">Graham Smith</a></li>
<li><a href="#">Greta Peete</a></li>
<li data-role="list-divider">H</li>
<li><a href="#">Harvey Walls</a></li>
<li data-role="list-divider">M</li>
<li><a href="#">Mike Farnsworth</a></li>
<li><a href="#">Murray Vanderbuilt</a></li>
<li data-role="list-divider">N</li>
<li><a href="#">Nathan Williams</a></li>
<li data-role="list-divider">P</li>
<li><a href="#">Paul Baker</a></li>
<li><a href="#">Pete Mason</a></li>
<li data-role="list-divider">R</li>
<li><a href="#">Rod Tarker</a></li>
<li data-role="list-divider">S</li>
<li><a href="#">Sawyer Wakefield</a></li>
</ul>
</div><!-- /content -->
<?php include( '../../global-nav.php' ); ?>
</div><!-- /page -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer-persist-a.php" data-prefetch="true" data-transition="none" class="ui-btn-active ui-state-persist">Info</a></li>
<li><a href="footer-persist-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
<li><a href="footer-persist-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
<li><a href="footer-persist-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</body>
</html>
Oops, something went wrong.

0 comments on commit 7abc720

Please sign in to comment.