View
218
Download
1
Category
Tags:
Preview:
Citation preview
JQuery Mobile
Benefits
Required links<head>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/
jquery.mobile-1.4.1.min.css"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
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 fileA 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.
<body> <div data-role="page" id="foo">
<div data-role="header”>Foo</div><div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p><p>View internal page called <a href="#bar">bar</a></p>
</div><div data-role="footer”>Page Footer</div>
</div><div data-role="page" id="bar">
<div data-role="header”>Bar</div><div data-role="content">
<p>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.</p><p><a href="#foo">Back to foo</a></p>
</div><div data-role="footer”>Page Footer</div>
</div></body>
Other attributes for Page
data-theme Specifies theme color of the pagedata-title Specified 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
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, use style="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??? http://www.w3schools.com/jquerymobile/jquerymobile_ref_icons.asp
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
FormsFor the most part, we will proceed as normal with forms. However, to make themlook proper, wrap them in: <div class="ui-field-contain">
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<form method="post" action="demoform.asp"> <label for="points">Points:</label> <input type="range" name="points" id="points" value="50" min="0" max="100” data-show-value="true"></form>
<form method="post" action="demoform.asp"> <label for="switch">Flip toggle switch checkbox:</label> <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False"></form>
Recommended