How to Use JQuery Mobile Widgets

What Will I Learn?

In this tutorial you will learn to locate and use the jQuery mobile widgets.

Requirements

JQuery Mobile Framework

Difficulty

Intermediate

Tutorial Contents

• JQuery UI Widget
• Enabling Accordion Functionality
• Sample Widget (Collapsible Panel)
• Nested Collapsible Panels
• Accordion Panels
• Containers with CSS

Using JQuery Mobile Widgets

A widget is a combination of markup and JavaScript code that transforms a simple piece of HTML into an interactive component. JQuery mobile uses specific markup indicators to identify widgets, which are a combination of HTML 5 and CSS. JQuery Mobile does not use a JavaScript call to enable the widget like JQuery UI does. However, the framework provides a lot of the same features that you would find in the UI framework.For instance, in JQuery UI, to setup an accordion control, we'd setup markup as in Listing 1:

1. JQuery UI Widget 

<div id="accordion">

    <h3><a href="#">First header</a></h3>

    <div>First content</div>

    <h3><a href="#">Second header</a></h3>

    <div>Second content</div>

</div>

Each header of the widget is represented by the H3 element, whereas a DIV element represents the content. The DOM must be structured in order for the plugin to work successfully. The HTML needs transformed using the registration statement in Listing 2.

2. Enabling Accordion Functionality

$("#accordion").accordion({ active: 2 });

Calling the accordion method transforms the markup in Listing 1 into a full-fledged accordion; at the time of initial registration, any initial settings can be passed in through a hash. Let's see how JQuery Mobile compares.

Understanding Widgets

To understand what I mean, take a look at the HTML in Listing 3. This simple HTML snippet represents a widget where the content can collapse (also known as a collapsible panel).

3. Sample Widget (Collapsible Panel) 

<div data-role="collapsible" data-collapsed="true">

    <h3>Default Collapsed</h3>

    This is content that is collapsed, but can be by clicking on the heater.

</div>

Each widget defines a role; here we have the role of "collapsible". JQuery Mobile transorms the widget by rendering the header element as a title bar, along with the rest of the content as the content underneath the title. JQuery Mobile applies CSS class definitions to the container and children to theme the control correctly (more on theming later). In some cases, it will also modify the HTML structure by adding additional content to supply the functionality desired. However, if the HTML snippet above didn't include an H3 element as the first child, the widget would appear distorted and would not function correctly. It is very important to get the required HTML elements in place so that all functionality can work as expected.

Notice how the above listing doesn't define any JavaScript. If you have used JQuery UI before, the UI framework requires an initialization statement like $("#elementID").collapsiblePanel(); to enable the widget. However, JQuery Mobile simply utilizes the role attribute only to indicate the type of widget, and the framework takes care of the rest. What seems lost in the mobile framework is the ability to initialize and configure these widgets; however, it provides these abilities through other HTML attributes. For instance, to control whether the panel above appears collapsed or expanded initially is controlled by the data-collapsed attribute. The theme of the widget and of the widget's content can be controlled by the data-theme and data-content-theme attributes too (more on theming later).

The JQuery Mobile framework will also parse content of widgets to look for other widgets, like in the Listing 4 sample. JQuery Mobile automatically picks up the inner DIVs with the role defined, and creates a hierarchical structure.

4. Nested Collapsible Panels 

<div data-role="collapsible" data-collapsed="false">

    <h3>Nested Sample Header</h3>

    <div data-role="collapsible" data-collapsed="true">

        <h3>Sample Collapsed 1</h3>

        This is content that is collapsed, but can be by clicking on the heater.

    </div>

    <div data-role="collapsible" data-collapsed="true">

        <h3>Sample Collapsed 2</h3>

        This is content that is collapsed, but can be by clicking on the heater.

    </div>

</div>

Another type of widget that groups content together is the JQuery Mobile collapsible sets, also known as an Accordion. JQuery Mobile reuses the collapsible panels as the accordion panes. By using a collapsible set, the functionality of the collapsible panel changes; instead of opening and closing freely, clicking the collapsible expands the selected panel and closes any other opened panels, as shown in Listing 5.

5. Accordion Panels 

<div data-role="collapsible-set">

    <div data-role="collapsible" data-collapsed="false">

        <h3>Default Expanded Collapsible set</h3>

        This is content that is not collapsed, but can be by clicking on the heater.

    </div>

    <div data-role="collapsible" data-collapsed="true">

        <h3>Default Collapsed 1</h3>

        This is content that is collapsed, but can be by clicking on the heater.

    </div>

</div>

You can see how JQuery Mobile allows for widgets to react uniquely to different situations; whereas a collapsible widget would work on its own when isolated, in a set it functions differently.

Containers with CSS

JQuery has a few containers that don't use the role to identify it as a widget. Instead, it uses pure CSS as the means for identifying its purpose and functionality, as it can just as easily target a CSS class for transformation. Take the Grid for an example; the Grid represents a tabular container from two to five columns long. Every grid implements a ui-grid style, with 4 variations based on the number of columns desired; using the ui-grid-a style defines a two-column grid up to ui-grid-d equivalency of a five column grid. The Grid does not have an explicit row designator; rather, it calculates the rows based on the number of cells with the ui-block CSS class. For instance, to define a three-column grid, the container in Listing 4 uses the ui-grid-b class, with cell containers defining the ui-block-a, -b, and –c classes.

Traditional application developers would quickly setup a table for its grid representation. However, JQuery Mobile uses DIV elements with CSS classes to denote the grid and its cells (omitting a row designation). Take a look at Listing 6.

6. Grids 

<div class="ui-grid-b">

    <div class="ui-block-a">

        First Name

    </div>

    <div class="ui-block-b">

        <input id="FirstName2"/>

    </div>

    <div class="ui-block-c">

        (Required)

    </div>

    <div class="ui-block-a">

        Last Name

    </div>

    <div class="ui-block-b">

        <input id="LastName2"/>

    </div>

    <div class="ui-block-c">

        (Required)

    </div>

</div>

The grid's cell can be made up of any type of content; here we use a Grid to represent a form as a brief example. This may not be ideal because of the nature of cell alignments; each cell gets an equal amount of spacing. In this scenario, each cell gets 33% of the real estate width, thereby causing the form to stretch longer than would be preferred. Similarly, a 5-column grid renders cells with a 20%/20%/20%/20%/20% split across all five columns.

Conclusion

If you are familiar with JQuery UI, you will see some similarities in JQuery Mobile, especially in how the widget lays out the markup. JQuery Mobile applies widget functionality using the data-role attribute, and in some cases, purely by CSS. A JQuery Mobile widget is initialized automatically without any explicit JavaScript code, and configurable through a range of HTML attributes. 

---

Posted on Utopian.io - Rewarding Open Source Contributors

---