User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1

Components of jQuery Mobile 2  Data attributes  Pages, Dialogs, and Transitions  Toolbars, Buttons, and icons  Content Formatting  Grids  Content blocks  Collapsible sets  Forms  ListViews  Events & Methods  Most are used automatically  do not need to code them yourself

Buttons Cis136 – Building Mobile Apps 3

JQM buttons 4  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:  Using the element  Using the element with class="ui-btn"  Using the element with class="ui-btn  Using the element with data-role=“button”

Creating Buttons 5  To link between pages by buttons, use the element  add class ui-btn inside the anchor tag  Go to Page Two  Can also set the date-role attribute  Go to Page Two

In-line buttons 6  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 7  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 Buttons 8  To create a Back button, use the data-rel="back" attribute  this will ignore the anchor's href value Go Back

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

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

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

Misc notes 12  If you want to use more than one class  separate each class with a space  Ex.. class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow“  By default, buttons have shadow and rounded corners  the and element do not

Icons Cis136 – Building Mobile Apps 13

Button Icons 14  JQM provides a set of icons that will make your buttons look more desirable  To add an icon to your button, use the ui-icon class Top  If desired, 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 Top

Button Icons - continued 15  Common ui-icon classes include classDescription ui-icon-arrow-lLeft arrow ui-icon-arrow-rRight arrow ui-icon-infoInformation ui-icon-deleteDelete ui-icon-backBack ui-icon-audioSpeakers ui-icon-lockPadlock ui-icon-searchSearch ui-icon-alertAlert ui-icon-gridGrid ui-icon-homeHome

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

Button Icons - continued 17  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 18  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"

Other notes 19  Complete icon reference is located at  You can also use the data-icon attribute, as in Refresh Page

ToolBars Cis136 – Building Mobile Apps 20

21  Toolbar elements are often placed inside headers and footers

Header toolbars 22  The header is located at the top of the page and usually contain a page title/logo or one or two buttons  home, options or search  You can add buttons to the left and/or to the right side in the header.  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 (continued) 23  A header can contain one or two buttons, while the footer has no limit  add a button to the left side of the header title Home Welcome To My Homepage

Header toolbars (continued) 24  add a button to the right side of the header title Welcome To My Homepage Search

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

Footer toolbars (cont.) 26  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

Navigation Bars Cis136 – Building Mobile Apps 27

Navigation bars 28  A navigation bar consists of a group of links that are aligned horizontally, typically within a header or footer

Navigation bars 29  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 30  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 31  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 32  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 33  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 34  For multiple pages, you might want the "selected" look for each button that represents the page the user is on  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 35  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 glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License

Third-party 36 Chat Danger Beer Coffee.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/glyphish-icons/09-chat2.png") 50% 50% no-repeat; background-size: 24px 22px; } # after { background: url("img/glyphish-icons/18-envelope.png") 50% 50% no-repeat; background-size: 24px 16px; } #login:after { background: url("img/glyphish-icons/30-key.png") 50% 50% no-repeat; background-size: 12px 26px; } #beer:after { background: url("img/glyphish-icons/88-beermug.png") 50% 50% no-repeat; background-size: 22px 27px; } #coffee:after { background: url("img/glyphish-icons/100-coffee.png") 50% 50% no-repeat; background-size: 20px 24px; } #skull:after { background: url("img/glyphish-icons/21-skull.png") 50% 50% no-repeat; background-size: 22px 24px; }