Javatpoint Logo
Javatpoint Logo

Including JQuery UI Model in PhoneGap App

In our previous section, we learned about how we can create our first PhoneGap app. This section will tell about the JQuery UI model or how we can include the JQuery UI model in our app. But a question arises here, i.e., why we need to include the JQuery UI model in our app.

If we take a look at our app, it will not look like a mobile device.

Including JQuery UI Model in PhoneGap App

It look like they're thrown onto the screen. For this purpose, we will use the JQuery mobile library to make a huge difference in our apps right away. These are the following steps used to include JQuery mobile library on our app.

1) Go to the site

In the first step, we will go to the jquerymobile official website to download the required files.

Including JQuery UI Model in PhoneGap App

2) Go to the download page.

We will go to the download page by clicking on the Download button and scroll down the page. We will search for the CDN hosted files.

Including JQuery UI Model in PhoneGap App
Including JQuery UI Model in PhoneGap App

3) Copy and paste the snippet

We will copy these three lines of JavaScript code or snippet and go to our index.html file. We will paste these three lines of code or snippet below the title tag.

Now, we will save the file and update the mobile screen. After updating the mobile screen, our app will look like a mobile app. These three lines of code automatically reshape the HTML content to make it more mobile phone friendly.

Including JQuery UI Model in PhoneGap App

4) Using div tag

Now, we will put all the HTML codes into div with the data-role attribute. We will use three div tags, i.e., first for header, second for main and third one for the footer. We will also add the ui_content class with the main. It adds a bit of styling to some element and creates some margins around content.

Output:

Including JQuery UI Model in PhoneGap App





Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA