Permalink
Browse files

Demos: improvements to fixed toolbar demo pages.

  • Loading branch information...
jaspermdegroot committed Mar 11, 2013
1 parent b757d60 commit 79b6df8728415d933ff735429f8751f62ed53dea
@@ -353,14 +353,14 @@ h2.jqm-home-widget {
.jqm-demos-index .jqm-content p.jqm-intro {
border: none;
}
.jqm-content ul:not(.ui-listview),
.jqm-content ul:not(.ui-listview) li {
.jqm-content > ul:not(.ui-listview),
.jqm-content > ul:not(.ui-listview) li {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.95em;
line-height: 1.7;
}
.jqm-content ul:not(.ui-listview) {
.jqm-content > ul:not(.ui-listview) {
margin: 1em 0;
padding-left: 1.3em;
}
@@ -385,7 +385,7 @@ h2.jqm-home-widget {
padding: 15px;
}
.jqm-content p {
.jqm-content > p {
line-height: 1.5;
}
.jqm-demos-home .jqm-content p.jqm-intro {
View
@@ -14,7 +14,7 @@
<li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>
<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/headers/bars-fixed.php">Fixed toolbars</a></li>
<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/fixed-toolbars/">Fixed toolbars</a></li>
<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.php" data-ajax="false">Flip switch toggle</a></li>
@@ -36,7 +36,7 @@
<li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a href="widgets/navbar/" data-ajax="false">Navbar</a></li>
<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a href="widgets/navbar/footer-persist-a.php">Navbar, persistent</a></li>
<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a href="widgets/fixed-toolbars/footer-persist-a.php">Navbar, persistent</a></li>
<li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a href="widgets/pages/">Pages</a></li>
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Fixed Toolbars</title>
<title>Fixed Toolbars - jQuery Mobile Framework</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">
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Fullscreen Fixed toolbars</title>
<title>Fullscreen Fixed toolbars - jQuery Mobile Framework</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">
@@ -16,31 +16,29 @@
<div data-role="page" class="jqm-demos">
<div data-role="header" data-position="fixed" data-theme="f" data-fullscreen="true">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<h1>Fullscreen fixed header</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>
<?php include( '../../search.php' ); ?>
</div>
<div data-role="content" class="jqm-content">
<img src="../../_assets/img/photo-run.jpeg" alt="Photo Run">
<p style="margin-top:0;text-align:center;"><img src="../../_assets/img/photo-run.jpeg" alt="Photo Run"></p>
<p class="ui-body">This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively &mdash; a common scenario for photo, image or video viewers.</p>
<p class="ui-body">To enable this toolbar feature type, you apply the <code>data-fullscreen="true"</code> attribute and the <code>data-position="fixed"</code> attribute to both the header and footer <code>div</code> elements, or whichever you want to be full-screen. </p>
<p class="ui-body">Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content, so not all content will be accessible with the toolbars open, just as shown in this demo.</p>
</div><!-- /content -->
</div><!-- /content -->
<div data-role="footer" data-theme="a" data-position="fixed" data-fullscreen="true">
<h1>Fullscreen Fixed Footer</h1>
</div>
<div data-role="footer" data-theme="a" data-position="fixed" data-fullscreen="true">
<h1>Fullscreen Fixed Footer</h1>
</div>
<?php include( '../../global-nav.php' ); ?>
<?php include( '../../global-nav.php' ); ?>
</div><!-- /page -->
</div><!-- /page -->
</body>
</html>
</body>
</html>
@@ -25,7 +25,7 @@
<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="index.php">navbar</a> in a fixed footer toolbars. 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>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>To tell the framework to apply the persistent behavior, add the same <code>data-id</code> attribute to the header and/or footer of all HTML pages in the navigation. It's that simple: If the page you're navigating to has a header or footer with the same <code>data-id</code> as the page you're navigating from, the toolbars will appear fixed outside of the transition. Each of the pages in this demo has a different transition to test out how this works.</p>
<p>Typically, the persistent toolbar technique will be combined with fixed positioning. In this example, the footer also has a navbar, like this:</p>
@@ -22,7 +22,7 @@
<?php include( '../../search.php' ); ?>
</div><!-- /header -->
<div data-role="content" class="jqm-content">
<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>
@@ -22,7 +22,7 @@
<?php include( '../../search.php' ); ?>
</div><!-- /header -->
<div data-role="content" class="jqm-content">
<div data-role="content" class="jqm-content jqm-fullwidth">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="false">
<li><a href="#">
@@ -22,7 +22,7 @@
<?php include( '../../search.php' ); ?>
</div><!-- /header -->
<div data-role="content" class="jqm-content">
<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 messages...">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Fixed Toolbars</title>
<title>Fixed Toolbars - jQuery Mobile Framework</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">
@@ -48,9 +48,10 @@
</code></pre>
<h2>Fullscreen Toolbars</h2>
<p><a href="bars-fullscreen.php">Fullscreen</a> fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.</p>
<p>To enable this option on a fixed header or footer, add the <code>data-fullscreen</code> attribute to the element.</p>
<p>To enable this option on a fixed header or footer, add the <code>data-fullscreen</code> attribute to the element.</p>
<pre><code>
&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot; data-fullscreen=&quot;true&quot;&gt;
@@ -94,92 +95,20 @@
<p>While we will continue to try to find ways to mitigate these bugs as best we can, we currently advise against implementing fixed toolbars containing complicated user styles and form elements without extensive testing in all versions of Android's native browser.</p>
<div class="ui-body ui-body-e">
<h2>No longer supported: touchOverflowEnabled</h2>
<p>Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property <code>overflow-scrolling: touch</code>, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under <code>$.support</code> and we have no plans to remove that test at this time. </p>
</div>
<hr />
<h3>The rest of the page is just sample content to make the page very long</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div><!-- /content -->
<div data-role="footer" data-theme="f" data-position="fixed">
<h1>Fixed Footer</h1>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<?php include( '../../global-nav.php' ); ?>
<h3>And an inset list</h3>
</div><!-- /page -->
<ul data-role="listview" data-inset="true">
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<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>
</ul>
<br />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h3>Embedded form</h3>
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div data-role="fieldcontain">
<label for="slider2">Flip switch:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>
</div>
</form>
<h3>A bit more text</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div><!-- /content -->
<div data-role="footer" data-theme="f" data-position="fixed">
<h1>Fixed Footer</h1>
</div>
<?php include( '../../global-nav.php' ); ?>
</div><!-- /page -->
</body>
</html>
</body>
</html>
@@ -1,91 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Persistent footer A</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-demos.css"/>
<script src="../js/jquery.js"></script>
<script src="../_assets/js/jqm-demos.js"></script>
<script src="../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
<h1>Info</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div>
<div data-role="content" class="jqm-content">
<h2>About persistent toolbars</h2>
<p>These pages are a demo of persistent toolbars. 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>To tell the framework to apply the persistent behavior, add the same <code>data-id</code> attribute to the header and/or footer of all HTML pages in the navigation. It's that simple: If the page you're navigating to has a header or footer with the same <code>data-id</code> as the page you're navigating from, the toolbars will appear fixed outside of the transition. Each of the pages in this demo has a different transition to test out how this works.</p>
<p>Typically, the persistent toolbar technique will be combined with fixed positioning. In this example, the footer also has a navbar, like this:</p>
<pre><code>
&lt;div data-role=&quot;footer&quot;<strong> data-id=&quot;foo1&quot; data-position=&quot;fixed&quot;</strong>&gt;
&lt;div data-role=&quot;navbar&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;a.html&quot;&gt;Info&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;b.html&quot;&gt;Friends&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;c.html&quot;&gt;Albums&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;d.html&quot;&gt;Emails&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;&lt;!-- /navbar --&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
</code></pre>
<p>To set the active state of an item in a persistent toolbar, add <code>class="ui-btn-active ui-state-persist"</code> to the corresponding anchor.</p>
<pre><code>
&lt;li&gt;&lt;a href=&quot;a.html&quot; <strong>class=&quot;ui-btn-active ui-state-persist&quot;</strong>&gt;Info&lt;/a&gt;&lt;/li&gt;
</code></pre>
<h3>A note about transitions</h3>
<p>The slide, slideup, slidedown, fade or none <a href="../pages/page-transitions.html">page transitions</a> all work great with persistent fixed toolbars. However, intensive 3D transitions like flip, turn, and flow can cause positioning and animation performance issues with this technique so we don't recommend using them.</p>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<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 data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
<li><a href="bars-themes.html">Theming toolbars</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer-persist-a.html" data-prefetch="true" data-transition="slideup" class="ui-btn-active ui-state-persist">Info</a></li>
<li><a href="footer-persist-b.html" data-prefetch="true">Friends</a></li>
<li><a href="footer-persist-c.html" data-prefetch="true">Albums</a></li>
<li><a href="footer-persist-d.html" data-prefetch="true">Emails</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Oops, something went wrong.

0 comments on commit 79b6df8

Please sign in to comment.