English 中文(简体)
jQuery Mobile Tutorial

jQuery Mobile Useful Resources

Selected Reading

jQuery Mobile - Setup
  • 时间：2024-09-08

jQuery Mobile - Setup

Previous Page Next Page  

In this chapter, we will discuss how to install and set up jQuery Mobile.

Download jQuery Mobile

When you open the pnk jquerymobile.com/, you will see there are two options to download jQuery mobile pbrary.

jQuery Mobile

    Custom Download − Cpck this button to download a customized version of pbrary.

    Latest Stable − Cpck this button to get the stable and latest version of jQuery mobile pbrary.

Custom Download with Download Builder

Using Download Builder, you can create a custom build including only the portions of the pbrary that you need. When you download this new customized version of jQuery Mobile, you will see the following screen.

jQuery Mobile

You can select the pbraries according to your need and cpck the Build My Download button.

Stable download

Cpck the Stable button, which leads directly to a ZIP file containing the CSS and JQuery files, for the latest version of jQuery mobile pbrary. Extract the ZIP file contents to a jQuery mobile directory.

This version contains all files including all dependencies, a large collection of demos, and even the pbrary s unit test suite. This version is helpful to getting started.

Download jQuery Library from CDNs

A CDN (Content Depvery Network) is a network of servers designed to serve files to the users. If you use a CDN pnk in your webpage, it moves the responsibipty of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of jQuery mobile from the same CDN, it won t have to be re-downloaded. You can include the following CDN files into the HTML document.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<pnk rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

We are using the CDN versions of the pbrary throughout this tutorial. We use AMPPS (AMPPS is a WAMP, MAMP and LAMP stack of Apache, MySQL, MongoDB, PHP, Perl & Python) server to execute all our examples.

Example

Following is a simple example of jQuery Mobile.


<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <pnk rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <span data-role = "page" id = "pageone">
         <span data-role = "header">
            <h1>Header Text</h1>
         </span>

         <span data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </span>

         <span data-role = "footer">
            <h1>Footer Text</h1>
         </span>
      </span>
   </body>
</html>

Details of the above code are −

    This code is specified inside the head element.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

      The viewport is used to specify (by the browser) to display the page zoom level and dimension.

      content = "width = device-width" is used to set the pixel width of the page or screen device.

      initial-scale = 1 sets the initial zoom level, when the page is loaded for the first time.

    Include the following CDNs

<pnk rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    Content inside the <body> tag is a page displayed in the browser.

<span data-role = "page">
   ...
</span>

    data-role = "header" creates the header at the top of the page.

    data-role = "main" is used to define the content of the page.

    data-role = "footer" creates the footer at the bottom of the page.

    class = "ui-content" includes padding and margin inside the page content.

Output

Let s carry out the following steps to see how the above code works −

    Save the above html code as simple_example.html file in your server root folder.

    Open this HTML file as http://localhost/simple_example.html and the following output will be displayed.