Browse files

Toolbar: Demo the use of custom CSS to add left/right buttons to footer

(cherry picked from commit 27d808a)

Closes gh-7635
Fixes gh-7634
  • Loading branch information...
gabrielschulhof committed Aug 21, 2014
1 parent 3e2074a commit c4623d0f8ca666bc06f306455bcf1b6e40ffd560
Showing with 27 additions and 0 deletions.
  1. +27 −0 demos/toolbar/index.php
@@ -11,6 +11,21 @@
<script src="../../external/jquery/jquery.js"></script>
<script src="../_assets/js/"></script>
<script src="../../js/"></script>
<style id="footer-abs-buttons">
.footer-button-right {
position: absolute;
margin: 0;
top: auto;
bottom: 0.24em;
.footer-button-left {
left: 0.4em;
.footer-button-right {
right: 0.4em;
<div data-role="page" class="jqm-demos" data-quicklinks="true">
@@ -118,6 +133,18 @@
</div><!-- /demo-html -->
<h3>Buttons in footers</h3>
<p>The classes <code>ui-btn-left</code> and <code>ui-btn-right</code> were not meant to be used in footers, because they do not account for the possible presence of text, navbars, and and other elements often present in footers. You can nevertheless achieve a similar effect when you add a bit of custom CSS.</p>
<div data-demo-html="true" data-demo-css="#footer-abs-buttons">
<div data-role="footer">
<a href="#" class="ui-btn ui-corner-all ui-btn-inline ui-mini footer-button-left ui-btn-icon-left ui-icon-power">Quit</a>
<a href="#" class="ui-btn ui-corner-all ui-btn-inline ui-mini footer-button-right ui-btn-icon-right ui-icon-carat-r">Next</a>
<h2>Adding back button to header</h2>
<p>jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app webview. The framework automatically generates a "back" button on a header when the page plugin's <code>addBackBtn</code> option is true. This can also be set via markup if the header has a <code>data-add-back-btn="true"</code> attribute.</p>

0 comments on commit c4623d0

Please sign in to comment.