Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 07 Mar 2012
An overview of widgets in jQuery Mobile.
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.
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.
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.
Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare.
In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou...
This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.