To start using jQuery Mobile, you'll need to include three files in your page:
Optionally, you might include a jQuery Mobile theme CSS file; more on this later.
You can either link to files you download from the jQuery Mobile website or link to files hosted on various Content Delivery Networks, or CDNs. To create a standalone jQuery web application you would need to download the files to your local site, as would also be true if you were hosting a site to be accessed by users without direct access to the internet. In other cases, using the CDN-hosted files makes the most sense: a network of high-speed servers delivers files very quickly and efficiently, and this strategy makes it easier for you to update to newer jQuery or jQuery Mobile file versions in the future.
Whichever strategy you choose, hosting the files on your own web server or linking to CDN-hosted files, be sure to choose the minified versions of the files for production use. The minification (the removal of spaces and line breaks) makes these files smaller and, thus, reduces download time.
Here is an example of the code that would live in the head section of your pages, showing links to 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>
Let's look at a first demonstration of some of these concepts. Nan & Bob's is a (fictional) small bookstore and cafe, located right in the middle of downtown. We have developed a mobile website for them - using jQuery Mobile, of course - that we'll be extending and enhancing throughout this course. The site will give users information about their store, their books, and their cafe.
Open the file GettingStartedjQuery/Demos/basicpagetemplate/index.html in a mobile browser and also in a file editor to check out the code. Not much there yet - the page looks something like this when viewed on a mobile device:
Let's review the code:
head of the document.
body of the page, you'll note that the content of the page is marked up by a
div with the
data-role="page" attribute. jQuery Mobile makes extensive use of HTML5 attributes, with
data-role among the most important. This simple example displays only one page; we'll see soon that we can offer our users multiple pages as multiple html files or within one single file.
div, we see
footer - which are, unsurprisingly, the header and footer of this particular page.
Let's now get you started writing some code!