Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating Cordova jQuery Mobile Apps Rapidly

DZone's Guide to

Creating Cordova jQuery Mobile Apps Rapidly

This tutorial will demonstrate how to add a jQuery Mobile template to your existing Apache Cordova app.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

Cordova jQuery npm plugin allows you to add jQuery mobile’s ready-made templates to your existing Apache Cordova app using a neat easy-to-use CLI.

You can install Cordova jQuery npm plugin using the following npm command:
npm install -g cordova-jquery

Once you install it, you can start using it by executing cordova-jquery command from your Apache Cordova app’s root directory. The next six videos shows you how to create six Cordova jQuery mobile apps with different templates (Multipages, Header Navigation Bar, Persistent Navigation Bar, External Panel, Accordion, and ListView).

As shown in the videos below, after executing cordova-jquery command, all what you need to do is to choose the template you would like to apply to your existing Cordova app. All of the examples below work on Apache Cordova version 5.1.1 (The latest Cordova release until the moment).

Cordova jQuery plugin supports the following templates:

1. Multiple Pages

This template will apply a simple two page jQuery mobile template to your index.html file.

2. Header Navbar

This template will apply a three page jQuery mobile template to your index.html file that includes a header navbar for the header on each page.

3. Persistent Navbar

This template will apply a three page jQuery mobile template to your index.html file that includes a persistent navbar for the footer on each page.

4. External Panel

This template will apply an external panel to jQuery mobile. When this option is selected you will also be prompted for additional information such as which side of the page you’d like the panel to open on (left, right) and which reveal style would you like (reveal, push, overlay)

5. Accordion

This template will apply three sections’ jQuery mobile accordion template to your index.html file. Your existing content will be placed as part of the first section. It is important to note that you have to make sure that your existing content parent element does not use CSS “absolute” position in order to be controlled by the accordion section.

6. List View

This template will apply a jQuery mobile list view template to your index.html file. The first item of the list view points to your existing content page, and the second and the third items of the list view point to two placeholder pages.

The main objective of this plugin is to facilitate the usage of the jQuery Mobile in Apache Cordova, so feel free to use it and submit any issues you are facing to:
https://github.com/Open-I-Beam/cordova-jquery-npm/issues

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
mobile ,jquery mobile ,apache cordova

Published at DZone with permission of Hazem Saleh, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}