{"id":21603,"date":"2014-07-09T15:10:40","date_gmt":"2014-07-09T07:10:40","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21603"},"modified":"2019-07-08T17:47:45","modified_gmt":"2019-07-08T09:47:45","slug":"cordova-jquery-mobile","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/cordova-jquery-mobile\/","title":{"rendered":"How to Integrate jQuery Mobile in Phonegap\/Cordova"},"content":{"rendered":"

jQuery Mobile is one of the best frameworks to build a mobile friendly website<\/a> 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.<\/p>\n

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

Recommended Reading:<\/strong> Beginner\u2019s Guide to iOS Development<\/a><\/p>\n

Getting Started<\/h2>\n

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

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<\/a>, 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 \u2013 for example in the Facebook app<\/a>.<\/p>\n

\"jquery<\/figure>\n

Download the source, and move all the files (HTML, CSS, and the JavaScript) to the platform\/ios\/www<\/strong> folder \u2013 this is where all our codes for developing the iOS application should reside.<\/p>\n

Build the Application<\/h2>\n

Let\u2019s 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.<\/p>\n

\"ios<\/figure>\n

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.<\/p>\n

\"simulator<\/figure>\n

The simulator will automatically launch.<\/p>\n

\"simulator<\/figure>\n

That\u2019s 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.<\/p>\n

For more about jQuery Mobile<\/strong>, you can revisit our previous posts:<\/p>\n