Chapter 1, Get Rolling, begins with a brief introduction on what the jQuery Mobile framework is and what it can do for you. You will get to write your first jQuery Mobile cross-platform app here. You will also see how to use the online JSBin tool to develop and test your apps.

Chapter 2, Pages and Dialogs, here you will learn how to compare and use single page and multi-page template applications. You will learn various performance-enhancing techniques, such as prefetching and using the DOM cache to improve your page loading speed. You will create new custom transitions using JavaScript and CSS, and also learn to use page redirection for a login page. You will also create a custom styled dialog, and use the HTML5 History API to create your own custom pop up.

Chapter 3, Toolbars, here you will learn how to use fixed and full screen toolbars and how to persist your navigation links across pages. You will see how you can create and add custom round buttons, images, and a custom back button to the header, and a grid layout to the footer.

Chapter 4, Buttons and Content Formatting, here you will use JavaScript to dynamically create a button and assign an action to it. Then, you will learn how to use a custom icon, add a custom icon sprite, and finally replace the existing icon sprite provided by the jQuery Mobile framework. You will learn how to create nested accordions (collapsible sets), how to create a custom layout grid, and finally see how to format and display XML and JSON content in your app.

Chapter 5, Forms, shows you how to natively style forms, disable text controls, and group radio buttons into a multi-row grid. You will learn to customize a checkbox group, auto initialize select menus, and create dynamic flip switch and slider controls. You will also see how to validate and submit a form to a server using POST, and also how to fetch data using GET. Finally, you will learn how to create an accessible form.

Chapter 6, List Views, here you will learn how to use various list types and also customize them. You will use an inset list, custom number a list, and then create a read-only list. You will see how to format list content, use a split button, and an image icon list. You will also create a custom search filter for your list, and finally see how you can use JavaScript to modify a list.

Chapter 7, Configurations, shows you how to tweak, configure, and customize the various options and settings provided by the jQuery mobile framework. Configuring the active classes, enabling Ajax, auto initializing pages, configuring default transitions, customizing error and page loading messages, and using your own custom namespace are all covered along with a few more advanced configuration options.

Chapter 8, Events, shows you how to use the various events available in the framework. You will learn to use the orientation, scroll, touch, virtual mouse, and layout events along with the page initialization, page load, page change, and page remove events. You will also see how to use the page transition and animation events.

Chapter 9, Methods and Utilities, here you will see how to use the methods and utilities provided in the framework. The chapter runs through the methods provided by the framework and lists working recipes for each of these. You will see how to load a page, change a page, and also how to do silent scrolling.

Chapter 10, The Theme Framework, here you will learn how to theme a nested list, style button corners, and use custom backgrounds and fonts. You will explore how to override the global active state and override an existing swatch. Finally, you will use the ThemeRoller web tool to create and use your own swatch.

Chapter 11, HTML5 and jQuery Mobile, here you will see how to use various HTML5 features in your jQuery mobile app. You will explore some new HTML5 semantics, use the Application Cache to take your app offline, use Web Workers to see how asynchronous operations are done, and you will use web storage to store data using local and session storage. Then you will see how to draw in 2D using the Canvas, use SVG image and apply a Gaussian blur filter on it, track your device location using the Geolocation API, and finally see how to use audio and video in your app.

To work with jQuery Mobile, all you need is just your favorite text editor to write the HTML code. You can then run this code in your favorite browser and launch your app on a wide variety of platforms and devices. The full and detailed list of supported platforms and devices is available at http://jquerymobile.com/gbs.

To install and run the recipes in the cookbook, you will have to download and install the node.js web server from http://www.nodejs.org. The online docs at the nodejs website has the simple steps that are required to install on your specific platform (Windows/Linux/Mac). The source code bundle accompanying this cookbook just needs to be extracted, and it contains all the required nodejs modules. You can now launch the recipes directly in your browser. Refer to the Readme.txt file in the source code bundle for detailed instructions on how to do this.

If you are a beginner with jQuery/JavaScript skills, this book offers you numerous examples to get you started.

If you are a seasoned developer, this book lets you explore jQuery Mobile in greater depth.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "Now, open the main.html file in your favorite browser, and you will see an output similar to the following screenshot:".

A block of code is set as follows:

<body>
  <!-- Main Page -->
  <div id="main" data-role="page">
    <div data-role="header">
      <h1>Welcome - JS BIN</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>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/latest
  /jquery.mobile.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com
  /jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest
  /jquery.mobile.js"></script>
<meta name="viewport" content="width=device-width, 
  initial-scale=1">
<title>Welcome using JS Bin</title>
</head>

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "You can also manually run the script by clicking on the Run with JS button."

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.