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

Header ToolBars Cis136 – Building Mobile Apps 2

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

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

Global and Button CSS Classes 5

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

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

Icon CSS Classes 8

9

10

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

Buttons Cis136 – Building Mobile Apps 12

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

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

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

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

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

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

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

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

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

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

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"

Data-Roles - buttons 24 Learn more at  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

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

Footer ToolBars Cis136 – Building Mobile Apps 26

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

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

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

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

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

Navigation Bars Cis136 – Building Mobile Apps 32

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

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

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

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

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.

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

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

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

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: 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; }

Learn more at 42  