1. Buttons, Headers, Footers, and Navigation
CIS 136 Building Mobile Apps

2. Cis136 – Building Mobile Apps
Header ToolBars
Cis136 – Building Mobile Apps

3. Header toolbars
The header is located at the top of the page and usually contains a page title/logo or one or two buttons
Button can be used for navigation or links to related pages
You can add buttons to the left and/or to the right side in the header (center is used for text)
In header, HTML <a> tag generates the button shape
The code below, will add a "Home" button to the left and a "Search" button to the right of the header title text:
<div data-role="header">
<a href=“index.html" >Home</a>
<h1>Welcome To My Homepage</h1>
<a href=“search.html" >Search</a>
</div>

4. Header Toolbars JQM CSS classes are available to help position buttons
Useful if you only want one button
ui-btn-left – forces button on left side
ui-btn-right - forces button on right side
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href=“search.html" class=“ui-btn ui-btn-right”>Search</a>
</div>

5. Cis136 – Building Mobile Apps
Footer ToolBars
Cis136 – Building Mobile Apps

6. Footer toolbars The footer is located at the bottom of the page.
The footer is more flexible than the header
it is more functional and changeable throughout pages, and can therefore contain as many buttons as needed
buttons in a footer do not automatically position themselves to the left and right of the text
<div data-role="footer">   <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>   <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>   <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a> </div>

7. Footer toolbars (cont.)
The buttons in the footer are not centered by default
use CSS to fix this
<div data-role="footer" style="text-align:center;">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>

8. Cis136 – Building Mobile Apps
Navigation Bars
Cis136 – Building Mobile Apps

9. Navigation bars
A navigation bar consists of a group of links that are aligned horizontally, typically within a header or footer
Are full-screen-wide bars used to hold buttons
Supports highlighting one button at a time as an active button

10. Navigation bars
The bar is coded as an unordered list of links wrapped inside a <div> element that has the data-role="navbar" attribute:
<div data-role="header">   <div data-role="navbar">     <ul>       <li><a href="#anylink">Home</a></li>       <li><a href="#anylink">Page Two</a></li>       <li><a href="#anylink">Search</a></li>     </ul>   </div> </div>

11. Navigation bars
By default, a link inside a navigation bar will automatically turn into a button
no need for class="ui-btn" or data-role="button“ The buttons are, by default, as wide as its content
use an unordered list to divide the buttons equally:
1 button takes 100% of the width
2 buttons share 50% each
3 buttons 33,3%, etc.
Note: If you specify more than 5 buttons in the navbar, it will wrap to multiple lines

12. Navigation bar icons
To add an icon to your navigation button, use the data-icon attribute
<a href="#anylink" data-icon="search">Search</a>
Note: The data-icon attribute use the same values as the CSS classes specified in the "Icons"
instead of specifying class="ui-icon-value", specify the attribute of data- icon="value”
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">Home</a></li>
<li><a href="#" data-icon="arrow-r">Page Two</a></li>
<li><a href="#" data-icon="search">Search</a></li>
</ul>
</div>

13. Navigation bar icons - positioning
choose where the icon should be positioned in the navigation button
top, right, bottom or left.
The icon position is set on the navbar container
it is not possible to position each individual button link
Use the data-iconpos attribute to specify the position:
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="#" data-icon="home">Home</a></li>
<li><a href="#" data-icon="arrow-r">Page Two</a></li>
<li><a href="#" data-icon="search">Search</a></li>
</ul>
</div>
By default, icons in navigation buttons are placed above the text (data-iconpos="top"). Need to set left, right, and bottom.

14. Navigation bar icons – active buttons
When a link in the navbar is tapped/clicked, it gets the selected (pressed down) look.
To achieve this look without having to tap the link, use the class="ui-btn-active"
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-icon="home">Home</a></li>
<li><a href="#pagetwo" data-icon="arrow-r">Page Two</a></li>
</ul>
</div>
By default, icons in navigation buttons are placed above the text (data-iconpos="top").

15. Navigation bar icons – persisting
For multiple pages, you might want the "selected" look for each button that represents the page the user is on
Won’t disappear when user switches pages
add the "ui-state-persist" class to your links, as well as the "ui- btn-active" class
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">Home</a></li>
<li><a href="#pagetwo" data-icon="arrow-r">Page Two</a></li>
</ul>
</div>
By default, icons in navigation buttons are placed above the text (data-iconpos="top").

16. Third-party Many popular icon libraries
Glyphish follows the iOS style tab that has large icons stacked on top of text labels
Easy to implement using custom styles
Licensed under the Creative Commons Attribution 3.0 United States License

17. Third-party
.nav-glyphish-example .ui-btn { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn:after { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important;
-webkit-box-shadow: none!important; webkit-border-radius: 0 !important; border-radius: 0 !important; }
#chat:after { background: 50% 50% no-repeat; background-size: 24px 22px; }
#mail:after { background: % 50% no-repeat; background-size: 24px 16px; }
#vacation:after { background: url("img/sample-305-palm-tree.png") % 50% no-repeat; background-size: 22px 27px; }
#desert:after { background: 50% 50% no-repeat; background-size: 20px 24px; }
#exit:after { background: % 50% no-repeat; background-size: 22px 24px; }
<div class="nav-glyphish-example" data-role="footer" data-theme="a">
<div class="nav-glyphish-example" data-role="navbar" data-grid="d">
<ul>
<li><a id="chat“ href="#" data-icon="custom">Chat</a></li>
<li><a id="mail" href="#" data-icon="custom">Mail</a></li>
<li><a id="exit“ href="#" data-icon="custom">Exit</a></li>
<li><a id="vacation" href="#" data-icon="custom">Vacation</a></li>
<li><a id="desert" href="#" data-icon="custom">Desert</a></li>
</ul>
</div>

18. Learn more at https://demos.jquerymobile.com/1.4.5/