A simple jQuery Mobile application consists of a page, which forms the basic building block for your application. The page follows a basic structure with three main parts, the header , the page content , and the footer . You can build feature-rich applications with workflows using multiple pages, each page with its own functionality, logic, and navigational flow. This recipe shows how to create a page and write your first jQuery Mobile application.
Copy the full code of this recipe from the code/01/welcome folder. You can launch this code using the URL: http://localhost:8080/01/welcome/main.html.
Carry out the following steps:
Create the following
main.htmlfile using your favorite text editor:<!DOCTYPE html> <html> <head> <title>Welcome</title> <meta name='viewport' content='width=device-width, initial-scale=1'>Include the jQuery and jQuery Mobile JavaScript files:
<link rel='stylesheet' href='http://code.jquery.com /mobile/1.1.1/jquery.mobile-1.1.1.min.css' /> <script src='http://code.jquery.com/jquery- 1.7.1.min.js'></script> <script src='http://code.jquery.com/mobile /1.1.1/jquery.mobile-1.1.1.min.js'></script> </head> <body>
Create the jQuery Mobile page:
<!-- Main Page --> <div id='main' data-role='page'> <div data-role='header'> <h1>Welcome!</h1> </div> <div id='content' data-role='content'> <p>The jQuery Mobile Cookbook</p> </div> <div data-role='footer'> <h4>Enjoy reading the book ...</h4> </div> </div> </body> </html>
Create main.html as an HTML5 document starting with the <!DOCTYPE html> declaration. In the <head> tag of the file, add a <meta> tag and specify that the viewport should occupy the entire device width by using the content='width=device-width' attribute. Include the jQuery Mobile stylesheet by using the <link> tag pointing to the CSS file location on the jQuery Mobile Content Delivery Network (CDN) site.
Next, include the JavaScript libraries; first the jQuery and then the jQuery Mobile JavaScript files. Use the <script> tags and point src to the CDN location, as shown in the code. You are now ready to create the page.
The page, its header, footer, and content are all <div> containers, which are styled by using the data-role attributes. Add a <div> tag with data-role='page' to the <body> tag. Add three div tags with data-role='header', 'content', and finally the 'footer' as child elements within the page. This will create the page header, content, and footer respectively. You can add any text, forms, lists, or other HTML controls within these <div> tags. The framework will enhance and render the controls in a touch-friendly mobile-enabled style.
Now, open the main.html file in your favorite browser, and you will see an output similar to the following screenshot:
Open and compare the output of this file in different browsers, mobile devices, and tablets. You will see that on all-compliant and certified browsers/devices, the page opens up and looks pretty much the same.
Congratulations! You just created your first cross-platform jQuery Mobile web application.
At the time of writing this recipe, jQuery Mobile v1.1.1 was the stable version and is used in all the recipes in this book. The supported jQuery library recommended is jQuery v1.7.1.
You can use the libraries directly from the jQuery Mobile CDN, as shown in this recipe. You could also download the library files (available in a single archive) at http://www.jquerymobile.com/download, and host the files locally within your network. When hosted locally, you just have to update the links in your code to point to the correct location of the files on your network (or to the path on your hard disk), as shown in the following code snippet:
<link rel="stylesheet" href='[local path]/jquery.mobile- 1.1.1.min.css' /> <script src='[local path]/jquery-1.7.1.min.js'></script> <script src='[local path]/mobile/1.1.1/jquery.mobile- 1.1.1.min.js'></script>
By default, the framework provides five basic color schemes or combinations called color swatches
. They are named a, b, c, d and e. By default, swatch d is used when you create a page. This gives the page a bright combination of white and black colors, as seen in the previous screenshot. You can change the color swatch of your page and header/footer by using the data-theme attribute, as shown in the following code snippet:
<div data-role='page' data-theme='a'> <div data-role='header' data-theme='b'> …. <div data-role='footer' data-theme='b'>
The output will now be similar to the following screenshot:
The Using JS Bin to create a simple application recipe
The Writing a single-page template application and Writing a multi-page template application recipes in Chapter 2, Pages and Dialogs