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

Cis136 – Building Mobile Apps Header ToolBars Cis136 – Building Mobile Apps

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>

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>

Cis136 – Building Mobile Apps Footer ToolBars Cis136 – Building Mobile Apps

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>

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>

Cis136 – Building Mobile Apps Navigation Bars Cis136 – Building Mobile Apps

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

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>

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

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>

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.

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

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

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 www.glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License

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

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