jQuery Mobile - SPLessons
boy2

jQuery Mobile Environment

Home > Lesson > Chapter 2
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Mobile Environment

jQuery Mobile Environment

shape Description

To develop jQuery Mobile App, add jQuery Mobile library to the Application. jQuery Mobile Environment chapter explains basic setup steps to develop jQuery Mobile App and how to add jQuery Mobile to web pages.
SPLessons
Adding jQuery Mobile Library to the Web Pages can be done in two ways.

jQuery Mobile library: CDN (recommended)

shape Description

A Content Delivery Network (CDN) is an arrangement of distributed servers (organize) that convey website pages and other Web content (files)to a user taking into account the geographic areas of the user.This makes download speed much speedier for the user. There is no need for downloading and installing anything in the computer.Formally include the following CDN- stylesheet (.css) and JavaScript libraries (.js) into HTML page inside <html>tag directly. jQuery Mobile CDN: [html] <head> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" /> <!-- jQuery CDN hosted files --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> [/html]
  • The <head> element has viewport <meta> tag that specifies design flexibility and how browser is responsive to device dimensions and zoom level.
  • The initial zoom level is set by initial-scale=1 when the page undergoes loading initially by the browser.
  • The width of the page is set by width=device-width to fit to the screen-width of the device.

jQuery Mobile library: Computer(for offline)

shape Description

Step-1: First download jQuery Mobile. Step-2: Then add the following code to the page inside <html> tag: [html] <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery local --> <link rel="stylesheet" type="text/css" href="….\jquery.mobile-1.4.5"> <script type="text/javascript" src="….\jquery.mobile-1.4.5"></script> <script type="text/javascript" src="…\jquery.mobile"></script> </head> [/html]

Summary

shape Key Points

  • Downloading jQuery using CDN's is easier and faster.
  • Include the library files by placing in html tags.
Hide Index Show Index
Chapter 2