Introduction to the jQuery Mobile Framework
- Adding jQuery Mobile to Your Site
- Using Data Roles
- Creating a Simple Page
- Understanding the Mobile Initialization Event
- Using the pageinit Event Instead of $(document).ready()
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
The jQuery Mobile framework is the perfect place to get started with mobile development. Just like the standard jQuery framework, it is built to deliver speed, stability, and an excellent cross-browser experience to your visitors.
During this hour we start with adding jQuery Mobile to a web page and then discuss a little of how jQuery Mobile runs with the use of data roles. We then create a basic page with HTML and make it a mobile page using jQuery Mobile. Finally in this hour we cover the pageinit function and the difference between it and the standard jQuery $(document).ready() function.
Adding jQuery Mobile to Your Site
Adding the jQuery Mobile framework to your site is almost as easy as adding the standard jQuery framework to your site. In fact, jQuery Mobile requires the standard jQuery framework to function. In this respect, it could be considered part of the jQuery Mobile framework since it will not run without it.
Three files make up the complete jQuery Mobile framework:
- jQuery library JavaScript file
- jQuery Mobile library JavaScript file
- jQuery Mobile CSS style sheet
The two jQuery libraries are included as they contain all the logic that makes the frameworks work. The jQuery Mobile library extends on the base features of the jQuery library. Each of these libraries is available in a production version and a development version. The main difference between the two is that in the production version each file has been minified to remove excess whitespace and leaves out all comments. If you want to dive into what makes each framework tick, grab the development versions as they contain extra lines to help with legibility and comments to help explain some sections of code.
The jQuery Mobile CSS style sheet is included as it contains all the styles, themes, and swatches that are used with jQuery Mobile. These styles include various settings for backgrounds, colors, margin, padding, and sprites. jQuery Mobile does leverage CSS3 styles as this allows a smaller file size, and most modern mobile browsers have fairly good support for them.
When the files listed previously are included together in your HTML file, you are ready to get started using jQuery Mobile.
Listing 4.1 shows the contents of basic_layout.html, which we use to start the layout of a simple mobile page including jQuery Mobile.
Listing 4.1 Basic Page Layout Including jQuery Mobile
1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>Developing with jQuery Mobile</title> 5: <meta name="viewport" content="width=device-width, initial-scale=1"> 6: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 7: <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script> 8: <script src="https://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> 9: </head> 10: <body> 11: <p>content will go here shortly</p> 12: </body> 13: </html>
Let’s take a walk through the basic structure. Beginning with line 1 we set up our HTML5 DOCTYPE. This allows most mobile browsers and even most modern desktop browsers to use all the features that jQuery Mobile offers. The HTML5 DOCTYPE also allows some backwards compatibility with older browsers.
The next few lines are all standard HTML, but line 5 contains a meta element with some attributes that you may not recognize. The name attribute tells the browser what type of data this meta element contains. In this case it tells the browser that it contains information for the viewport or the display size of the page. The content attribute is set to width=device-width, initial-scale=1. This means that when the page is viewed, it should not be zoomed in to a particular portion of the page or zoomed out and shrink everything down. Instead the page should be rendered with the same dimensions as the device it is being viewed on, averting the strange zoomed views that plague some websites that are viewed on mobile devices.
Line 6 is where we include the jQuery Mobile CSS file. This file contains all the default styles that will be applied when using jQuery Mobile, and it also contains some theme styles that can be overwritten.
Line 7 contains the include for the standard jQuery JavaScript library. Note that this include must be called before you call the jQuery Mobile JavaScript library or you will receive JavaScript errors on the page.
Line 8 is the include for the jQuery Mobile JavaScript library.
Lines 9 through 13 show basic HTML markup for the rest of the page.
You can try running the code from Listing 4.1 by running basic_layout.html in your browser. Don’t be surprised or worried that the site doesn’t look very mobile and that it only contains one line of text. This is normal and rendering exactly as expected. In fact it brings us to using data roles.