Saturday, 5 December 2020

Including JQuery UI Model in PhoneGap App

 n 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.

  1. <title>Dog Years Calculator</title>  
  2.   
  3. //connects us to the JQuery stylesheet  
  4. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />  
  5.   
  6. //connects us to the JQuery core library  
  7. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>  
  8.   
  9. //connects us to the JQuery mobile library  
  10. <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>  

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.

  1. <body>  
  2.         <div data-role="page">  
  3.         <div data-role="header">  
  4.             <h1>Dog Years Calculator</h1>  
  5.         </div> <!-- header -->  
  6.         <div data-role="main" class="ui-content">  
  7.             <label for="dogAge">Dog Age in Human Years:</label>  
  8.         <input id="dogAge" type="number" />  
  9.         <button id="btnCalc">Calculate</button>  
  10.         <div id="result"></div>  
  11.         </div> <!-- main -->  
  12.         <div data-role="footer">  
  13.         </div> <!-- footer -->  
  14.         </div> <!-- page -->  
  15.         <script type="text/javascript" src="cordova.js"></script>  
  16.     </body>  

Output:

Including JQuery UI Model in PhoneGap App

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)