Presentation on theme: "User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1."— Presentation transcript:
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
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
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 http://www.w3schools.com/jquerymobile/jquerymobile_ref_icons.asp http://www.w3schools.com/jquerymobile/jquerymobile_ref_icons.asp You can also use the data-icon attribute, as in Refresh Page
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