EDUCBA

Home Software Development Software Development Tutorials jQuery Tutorial jQuery Mobile CDN

jQuery Mobile CDN

Updated February 21, 2023

jQuery Mobile CDN

Definition of jQuery Mobile CDN

jQuery mobile CDN is a group of servers that work together to deliver data to users. When we include a CDN link on our website, the responsibility for hosting files is transferred from our servers to a network of external servers. This also has the benefit of not having to re-download jQuery mobile if a visitor to our page has already downloaded a copy from the same CDN.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

jQuery mobile CDN overviews

jQuery Hosted Libraries is a robust, trustworthy, high-speed, and internationally available content distribution network for the most popular open-source JavaScript libraries.

  • jQuery works directly with each library’s major stakeholders and adopts the most recent versions as soon as they are published.
  • Even if our website only utilizes HTTP, we recommend using HTTPS to load libraries from the CDN. Performance is high nowadays, and caching is no exception. The files delivered by the CDN have CORS and Timing-Allow headers and can be cached for one year.
  • When we use a CDN like jQuery own, the files are not kept on our local server. Instead, when a user accesses our website or web application, it establishes a connection with the CDN and uses it from there.
  • This has a couple of benefits over keeping it on the server. One of the most significant advantages is that it boosts parallelism. Typically, our browser can only download a few files from the same server simultaneously.
  • So, if we load the jQuery files, jQuery Mobile framework JavaScript and CSS files, and a few custom CSS and JavaScript files, we will have to wait for them to download.
  • For example, if we utilize a CDN, our app connects to a jQuery server and gets a few files while our local ones load. Because the files are so small, this may not seem like much of an advantage, but it can greatly impact the end-user.
  • We can be using jQuery CDN in our projects, of course, are among them. Although jQuery may provide more mirrors, more people may use jQuery’s CDN, resulting in more cached copies; thus, there may be no efficiency difference.
  • The jQuery project team produced jQuery Mobile, a touch-optimized web framework and a JavaScript library.
  • The project aims to provide a framework compatible with a wide range of smartphones and tablet computers, necessitated by the rising but diverse tablet and smartphone industry.
  • The jQuery Mobile framework is compatible with various mobile app frameworks and platforms like PhoneGap, Worklight, and others.

jQuery mobile CDN setup

  • JQuery Mobile CDN is a collection of jQuery plug-ins and widgets to provide a cross-platform API for building mobile web apps.
  • It is extremely similar to jQuery UI in terms of code implementation. However, jQuery UI is designed for desktop apps; jQuery Mobile is designed specifically for mobile devices.
  • The JavaScript file is supposed to load after the jQuery base library. This script file is used to create widgets, attach event listeners, and enable the API, among other things.
  • A Cascading Style Sheet is also included with jQuery Mobile CDN, which defines the layout and appearance of the page elements. Transitions and animations are specified using CSS3 transforms in the Style Sheet.
  • Finally, jQuery Mobile cdn comes with a small selection of visuals for UI elements. The icons for navigation are basic and consistent.
  • To offer a consistent mobile experience across supported platforms, jQuery Mobile CDN employs HTML 5 and CSS 3 technologies to augment basic HTML markup.
  • In terms of custom data attributes, jQuery Mobile heavily relies on the HTML 5 specification.
  • Data can be embedded in valid HTML 5 markup using this way. Data attributes are plentiful in jQuery Mobile CDN.

Below is a step to set up jQuery mobile cdn are as follows.

1) Create a jQuery mobile application first page

Code:

<!DOCTYPE html>
<html>
<head>
<title>jQuery mobile cdn</title>
<link rel="stylesheet" href="http://code.jQuery.com/mobile/1.0a4.1/
jQuery.mobile-1.0a4.1.min.css" />
<script src="http://code.jQuery.com/jQuery-1.5.2.min.js"></script>
<script src="http://code.jQuery.com/mobile/1.0a4.1/jQuery.mobile-1.0a4.1.min.js">
</script>
<section id="page1">
<header><h1>jQuery mobile cdn</h1></header>
<div class="content">
<p>This is the first page</p>
</div>
<footer><h1>Welcome!</h1></footer>
</section>
</head>
<body>
</body>
</html>

2) Create a jQuery mobile application second page

Code:

<!DOCTYPE html>
<html>
<head>
<title>jQuery mobile cdn</title>
<link rel="stylesheet" href="http://code.jQuery.com/mobile/1.0a4.1/
jQuery.mobile-1.0a4.1.min.css" />
<script src="http://code.jQuery.com/jQuery-1.5.2.min.js"></script>
<script src="http://code.jQuery.com/mobile/1.0a4.1/jQuery.mobile-1.0a4.1.min.js">
</script>
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery mobile cdn</h1></header>
<div class="content" data-role="content">
</div>
</section>
<div class="content" data-role="content">
<p>This is the first page go to second page</p>
<p><a href="#page2">Go to the second page to view contents</a></p>
</div>
</head>
<body>
</body>
</html>

The next screen will appear when we tap the link. The page transition animation will be handled automatically by jQuery Mobile cdn, and a back button will be included in the header.

Using the framework jQuery mobile CDN

  • The jQuery and jQuery Mobile CDN JavaScript libraries and the CSS must all be linked to the files that can be downloaded and hosted locally. A section jQuery element and a page’s data role define the project’s screen.
  • More than one section element and, as a result, more than one screenful of content can be found in a single HTML document.
  • In this method, just one file containing many pages of material is required to be loaded. One page can link to another page within the same file by referencing a page’s id attribute.
  • The data-theme property instructs the browser to render a certain theme. For example, if the data-add-back-btn attribute is true, the page will have a back button.

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery mobile cdn</title>
<meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://code.jQuery.com/mobile/1.4.5/jQuery.mobile-1.4.5.min.css">
</head>
<body>
<section data-role="page" id="first" data-theme="a">
<header data-role="header" data-position="fixed">
<h1>This is page1</h1>
</header>
<article role="main" class="ui-content">
<h2>Welcome to jQuery mobile cdn</h2>
<a href="#second" data-role="button" data-inline="true" data-transition="flow" data-icon="carat-r" data-iconpos="right">Click here to go on page2</a>
</article>
</section>
<section data-role="page" id="second" data-theme="b">
<header data-role="header" data-position="fixed" data-add-back-btn="true">
<h1>This is page2</h1>
</header>
<article role="main" class="ui-content">
<h2>Second page</h2>
</article>
</section>
<script src="https://code.jQuery.com/jQuery-1.11.1.min.js"></script>
<script src="https://code.jQuery.com/mobile/1.4.5/jQuery.mobile-1.4.5.min.js"></script>
</body>
</html>

Conclusion

When we include a CDN link on our website, the responsibility for hosting files is transferred from our servers to a network of external servers. It is a group of servers that work together to deliver data to users.

Recommended Articles

This is a guide to jQuery Mobile CDN. Here we discuss the Introduction overviews; Create Logstash multiple pipelines Examples with code implementation. You may also have a look at the following articles to learn more –

  1. Logstash Version
  2. Logstash Alternatives
  3. Fluentd vs. Logstash
  4. Kibana Logstash
quiz