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

Cis136 – Building Mobile Apps Buttons Cis136 – Building Mobile Apps

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 

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>

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

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

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

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

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>

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>

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

Global and Button CSS Classes

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>

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>

Icon CSS Classes

Icon CSS Classes

Icon CSS Classes http://www.w3schools.com/jquerymobile/jquerymobile_ref_css.asp

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>

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>

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>

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"

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>

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 

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, 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 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