Book Image

jQuery Mobile Web Development Essentials - Third Edition

By : Raymond Camden, Andy Matthews
Book Image

jQuery Mobile Web Development Essentials - Third Edition

By: Raymond Camden, Andy Matthews

Overview of this book

jQuery Mobile is a HTML5-based touch-optimized web framework. jQuery Mobile can be used to build responsive cross-platform websites and apps for a wide range of smartphones, tablets, and desktop devices. The jQuery Mobile framework can be integrated with other mobile app frameworks such as PhoneGap, IBM Worklight, and more. Introduction to jQuery Mobile explains how to add the framework to your HTML pages to create rich, mobile-optimized web pages with minimal effort. You’ll learn how to use jQuery Mobile’s automatic enhancements and configure the framework for customized, powerful mobile-friendly websites. We then dig into forms, events, and styling. You'll see how jQuery Mobile automatically enhances content, and will find out how to use the JavaScript API to build complex sites. We’ll introduce you to how jQuery Mobile can be themed as well looking into how JavaScript can be used for deep sets of customizations. The examples are ready to run and can be used to help kick-start your own site. Along the way, you will leverage all the concepts you learn to build three sample mobile applications.
Table of Contents (20 chapters)
jQuery Mobile Web Development Essentials Third Edition
About the Authors
About the Reviewer

Working with collapsible content

The next widget we will look at in this chapter supports collapsible content. This is simply the content that can be collapsed and expanded. Creating a collapsible content widget is as simple as wrapping it in a div block, adding data-role="collapsible", and including a title for the content. Consider the following simple example:

<div data-role="collapsible">
  <h1>My News</h1>
  <p>This is the latest news about me…

Upon rendering, jQuery Mobile will turn the title into a clickable banner that can expand and collapse the content within. Let's look at a real example. Imagine you want to share the location of your company's primary address. You also want to include satellite offices. Since most people won't care about the other offices, we can use a simple collapsible content widget to hide the content by default. The following code snippet, Listing 7-3, demonstrates an example of this:

Listing 7-3: test5.html
   <div role...