Here I share one useful and helpful information related to “JQuery for Mobile App Development”.
JQuery mobile is a touch-friendly Web UI development framework that is used to develop mobile web applications that work across smartphones and tablets. The jquery mobile framework builds on top of the jquery core and provides a number of features including HTML and XML document object model(DOM) traversing and manipulation, event handling, performing server communication using Ajax, as well as animation and image effects for web pages.
Features of JQuery Mobile
- Accessibility:Jquery mobile has support for accessible rich internet applications (ARIA) to help create web pages that are accessible to visitors.
- Small Size: The overall size of the jquery mobile framework is relatively small at 12KB
- Theming:It provide a theme based system for develop the styling of your application.
The structure of a JQuery Mobile Page
- Header Bar:This is used for displaying the page title and back button. This part contain both these two(title and back button)
- Content:This is the body part of the application. This part contain the entire contents of the application or the body part of the application
- Footer bar:This part is the navigational part, copyright information of the application and whatever we wish to add.
Events and Methods
The jquery mobile framework that extends the jquery core is available using $.mobile, which also provides access to jquery mobile specific events and methods.
We need to bind events to jQuery mobile using Live() and Bind() methods like touch events including tap, tap-hold and various swipe and virtual mouse events.
JQuery mobile provides many methods with the $.mobile object such as:
- $.mobile.changePage: This is used to change one page to another programmatically
- $.mobile.loadPage: This is used for load an external pages
- $mobile.showPageLoadingMsg: This is used for show the page load message
- $.mobile.hidePageLoadingMsg: This is used for hide the page load message
- $.mobile.path.isSameDomain: This is a utility method that is used to compare the domain of two URLs.
- $.mobile.activePage: This is used to get a reference to the page that is currently being viewed.
Example:If we need to go to the page test.php using a slide transaction, then we will use the following command:
Forms are a common web artifact for posting information. Jquery mobile provides a ruch set of form elements.There are many form UI components like inputs, search input, sliders, flip toggle switches, radio buttons, check boxes, select menu ect.These can be created easily.
The code for a form that has a ‘submit’ button below:
<form method=”get” action=”formaction.php”>
<label for=”select-option” class=”select”>Choose option:</label>
<select name=”select-option” id=”select-option”>
Jquery mobile support CSS based page transition.These are applied when navigation to a new page and back.