Download to read offline
Uploaded byLogical Minds
Jquery Mobile
This document provides an introduction to developing mobile apps using jQuery Mobile, a JavaScript framework. It discusses how jQuery Mobile uses HTML5, CSS3, and JavaScript to build cross-platform, responsive web apps. While jQuery Mobile allows building native-looking apps that work across devices, it relies on browser support and does not provide full native capabilities. The document then demonstrates creating a basic jQuery Mobile app, including page structure, transitions, forms, and buttons.
More Related Content
Jquery Mobile
- 1. Mobile Apps Development UsingHTML5, CSS3 and jQuery Junejo Naeem Ahmed
- 2. WHAT YOU SHOULDALREADY KNOW JavaScript HTML5 & CSS Mobile Web Fundamentals jQuery
- 3. INTRODUCTION TO JQUERYMOBILE • 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 JQUERYMOBILE 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 MOBILEAPP • 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”
- 6. JQUERY MOBILE PAGEARCHITECTURE Internal Pages • <body> <div data-role=“page”> (page content) </div> <div data-role=“page”> (page content) </div> </body> HTML Page 1 Page 2
- 7. JQUERY MOBILE PAGETRANSITIONS 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 FORMBASICS • 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.
- 9. JQUERY MOBILE BUTTONS •<button> Button </button> • <input type=“Button” value=“Button” /> • <a href=“#” class=“ui-btn”>Button</a> Button