Download presentation
Presentation is loading. Please wait.
Published byAlfredo Durden Modified over 10 years ago
1
JQuery Mobile
2
Benefits
3
Required links Remember that we need to add the links to the head, in this order.
4
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.
5
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".
6
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
7
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
8
Transitions between Pages (and dialogs)
9
Header/Footer Attributes
10
Positioning Headers/Footers
11
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.
12
Adding Nav Buttons
13
The buttons themselves…
14
Adding Icons to Buttons More choices??? http://www.w3schools.com/jquerymobile/jquerymobile_ref_icons.asp
15
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
16
Panels The panel markup must be placed before or after the header, content and footer inside a jQuery Mobile page.
17
Panel Options
18
Collapsible – Nested and Sets
19
Lists By default, links inside a list item will automatically turn into a button (no need for ui- class="btn" or data-role="button")
20
List Dividers
21
List Icons
22
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
23
Wrapper Class
24
Mobile Forms
25
Text Input
26
Buttons
27
Radio Button
28
CheckBoxes
29
Sliders and Select Points: Flip toggle switch checkbox:
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.