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

2. Cis136 – Building Mobile Apps
Buttons
Cis136 – Building Mobile Apps

3. JQM buttons - Overview
Mobile applications are built upon the simplicity of tapping things you'd want displayed
Used to navigate from one page/view to another
A button in jQuery Mobile can be created in four ways in the Content section:
Using the <input> element
Using the <button> element with class="ui-btn"
Using the <a> element with class="ui-btn
Using the <a> element with data-role=“button”
<a> tag in header, do not need data-role on <a> tag
<a> tag in content, you do
Experiment to find out 

4. Creating Buttons in Content Section
To link between pages by buttons, use the <a> element
add class ui-btn inside the anchor <a> tag
Button goes to edges – in essence a toolbar look
<a href="#pagetwo" class="ui-btn">Page 2</a>
Can also set the date-role attribute
Gets the rounded corners and doesn’t go to edges
<a href="#pagetwo" data-role=“button”">Page 2</a>

5. In-line buttons
In Content area, buttons take up the full width of the screen
If you want a button that is only as wide as its content:
<a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a>
if you want two or more buttons to appear side by side, add the ui-btn-inline class to each one

6. Grouping buttons
Use a <div> element with the date-role of controlgroup and data- type to indicate position:
Horizontal
<div data-role="controlgroup" data-type="horizontal">
<a href=“page1" class="ui-btn">Button 1</a>
<a href=“page2" class="ui-btn">Button 2</a>
<a href=“page3" class="ui-btn">Button 3</a>
</div>
Vertical (default)
<div data-role="controlgroup" data-type="vertical">
By default, no margins and space between them. And only the first and the last button has rounded corners, which creates a nice look when grouped together

7. Back Link and Back Buttons
Some phones do not have back button hardware
To create a Back link, use the data-rel="back" attribute
this will ignore the anchor's href value <a href="#" class="ui-btn" data-rel="back">Go Back</a>
To create a Back button, include attribute data-add-back- btn=“true” on the <div> tag defining the data-role=“page”
<div data-role="page" id="page2" data-add-back-btn="true">
Can also add specific text using data-back-btn-text and setting it equal to the text for the button

8. Corner design To add rounded corners to a button
< a href=“page2” class=“ui-btn ui-corner-all”> Button 1 </a>

9. Button Text Size
To make the buttons’ text smaller, use the class ui-mini
< a href=“page2” class=“ui-btn ui-mini”> Button 1 </a>

10. Button shadow
To make the button have a drop shadow, use the class ui-shadow
< a href=“page2” class=“ui-btn ui-shadow”> Button 1 </a>

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

12. 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>

13. 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-right”>Search</a>
</div>

14. Global and Button CSS Classes

15. Icons
JQM provides a set of icons that will make your buttons look more desirable, via the the ui-icon class
<div data-role="header">
<a href=“index.html“ class=“ui-icon-home” >Home</a>
<h1>Welcome To My Homepage</h1>
<a href=“search.html" class=“ui-icon-search”>Search</a>
</div>

16. Icon positioning
Can also position the icon with an icon position class
You can specify one of four values for where the icon should be positioned in the button: top, right, bottom or left
May have overlay issues as shown below
Resolve by moving icon or widening header toolbar
<a href="#page1" class=“ui-btn ui-btn-right ui-btn-icon-top ui-icon-search">Search</a>
<a href="#page1" class=“ui-btn ui-btn-right ui-btn-icon-left ui-icon-search">Search</a>

17. Icon CSS Classes

18. Icon CSS Classes

19. Icon CSS Classes

20. Data-icon attribute
Instead of using CSS styles, can use data-icon attribute, assigning value of icon style
<div data-role="header">
<a href="index.html" data-icon="home">Home</a>
<h1>Welcome To My Homepage</h1>
<a href=“search.html" data-icon=“search">Search</a>
</div>

21. Button Icons - continued
To display only the icon and not the text, use class ui-btn- icon-notext
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>

22. Button Icons - continued
By default, all icons have a gray circle (disc) around them
To remove the circle, add the "ui-nodisc-icon" class to the element or its container
<a href="#page2" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Without circle</a>

23. Button Icons - continued
Unless a custom theme is being used, all icons are white
To change the icon color to black, add the "ui-alt-icon" to the element or its container
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">White</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>
combining "ui-nodisc-icon" and "ui-alt-icon"

24. Data-Roles - buttons
<a href="#two" data-role="button">Show page "two“ </a>
data-inline=“true” causes button to only be as wide as content
<div data-role="page" id="one">
<div data-role="header">
<h1>Multi-page</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>View of Page 'one'</h2>
<h3>To show internal pages:</h3>
<p>
<a href="#two” data-role=“button” data-inline=“true”>Show page "two“ </a>
</p>
</div><!-- /content -->
<div data-role="footer”>
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page one -->
<div data-role="page" id=“two" >
<div data-role="header">
<h1>View Two</h1>
</div><!-- /header -->
<div data-role="content" ">
<h2>View of Page two'</h2>
<p> <a href="#one" data-role=“button” data-inline=“true”>Back to page "one"</a> </p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div>

25. Misc notes If you want to use more than one class
separate each class with a space
<div data-role="header">   <a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>   <h1>Welcome To My Homepage</h1> </div>
Buttons in Content section are defined differelty from buttons in other sections
By default, <input> buttons have shadow and rounded corners
the <a> and < button> element do not
Experiment 

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

27. 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>

28. 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>

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

30. 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

31. 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>

32. Navigation bars
By default, links 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

33. 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>

34. 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.

35. 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").

36. 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").

37. 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

38. 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% 50% no-repeat; background-size: 24px 16px; }
#vacation:after { background: url("img/sample-305-palm-tree.png") 50% 50% no-repeat; background-size: 22px 27px; }
#desert:after { background: 50% 50% no-repeat; background-size: 20px 24px; }
#exit:after { background: 50% 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>

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