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

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

3. Forms 3  JQM forms are enhanced versions of standard HTML controls  Form fields comprised of:  Text fields  Sliders  Switches  Radio Buttons  Checkboxes  Selection menus  Search inputs

4. Forms 4  The element must have a method and an action attribute  Each form element must have a unique "id" attribute  The id must be unique across the pages in the site  Each form element must have a label  Use the for attribute of the label to match the id of the element

5. Form Tips 5  Use a placeholder to specify a short hint that describes the expected value of an input field  To hide the label, use the "ui-hidden-accessible" class. This is often used when you want the element's placeholder attribute to serve as the label

6. Form Tips 6  If you want a "clear button" (an X icon on the right side of the input field that clears the contents of the field), add the data-clear-btn="true" attribute  Note: The "clear button" can be added on any element, except for  Search fields have this attribute set to "true" as default - to change it, specify data-clear-btn="false"

7. Form Buttons 7  Buttons in forms are coded with standard HTML elements (button, reset, submit)  They are automatically styled, but can be additionally styled using the data-* attributes

8. Field Containers 8  To make labels and form elements look correct on wider screens  wrap a or element with the "ui-field-contain" class around the label/form element  The "ui-field-contain" class style labels and form controls based upon the width of the page  If the width of the page is greater than 480px, it places the label on the same line as the form control  If less than 480px, the label will be placed above the form element

9. TextBox 9  standard <input type=“text” element

10. TextArea 10  Use for multi-line text inputs  The text area will automatically grow to fit new lines as text is typed in

11. Search 11  defines a text field for entering a search

12. Radio Buttons 12  used when a user can select only one of a limited number of choices.  use an input with type="radio" and a corresponding label  wrap the radio buttons in a element  Add a element to define a caption for the  Use data-role="controlgroup", to group the buttons together

13. Checkboxes 13  used when a user can select one or more options of a limited number of choices  To group radio buttons or checkboxes horizontally, use the data-type="horizontal"

14. Select Menus (drop down lists) 14  The element creates a drop-down list with several options  The elements inside the element define the available options in the list  If you have a long list of options that are related, use the element inside

15. Select Menus 15  mobile platforms have their own way of showing a select menu  To have the select menu display the same on all mobile devices, use jQuery's custom select menu using the data- native-menu="false" attribute  To select multiple options in the select menu, use the multiple attribute in the element

16. Form Sliders 16  A slider allows you to select a value from a range of numbers  use  max - specifies the maximum value allowed  min - specifies the minimum value allowed  step - specifies the legal number intervals  value - specifies the default value  to show the value on the slider button, add data-show- value="true“ after “range”

17. Sliders 17  to show the value on the slider button, add data-show- value="true“ after “range”  To have the value to pop up on your screen like a tooltip (as you slide), add data-popup-enabled="true”  to highlight the track up to the slider value, add data- highlight="true“

18. Toggle Switch 18  used for on/off or true/false buttons  <input type="checkbox data-role="flipswitch“  by default, the text on the flip switch is "On" and "Off“  To change this, use the data-on-text and data-off-text attributes  use the "checked" attribute to set one of the options to be pre-selected

19. Final notes on forms 19  By default a JQM form is submitted using Ajax  To use a standard http submission, set the data-ajax attribute = false on the form tag  You can include HTML in the form that performs client-side validation  Add the HTML required attribute to the element or  The :required CSS pseudo-class selector  Can also use regular expressions