Many UI components are available in the jQuery Mobile framework. This article provides a high-level overview of each element and how you can use it in a mobile website. It touches on specific UI components, explains the reasons to use them, and provides code examples of their use in a mobile website.
Dialog boxes and pop-up windows
A dialog box is an important UI element, prompting users for a response or simply displaying information. Dialog boxes are most often used to present options to users to execute some sort of command based on the users’ response. Typically, you can present dialog boxes in either of two ways—as a modal or non-modal window (with jQuery Mobile, they are presented as a modal dialog box). Modal dialog boxes block users from interacting with the web page below the dialog box, requiring a response from users before they can proceed.
To create a dialog box with jQuery Mobile, you must use the
data-rel attribute on a hyperlink you want to open as a
dialog window and assign it the value of
dialog. The code below shows how to convert a simple hyperlink to a web page into a hyperlink that opens the associated web page as a dialog box:
<a href="dialog.html" data-rel="dialog">Open dialog</a>
By default, the jQuery Mobile framework adds rounded corners, a margin, and a dark background to the web page to make it appear as a dialog box positioned above the web page.
There are several ways to close a dialog box. The first option is simply to link to another page, which could be related to the response from the user. This would be a good option for any sort of processing that needs to take place—for instance, a Save button may link to a web page that saves some sort of information to a database, and then returns to the original parent web page with a confirmation message. The second option is to use the
data-rel attribute on a hyperlink in your dialog box and set its value to
back, as shown in the code below. This is a good option when including a Cancel button in your dialog box.
<a href="parent.html" data-rel="back">Cancel</a>
close method directly:
You can also use a number of transitions for dialog boxes to add flavor to your mobile website. You can set transitions by including a
data-transition attribute to the hyperlink you’re converting into a dialog box:
<a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>
The data transitions currently available are
flip; each functions exactly as you would assume. The most common transition associated with dialog boxes is
pop, but there are certainly cases where the other transitions may apply.