Easy Tutorial
Jquerymobile Pages Event Pageload Jquerymobile Grids Jquerymobile List Views Jquerymobile Events Page Jquerymobile Popups Event Pagebeforeshow Event Pagebeforehide Jquerymobile Events Scroll Jquerymobile Tutorial Jquerymobile List Content Jquerymobile Tables Jquerymobile Install Jquerymobile Themes Jquerymobile Collapsibles Jquerymobile Navbars Event Pageinit Event Pagebeforecreate Event Pagecreate Jquerymobile Ref Data Jquerymobile Ref Css Event Scrollstop Jquerymobile Panels Event Pagecontainerload Event Pagecontainerloadfailed Jquerymobile Form Basic Jquerymobile Transitions Event Swipeleft Jquerymobile Ref Icons Jquerymobile Events Event Pagebeforeload Jquerymobile Form Select Jquerymobile Icons Event Pageshow Jquerymobile Form Sliders Event Swiperight Event Pagehide Jquerymobile Events Touch Jquerymobile Toolbars Jquerymobile Events Orientation Event Swipe Jquerymobile Intro Jquerymobile Buttons Event Taphold Event Tap Jquerymobile Ref Events Event Scrollstart Jquerymobile Form Inputs Event Pageloadfailed Event Pagecontainerbeforeload Jquerymobile Examples Jquerymobile Filters Event Orientationchange
❮ Jquerymobile Tables Jquerymobile Themes ❯

jQuery Mobile Installation

Adding jQuery Mobile to Your Webpage

You can add jQuery Mobile to your webpage in the following ways:

Loading jQuery Mobile from a CDN

| | CDN stands for Content Delivery Network, which aims to maximize speed and stability by avoiding potential bottlenecks and issues that can affect data transfer speed and stability on the internet. | | --- | --- |

Using the jQuery core, you don't need to install anything on your computer; you just need to load the following cascading styles (.css) and JavaScript libraries (.js) in your webpage to use jQuery Mobile:

jQuery Mobile CDN:

<head>
  <!-- Use meta viewport to ensure the page is freely scalable -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Include jQuery Mobile styles -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <!-- Include jQuery library -->
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <!-- Include jQuery Mobile library -->
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

For users in China, it is recommended to use Baidu CDN:

jQuery Mobile CDN (Baidu):

<head>
  <!-- Use meta viewport to ensure the page is freely scalable -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Include jQuery Mobile styles -->
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <!-- Include jQuery library -->
  <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <!-- Include jQuery Mobile library -->
  <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

This tutorial references the Baidu CDN repository.

Downloading jQuery Mobile

If you want to host jQuery Mobile on your own server, you can download the files from jQuerymobile.com.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="jquery.mobile-1.4.5.css">
  <script src="jquery.js"></script>
  <script src="jquery.mobile-1.4.5.js"></script>
</head>

Tip: Place the downloaded files in the same directory as your webpage.

| | Do you wonder why the type="text/javascript" attribute is not included in the <script> tags? In HTML5, this attribute is no longer necessary as JavaScript is the default scripting language in all modern browsers! | | --- | --- |

❮ Jquerymobile Tables Jquerymobile Themes ❯