How to Integrate jQuery Mobile in Phonegap/Cordova

By . Filed in Web Design

jQuery Mobile is one of the best frameworks to build a mobile friendly website and mobile application. jQuery ships with a number of user interfaces that are compatible with modern platforms such as iOS and Android, to the earliest of platforms such as Opera Mini and Nokia Symbian.

In this post, we will expand from our previous discussion on Phonegap/Cordova. We will show you how to integrate jQuery Mobile into Phonegap/Cordova and compile it into an iOS application. If building an app with jQuery Mobile is among your interests, you can follow this short tutorial.

Getting Started

Note: At this stage, I assume that you have created a Phonegap/Cordova project and opened it in Xcode (otherwise, take a look at this post).

Since Phonegap/Cordova allows us to use HTML, CSS, and JavaScript, creating the app is almost as simple as creating a website. But instead of running through the steps to create the app interface here, I will refer you to our previous tutorial, Building A Mobile Panel With JQuery Mobile, where I have shown you how to build jQuery Mobile left and right panels. This is such a common interface that you can find it in any mobile app – for example in the Facebook app.

Download the source, and move all the files (HTML, CSS, and the JavaScript) to the platform/ios/www folder – this is where all our codes for developing the iOS application should reside.

Build the Application

Let’s open the project folder in Xcode. We are going to build the app and preview it in iPhone Simulator, which is shipped along with Xcode. The latest version of Xcode sets iOS 7 as the default software in the Simulator. In case you want to test your app in iOS 6 as well, you may add it from the Preference – Download menu.

Then, select which simulator to test your app with; you can select between iPhone and iPad and the software used in it. Once you have selected the simulator, click on the play button at the top left of the Xcode window.

The simulator will automatically launch.

That’s it. You can extend the app with more content and features with jQuery Mobile API. Using jQuery mobile and Phonegap makes creating a mobile app as easy as creating a website.

For more about jQuery Mobile, you can revisit our previous posts:

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Advertisement