Book Image

jQuery Mobile First Look

Book Image

jQuery Mobile First Look

Overview of this book

Table of Contents (17 chapters)
jQuery Mobile First Look
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Theming content


Theming content is extremely easy, thanks to the excellent theming system jQuery Mobile is shipped with.

As for collapsible blocks, we can add the data-theme attribute so we can choose from any swatch color. Various swatches appear as shown in the following screenshot:

However, in order to have the content of collapsible blocks with the same color swatch, we need to add the same data-theme attribute to the outer container (in most cases, the page div).

A more interesting issue is the one related to the appearance of grids and their blocks: in order to obtain a grid of colorful cells, it is suggested to create an inner div which is styled using classes from a theme (swatch) of our liking:

<div class="ui-grid-b">
  <div class="ui-block-a">
    <div class="ui-bar ui-bar-b" style="height: 60px">
      <p>Content</p>
    </div>
  </div>
  
  <div class="ui-block-b">
    <div class="ui-bar ui-bar-b" style="height: 60px">
      ...