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: http://demos.jquerymobile.com/1.1.0/docs/api/themes.html Want to create your own JQuery Mobile Themes? http://themeroller.jquerymobile.com
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.
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