GridTips: How to Integrate jQuery Mobile in Phonegap/Cordova

quarta-feira, 9 de julho de 2014

How to Integrate jQuery Mobile in Phonegap/Cordova

jQuery Mobile is one of a best frameworks to build a mobile accessible website and mobile application. jQuery ships with a series of user interfaces that are concordant with complicated platforms such as iOS and Android, to a beginning of platforms such as Opera Mini and Nokia Symbian.

In this post, we will enhance from a prior contention on Phonegap/Cordova. We will uncover we how to integrate jQuery Mobile into Phonegap/Cordova and accumulate it into an iOS application. If building an app with jQuery Mobile is among your interests, we can follow this brief tutorial.

Recommended Reading: Beginner’s Guide to iOS Development

Getting Started

Note: At this stage, we assume that we have combined a Phonegap/Cordova plan and non-stop it in Xcode (otherwise, take a demeanour during this post).

Since Phonegap/Cordova allows us to use HTML, CSS, and JavaScript, formulating a app is roughly as elementary as formulating a website. But instead of using by a stairs to emanate a app interface here, we will impute we to a prior tutorial, Building A Mobile Panel With JQuery Mobile, where we have shown we how to build jQuery Mobile left and right panels. This is such a common interface that we can find it in any mobile app – for instance in a Facebook app.

Download a source, and pierce all a files (HTML, CSS, and a JavaScript) to a platform/ios/www folder – this is where all a codes for building a iOS focus should reside.

Build a Application

Let’s open a plan folder in Xcode. We are going to build a app and preview it in iPhone Simulator, that is shipped along with Xcode. The latest chronicle of Xcode sets iOS 7 as a default program in a Simulator. In box we wish to exam your app in iOS 6 as well, we competence supplement it from a Preference – Download menu.

Then, name that simulator to exam your app with; we can name between iPhone and iPad and a program used in it. Once we have comparison a simulator, click on a play symbol during a tip left of a Xcode window.

The simulator will automatically launch.

That’s it. You can extend a app with some-more calm and facilities with jQuery Mobile API. Using jQuery mobile and Phonegap creates formulating a mobile app as easy as formulating a website.

For some-more about jQuery Mobile, we can revisit a prior posts: