2. WHAT YOU SHOULD ALREADY KNOW
JavaScript
HTML5 & CSS
Mobile Web Fundamentals
jQuery
3. INTRODUCTION TO JQUERY MOBILE
• jQuery Mobile is a cross platform way of building mobile
web apps.
• Now, remember, these are not native applications, these
are web applications and jQuery Mobile is a cross platform
framework for building these mobile web apps.
• jQuery Mobile relies on HTML5, CSS3, JavaScript and AJAX.
• jQuery Mobile enhances existing Web pages with a
consistent look across multiple modern mobile OSs.
• So, by using the jQuery Mobile library, you can give your
application a consistent look and feel, and it's configurable
enough where you can define your own CSS themes.
4. INTRODUCTION TO JQUERY MOBILE
Advantages
• it uses familiar HTML5
technologies to build
native-looking apps.
• works across multiple
platforms.
• Again, it provides a
consistent look and feel
for mobile applications.
• it's small and lightweight,
and modular.
Disadvantages
• relies on whatever the
platform's browser is,
which may on may not
support all of the library's
features.
• doesn't provide native
access to some platform
features.
• performance is not going
to be as fast as native
applications.
jQuery Mobile has some advantages and some disadvantages.
5. FIRST JQUERY MOBILE APP
• 3 files to include: jQuery, jQuery Mobile, CSS.
• declare the viewport meta tag.
• The viewport meta tag explains to the mobile
browser how large the page is and what kind of
virtual page size it should use when displaying the
content.
• markup our content as usual.
• enclose content within data-role attribute set to
the word page.
data-role=“page”
7. JQUERY MOBILE PAGE TRANSITIONS
Transitions Description
Fade Fades in the next page over the current one
Flip Flips in the next page over the current one
Pop The next page springs into view
Slide The next page slides in from the side
SlideDown The next page slides in from the top
SlideUp The next page slides in from the bottom
8. JQUERY MOBILE FORM BASICS
• JQuery Mobile automatically enhances elements.
• All of the elements in a form should be wrapped in a
proper form tag.
• Form controls should have unique IDs across your
entire site.
• Form Submissions are handled automatically via AJAX.
• Items are grouped using CSS class ui-field-contain
• jQuery Mobile requires all form controls to have labels
for accessibility.
• To hide a label, use the built in CSS class called ui-
hidden-accessible.
