jQuery Mobile: Collapsible Blocks and Theming Content

Exclusive offer: get 50% off this eBook here
jQuery Mobile First Look

jQuery Mobile First Look — Save 50%

Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development

$23.99    $12.00
by Giulio Bai | July 2011 | Open Source

The difficulty in designing, formatting, and correctly showing a page on a mobile device is going to become a no-brainer using the set of elements jQuery Mobile provides in order to allow for an easy styling of our web application content.

In this article by Giulio Bai, author of jQuery Mobile First Look, we will explore:

  • Collapsible blocks
  • Theming content

 

jQuery Mobile First Look

jQuery Mobile First Look

Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development

        Read more about this book      

(For more resources on this subject, see here.)

The reader would benefit by referring the previous article on How to Use jQuery Mobile Grid and Columns Layout.

A note on collapsible blocks

On a completely different note, jQuery Mobile provides an easy-to-use and visually-appealing solution to hide and show content, namely, the so-called collapsible blocks.

Collapsible blocks should be already well-known to the web designers out there, and they have gained in popularity especially after the advent of JavaScript libraries and frameworks like jQuery, which have made writing the necessary code a matter of minutes to obtain a pane which shows its content once a button (or any kind of element, actually) is clicked. The following screenshot shows how jQuery Mobile renders, by default, any collapsible block we include into our web page:

jQuery Mobile tutorial on Grid Layout Theming Content

So, how do we create a (set of) collapsible block(s)?

  1. Collapsible blocks are obtained by assigning a container the data-role="collapsible" attribute. As easy as that.

    <div data-role="collapsible">
    <!-- this is a collapsible block -->
    </div>

  2. The jQuery Mobile framework needs a heading element to be present inside the container. The heading (which can be from h1 through h6) will be styled like a clickable button, and a plus (+) symbol will be added to its left to indicate it's expandable. Once we click the header/button and the content shows, a minus (-) symbol will replace the plus to indicate it's collapsible.

    Where do I put the heading?
    The heading can be placed anywhere inside the container. Remember that jQuery Mobile will use as a header the very first h-element it finds inside the container, and remove it from its original position.
    Once the required header is provided, you can add any other h-element to the container and it will not be processed (that is, it will behave like a normal heading would).

    <div data-role="collapsible">
    <h3>Collapsible block header</h3>
    <p>Lorem ipsum dolor sit amet etc....</p>
    </div>

    jQuery Mobile tutorial on Grid Layout Theming Content

    We used an h3 heading in this example, but any other heading would have looked just the same: jQuery Mobile changes completely the style of the heading to match a button's style.

  3. We can specify whether we want a collapsible block to be expanded on page load or not by adding the data-collapsed="true" attribute to the container:

    <div data-role="collapsible" data-collapsed="true">
    <h3>This block will be collapsed (does not show content)</h3>
    <p>Lorem ipsum dolor sit amet etc....</p>
    </div>

    <div data-role="collapsible">
    <h3>This block will expand on page load</h3>
    <p>This text is visible right away!</p>
    </div>

Nested collapsible blocks

Collapsible blocks can also be nested, resulting in a series of blocks which control various paragraphs and content:

  1. To create a set of nested collapsible blocks, we only need to insert a block into another block, which will be its container:

    <!-- Top level collapsible block -->
    <div data-role="collapsible">
    <h3>Collapsible block header</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <!-- nested collapsible block -->
    <div data-role="collapsible">
    <h3>Nested collapsible block</h3>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos himenaeos.</p>
    </div>
    </div>

  2. We may have any number of collapsible blocks nested; for example, here is another one:

    <!-- Top level collapsible block -->
    <div data-role="collapsible">
    <h3>Collapsible block header</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <!-- nested collapsible block -->
    <div data-role="collapsible">
    <h3>Nested collapsible block</h3>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos himenaeos.</p>

    <!-- nested into a nested block -->
    <div data-role="collapsible">
    <h3>Nested into a nested collapsible block</h3>
    <p>Integer lectus eros, accumsan eget ultrices vel, sagittis
    volutpat odio.</p>
    </div>
    </div>
    </div>

    jQuery Mobile tutorial on Grid Layout Theming Content

 

