How jQuery Mobile Handles HTML5 data- Atrributes with Dialog Windows, Popups, and Buttons
- Creating a Basic Dialog Window
- Using a Dialog Window as a Popup
- Working with Buttons
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
HTML5 plays a key role in the jQuery Mobile framework. HTML5 is the starting point for everything from defining how your web page renders in mobile, tablet, or desktop browsers to custom attributes that define widgets, themes, and much more.
Dialog windows, popups, and buttons utilize HTML5 data- attributes to tell the jQuery Mobile framework how to transform and render them as mobile widgets. HTML5 data- attributes provide a way to store custom data that is not seen by the end user. In other words, the data is not rendered or even used by the browser. The data that is stored in these attributes is accessible to JavaScript. This data can be used behind the scenes to create custom functionality or be accessible for display to the user when a specific interaction takes place. The HTML5 specification supports any attribute that begins with data- as a data storage area. Any name that is appended to the data- prefix will be supported. For example, if you were to add custom data- attributes to an image tag that belonged to an image gallery, you could add custom data-title and data-description attributes, and give them any custom value.
Let’s take a look at a few ways that jQuery Mobile handles data- attributes with dialog windows, popups, and buttons.
Creating a Basic Dialog Window
Like most things in jQuery Mobile, dialog windows are incredibly easy to implement, but it’s what you do with them that counts. Creating a dialog window is as simple as adding a data-rel attribute to any anchor tag and setting its value to “dialog”. This will tell jQuery Mobile to open the specified hyperlink in a dialog window.
Dialog windows can be an external HTML document or a hidden element that contains the HTML you want to load. Linking to an external document is very straightforward, and is done just as you would normally link to any external web page. To link to a hidden element, the hidden element needs to have an id associated with it. Once the hidden element is set up properly, it can be used as an anchor tag in a hyperlink, which will tell jQuery Mobile to open that hidden element in a dialog window.
The following example shows how this can be accomplished:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Dialog Window</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Dialog Test</h1></div>
<div data-role="content">
<p><a href="#internal-dialog" data-rel="dialog">Open hidden content as dialog</a></p>
</div>
<div data-role="footer">Copyright</div>
</div>
<div data-role="page" id="internal-dialog">
<div data-role="header"><h1>Internal dialog window</h1></div>
<div data-role="content">
<p>Dialog content can go here</p>
<p>Buttons can go here</p>
</div>
</div>
</body>
</html>
There are two pages in this example; the first page is the one that is displayed by default. Within this default page is a hyperlink that has a data-rel=”dialog” and a link to an anchor. The anchor that is being linked to is the id of the second page. The second page is set up like any standard jQuery Mobile page: It opens as a dialog because of the data-rel attribute.
Creating a dialog window from an external page can be done through a regular hyperlink that includes a data-rel=”dialog”. The HTML is set up almost identical to the previous example; the difference is that the dialog window is contained within an external HTML document, and the dialog hyperlink is pointed to that webpage.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Dialog Window</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Dialog Test</h1></div>
<div data-role="content">
<p><a href="dialog-window.html" data-rel="dialog">Open External Dialog</a></p>
</div>
<div data-role="footer">Copyright</div>
</div>
</body>
</html>
The HTML document that is being referenced as dialog-window.html is set up like a standard jQuery Mobile web page. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Mobile: Dialog Window</title>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>External dialog window</h1></div>
<div data-role="content">
<p>Dialog content can go here</p>
<p>Buttons can go here</p>
</div>
</div>
</body>
</html>
Take note that the jQuery Mobile framework doesn’t need to be embedded into this dialog window because it has already been loaded into the main HTML page.