Published: 07 Mar 2012
By: Brian Mains

An overview of widgets in jQuery Mobile.

Contents [hide]


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:

Listing 1: JQuery UI Widget

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.

Listing 2: Enabling Accordion Functionality

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

Listing 3: Sample Widget (Collapsible Panel)

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.

Listing 4: Nested Collapsible Panels

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.

Listing 5: Accordion Panels

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.

Listing 6: Grids

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.


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 5 attributes.


About Brian Mains



Other articles in this category

jQuery Mobile ListView
Exception Handling and .Net (A practical approach)
Book Review: SignalR: Real-time Application Development
A book review of SignalR by Simone.
jQuery Mobile Pages
Brian Mains explains how to create pages with the jQuery Mobile framework.

You might also be interested in the following related blog posts

StackOverflow DevDays in London read more
Using jQuery Grid With ASP.NET MVC read more
jQuery Intellisense in VS 2008 read more
jQuery Intellisense Updates from Microsoft read more
ASP.NET Ajax Controls and jQuery read more
Making Element Position Absolute with jQuery read more
Inclusion of JavaScript Files read more
Download AjaxPro Beta with jQuery Support read more
TechEd Barcelona 2006: Designing Zero-Code Adaptive User Interfaces (UIs) for Windows Mobile read more
MSF for Agile update released - still doesn't hit the mark - level 200 read more

Please login to rate or to leave a comment.