jQuery Mobile First Look Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development
Published: June 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

Collapsible sets

Collapsible sets are a certain number of collapsible blocks grouped together so that they act like an accordion widget: all other blocks close when a new one is opened:

  1. A set of collapsible blocks is created by adding the data-role="collapsible-set" attribute to a container:

    <div data-role="collapsible-set">
    <!-- collapsible blocks go here -->
    </div>

  2. We then add our collapsible blocks, as we would do in any other page:

    <div data-role="collapsible-set">
    <div data-role="collapsible">
    <h3>Collapsible block in a set (1)</h3>
    <p>Lorem ipsum dolor sit amet, etc....</p>
    </div>

    <div data-role="collapsible">
    <h3>Collapsible block in a set (2)</h3>
    <p>Lorem ipsum dolor sit amet, etc....</p>
    </div>

    <div data-role="collapsible">
    <h3>Collapsible block in a set (3)</h3>
    <p>Lorem ipsum dolor sit amet, etc....</p>
    </div>

    jQuery Mobile tutorial on Grid Layout Theming Content

    Nested collapsible blocks in collapsible sets
    You cannot have nested collapsible blocks in a collapsible set, as jQuery Mobile treats all the collapsible blocks in the same way so that, when the nested collapsible block is clicked, all other blocks are closed and the content is hidden: even the container block is in fact closed, being part of the same collapsible set.
    As of now, this problem seems to be fixed on certain handsets (Android 1.6 and 2.1 didn't even have this issue), but a bug is still filed for other devices.

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:

jQuery Mobile tutorial on Grid Layout Theming Content

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">
<p>Content</p>
</div>
</div>

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

Of course, we could use the following code to wrap each block's content into the div we need once the page loads, and still get the same result with much less work to do!

<!-- in the HEAD -->
<script type="text/javascript">
$(document).ready (function () {
$('div[class^=ui-grid]').children ().each (function () {
$(this).html ('<div class="ui-bar ui-bar-b" style="height:
60px">' + $(this).html () + '</div>');
});
});
</script>

<!-- in the BODY -->
<div data-role="page" id="home">
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>

<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div>
</div>
</div>
<div>

jQuery Mobile tutorial on Grid Layout Theming Content

Summary

Dealing with content and displaying it on our page using jQuery Mobile is, as we've seen, fairly easy.

The problems we might run into when trying to accomplish a particular look and feel would be mainly related to the way jQuery Mobile processes the HTML markup and applies its own CSS rules to our elements.

However, the framework does its best not to interfere with our code and styling, preserving our layout as we thought it originally – there shouldn't be any problems then.


Further resources on this subject:


jQuery Mobile First Look Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development
Published: June 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Giulio Bai

Giulio Bai is a law student living in Italy who spends most of his time toying with stuff that doesn't have anything to do with law.

Even after trying to keep the list of his past achievements as short as possible, the number of projects that he joined in (and that invariably sunk shortly thereafter) makes it hard to narrow down his interests to programming and carousels alone.

It should be made clear that any claim of responsibility for those unfortunate ventures is wholeheartedly rejected – they never had the necessary potential to make it anyway.

Books From Packt


iPhone JavaScript Cookbook
iPhone JavaScript Cookbook

Sencha Touch 1.0 Mobile JavaScript Framework
Sencha Touch 1.0 Mobile JavaScript Framework

Android 3.0 Application Development Cookbook
Android 3.0 Application Development Cookbook

Xcode 4 iPhone Development Beginner's Guide
Xcode 4 iPhone Development Beginner's Guide

jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

PhoneGap Beginner's Guide
PhoneGap Beginner's Guide

Android User Interface Development: Beginner's Guide
Android User Interface Development: Beginner's Guide


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
b
g
Y
t
z
k
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software