1. Header, Footer, and Navigation toolbars CIS 136 Building Mobile Apps 1

2. Header ToolBars Cis136 – Building Mobile Apps 2

3. Header toolbars 3  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 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: Home Welcome To My Homepage Search

4. Header Toolbars 4  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 Welcome To My Homepage Search

5. Global and Button CSS Classes 5

6. Icons 6  JQM provides a set of icons that will make your buttons look more desirable, via the the ui-icon class Home Welcome To My Homepage Search

7. Icon positioning 7  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 Search

8. Icon CSS Classes 8

9. 9

10. 10 http://www.w3schools.com/jquerymobile/jquerymobile_ref_css.asp

11. Data-icon attribute 11  Instead of using CSS styles, can use data-icon attribute, assigning value of icon style Home Welcome To My Homepage Search

12. Buttons Cis136 – Building Mobile Apps 12

13. JQM buttons - Overview 13  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 element  Using the element with class="ui-btn"  Using the element with class="ui-btn  Using the element with data-role=“button”  tag in header, do not need data-role on tag  tag in content, you do  Experiment to find out

14. Creating Buttons in Content Section 14  To link between pages by buttons, use the element  add class ui-btn inside the anchor tag  Button goes to edges – in essence a toolbar look  Page 2  Can also set the date-role attribute  Gets the rounded corners and doesn’t go to edges  Page 2

15. In-line buttons 15  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:  Go to Page Two  if you want two or more buttons to appear side by side, add the ui-btn-inline class to each one

16. Grouping buttons 16  Use a element with the date-role of controlgroup and data- type to indicate position:  Horizontal Button 1 Button 2 Button 3  Vertical (default) Button 1 Button 2 Button 3 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

17. Back Link and Back Buttons 17  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 Go Back  To create a Back button, include attribute data-add-back- btn=“true” on the tag defining the data-role=“page”  Can also add specific text using data-back-btn-text and setting it equal to the text for the button

18. Corner design 18  To add rounded corners to a button Button 1

19. Button Text Size 19  To make the buttons’ text smaller, use the class ui-mini Button 1

20. Button shadow 20  To make the button have a drop shadow, use the class ui-shadow Button 1

21. Button Icons - continued 21  To display only the icon and not the text, use class ui-btn- icon-notext Search

22. Button Icons - continued 22  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 Without circle

23. Button Icons - continued 23  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 White Black  combining "ui-nodisc-icon" and "ui-alt-icon"

24. Data-Roles - buttons 24 Learn more at https://demos.jquerymobile.com/1.1.0/docs/api/themes.html  Show page "two“  data-inline=“true” causes button to only be as wide as content View Two View of Page two' Back to page "one" Page Footer Multi-page View of Page 'one' To show internal pages: Show page "two“ Page Footer

25. Misc notes 25  If you want to use more than one class  separate each class with a space Home Welcome To My Homepage  Buttons in Content section are defined differelty from buttons in other sections  By default, buttons have shadow and rounded corners  the and element do not  Experiment

26. Footer ToolBars Cis136 – Building Mobile Apps 26

27. Footer toolbars 27  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 Add Me On Facebook Add Me On Twitter Add Me On Instagram

28. Footer toolbars (cont.) 28  The buttons in the footer are not centered by default  use CSS to fix this Add Me On Facebook Add Me On Twitter Add Me On Instagram

29. Fixed and full-screen headers and footers Cis136 – Building Mobile Apps 29

30. Fixed position 30  On long pages, headers and footers may not be visible  Can fix the position of each prevent scrolling past  the header and footer will always be visible  Add data-position=“fixed” inside tag for data-role=“header” or data-role=“footer” My Header  while scrolling up and down, as soon as the user lifts their finger off, the header and footer will both pop in

31. Full screen 31  the header and footer appear and disappear with clicks  best used when you want the content of the page to be viewed by itself  excellent example of this would be pictures  add data-fullscreen="true" to the header and footer tags in a page My Header

32. Navigation Bars Cis136 – Building Mobile Apps 32

33. Navigation bars 33  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

34. Navigation bars 34  The bar is coded as an unordered list of links wrapped inside a element that has the data-role="navbar" attribute: Home Page Two Search

35. Navigation bars 35  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

36. Navigation bar icons 36  To add an icon to your navigation button, use the data- icon attribute Search 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” Home Page Two Search

37. Navigation bar icons - positioning 37  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: Home Page Two Search By default, icons in navigation buttons are placed above the text (data-iconpos="top"). Need to set left, right, and bottom.

38. Navigation bar icons – active buttons 38  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" Home Page Two By default, icons in navigation buttons are placed above the text (data-iconpos="top").

39. Navigation bar icons – persisting 39  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 Home Page Two By default, icons in navigation buttons are placed above the text (data-iconpos="top").

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

41. Third-party 41 Chat Mail Exit Vacation Desert.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: url("img/sample-935-power-socket@2x.png") 50% 50% no-repeat; background-size: 24px 22px; } #mail:after { background: url("img/sample-821-stamp@2x.png") 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: url("img/sample-886-ice-cream-cone@2x.png") 50% 50% no-repeat; background-size: 20px 24px; } #exit:after { background: url("img/sample-855-door@2x.png") 50% 50% no-repeat; background-size: 22px 24px; }

42. Learn more at 42  https://demos.jquerymobile.com/1.4.5/ https://demos.jquerymobile.com/1.4.5/  http://www.glyphish.com