4 min read

jQuery Mobile First Look

jQuery Mobile First Look

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

        

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.



    
    
  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).


    Collapsible block header


    Lorem ipsum dolor sit amet etc….


    
    

    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:


    This block will be collapsed (does not show content)


    Lorem ipsum dolor sit amet etc….



    This block will expand on page load


    This text is visible right away!


    
    

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:



    Collapsible block header


    Lorem ipsum dolor sit amet, consectetur adipiscing elit.



    Nested collapsible block


    Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos himenaeos.



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



    Collapsible block header


    Lorem ipsum dolor sit amet, consectetur adipiscing elit.



    Nested collapsible block


    Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos himenaeos.



    Nested into a nested collapsible block


    Integer lectus eros, accumsan eget ultrices vel, sagittis
    volutpat odio.




    
    

    jQuery Mobile tutorial on Grid Layout Theming Content

 


Subscribe to the weekly Packt Hub newsletter

* indicates required

LEAVE A REPLY

Please enter your comment!
Please enter your name here