JQuery Mobile

Benefits

Required links Remember that we need to add the links to the head, in this order.

HTML5 attribute: data-role data-role="button data-role="collapsible data-role="collapsible-set data-role="controlgroup" data-role="fieldcontain data-role="slider data-role="listview data-role="page data-role="header data-role="navbar data-role="content data-role="footer data-role="navbar We will start with these to understand basic page construction and layout: These are also available, and we will get to them later.

Creating Pages within the Body Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of "header", "content", and "footer".

Multiple Pages in one file A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a data-role of "page". Each 'page' block needs a unique ID (id="foo") that will be used to link internally between 'pages' (href="#foo). IDs on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. Foo I'm first in the source order so I'm shown as the page. View internal page called bar Page Footer Bar I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is being clicked. Back to foo Page Footer

Other attributes for Page data-themeSpecifies theme color of the page data-titleSpecified the page title The title is just a string that you specify. The theme is part of the jquery css. It is specified by a letter from a-z. Find them here: Want to create your own JQuery Mobile Themes?

Transitions between Pages (and dialogs)

Header/Footer Attributes

Positioning Headers/Footers

Adding Nav Buttons to Headers/Footers Headers can contain at most TWO buttons Footers can contain as many as you like To center, usestyle="text-align:center; To add multiple buttons either horizontal or vertical, add them to a control group or a navbar.

Adding Nav Buttons

The buttons themselves…

Adding Icons to Buttons More choices???

Popups Close them by clicking outside the box or pressing the Esc key Add data-transition as with page nav Position using data-position-to inside the anchor

Panels The panel markup must be placed before or after the header, content and footer inside a jQuery Mobile page.

Panel Options

Collapsible – Nested and Sets

Lists By default, links inside a list item will automatically turn into a button (no need for ui- class="btn" or data-role="button")

List Dividers

List Icons

Forms For the most part, we will proceed as normal with forms. However, to make them look proper, wrap them in: The exceptions are two NEW elements, Select and Sliders. With Select, we can also use multiple

Wrapper Class

Mobile Forms

Text Input

Buttons

Radio Button

CheckBoxes

Sliders and Select Points: Flip toggle switch checkbox: