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.
The jQuery Mobile JavaScript library is a powerful way to let mobile and tablet devices access mobile applications by allowing users to connect directly to touch-friendly applications through a web browser. To use any of the examples in this article, you must download or include the remotely hosted jQuery Mobile framework files, which you can find a link for in Resources.
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>
Unfortunately, this option doesn’t work on devices that don’t support JavaScript. The final option is to use JavaScript to call the dialog box’s close method directly:
$('#my-dialog').dialog('close');
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 pop, slidedown, and 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.
Read the original article at IBM Developerworks
