Permalink
Browse files

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

Closes gh-7635
Fixes gh-7634
  • Loading branch information...
gabrielschulhof committed Aug 21, 2014
1 parent 7e9209e commit 27d808ae4dbf3591d3115fd1413764b00886c4f2
Showing with 27 additions and 0 deletions.
  1. +27 −0 demos/toolbar/index.php
View
@@ -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-left,
.footer-button-right {
position: absolute;
margin: 0;
top: auto;
bottom: 0.24em;
}
.footer-button-left {
left: 0.4em;
}
.footer-button-right {
right: 0.4em;
}
</style>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">
@@ -118,6 +133,18 @@
</div>
</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">
<h2>Footer</h2>
<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>
</div>
</div>
<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 27d808a

Please sign in to comment.