Transcript Introducing HTML and XHTML

User Interface Design using jQuery Mobile
CIS 136 Building Mobile Apps
1
Components of jQuery Mobile
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

2
do not need to code them yourself
Forms
JQM forms are enhanced versions of standard HTML
controls
Form fields comprised of:









3
Text fields
Sliders
Switches
Radio Buttons
Checkboxes
Selection menus
Search inputs
Forms
The <form> 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


4
Use the for attribute of the label to match the id of the
element
Form Tips

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
5
Form Tips

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 <input> element, except for
<textarea>

6
Search fields have this attribute set to "true" as default - to change it, specify
data-clear-btn="false"
Form Buttons
Buttons in forms are coded with standard HTML <input>
elements (button, reset, submit)


7
They are automatically styled, but can be additionally styled
using the data-* attributes
Field Containers
To make labels and form elements look correct on wider
screens


wrap a < div> or <fieldset> 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


8
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
TextBox
standard <input type=“text” element

9
TextArea

Use <textarea> for multi-line text inputs

10
The text area will automatically grow to fit new lines as text is
typed in
Search

defines a text field for entering a search
11
Radio Buttons

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 <fieldset> element


12
Add a < legend> element to define a caption for the <fieldset>
Use data-role="controlgroup", to group the buttons together
Checkboxes

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"
13
Select Menus (drop down lists)

The <select> element creates a drop-down list with
several options


14
The <option> elements inside the <select> element define the
available options in the list
If you have a long list of options that are related, use the
<optgroup> element inside <select>
Select Menus



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 datanative-menu="false" attribute
To select multiple options in the select menu, use the
multiple attribute in the <select> element
15
Form Sliders

A slider allows you to select a value from a range of
numbers

use <input type="range“>





16
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-showvalue="true“ after “range”
Sliders

to show the value on the slider button, add data-showvalue="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 datahighlight="true“
17
Toggle Switch

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
18
Final notes on forms

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
<form data-ajax=“false” action=“mobile.php” method=“post”>

You can include HTML in the form that performs client-side
validation



19
Add the HTML required attribute to the element or
The :required CSS pseudo-class selector
Can also use regular expressions