This chapter is from the book
This chapter is from the book
This chapter is from the book
Link Types
jQuery Mobile supports standard HTML link types as well as a number of custom link types related to the mobile experience. The following tables offer a list of the supported link types available through the jQuery Mobile framework. Each table shows options categorized based on their end result and/or support of Ajax. Table 4.1 describes links that support Ajax.
Table 4.1. Link types that support Ajax
|
Hyperlink Markup |
Description |
|
<a href="http://www.jquerymobile.tv"> Hyperlink within same domain </a> |
A standard HTML link that is transformed by the jQuery Mobile framework to use Ajax, include page transitions, and support page history. |
|
<a href="http://www.jquerymobile.tv" data-rel="dialog"> Open a dialog</a> |
An option used for dialog windows that is not tracked in page history. |
|
<a href="http://www.jquerymobile.tv" data-rel="back">Back button</a> |
This option can be used to navigate back in page history; it’s a great option for providing a back button from a page or dialog. The href is ignored in A- and B-grade browsers, but is necessary for C-grade browsers. |
Table 4.2 describes a list of hyperlinks that disable the Ajax page-transition functionality. These hyperlinks are great for pages on an external domain, pages that open in a new window, linking from single to multipage templates, or linking to pages where you don’t want to use Ajax.
Table 4.2. Link types that disable Ajax
|
Hyperlink Markup |
Description |
|
<a href="http://www.jquery.com">External hyperlink</a> |
Linking to a page on an external domain automatically disables the Ajax functionality. |
|
<a href="http://www.jquery.com" rel="external">External hyperlink</a> |
By default this attribute defines a hyperlink as external, which not only disables Ajax, but also removes it from the page hashtag history and refreshes the webpage. This option can be transformed using jQuery to open new windows in a standards-compliant way. |
|
<a href="http://www.jquery.com" data-ajax="false">Hyperlink disables Ajax</a> |
This option provides a way to define a hyperlink as external, which not only disables Ajax, but also removes it from the page hashtag history and refreshes the webpage. |
Table 4.3 includes link types that stem from a basic HTML hyperlink with the addition of specific attributes.
Table 4.3. Miscellaneous link types
|
Hyperlink Markup |
Description |
|
<a href="tel:15556667777">Phone Number</a> |
This hyperlink initiates a phone call when clicked on some phones. |
|
<a href="mailto:jdoe@jquerymobile.tv">Email link</a> |
This hyperlink initiates a new email that’s prefilled with the specified email address. |
|
<a href="#">Hyperlink</a> |
This hyperlink returns false. It’s useful when creating a back button as in Table 4.1. |
The jQuery Mobile framework uses many hyperlink attributes to create enhancements to otherwise normal HTML webpages. This is just another reason why jQuery Mobile is more appealing than creating a mobile website from scratch. It lets you focus on what matters, eliminating the need to write core functionality every time you create a new mobile website.
The following examples show a few of the link types covered in the tables.
This webpage offers three examples of the link types that can be used in jQuery Mobile: an internal link, an external link, and a link that disables Ajax:
<!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>Single-page template - Page 1 - jQuery Mobile: Design and Develop</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</script>
</head>
<body class="container">
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<p><a href="single-page-2.html">Link to page 2</a></p>
<p><a href="single-page-2.html" rel="external">External Link to page 2</a></p>
<p><a href="single-page-2.html" data-ajax="false">Ajax-disabled link to page 2</a></p>
</div>
<div data-role="footer">
Copyright
</div>
</div>
</body>
</html>
An internal link requires no special markup and is where the framework will interject and create a page transition between the current page and the page that’s being linked to. An external link is one that requires the rel attribute, which must be set to a value of external. Setting a hyperlink as external disables Ajax, removes it from the page hashtag history, and refreshes the webpage when the link is clicked. The link that disables Ajax requires a data-ajax attribute with a value of false. This disables Ajax, removes it from the page hashtag history, and refreshes the webpage, just like the previous example, with the main difference being that the rel="external" attribute can be used as a standards-compliant way to create hyperlinks that target new windows with a little help from jQuery.
In this next example, there’s an internal link and a hyperlink that acts as a back button:
<!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>Single-page template - Page 2 - jQuery Mobile: Design and Develop</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body class="container">
<div data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<p><a href="single-page.html">Ajax link to page 1</a></p>
<p><a href="#" data-rel="back">Back button</a></p>
</div>
<div data-role="footer">
Copyright
</div>
</div>
</body>
</html>
Setting the data-rel attribute to back creates a hyperlink that acts like a back button. When this link is clicked, the jQuery Mobile framework automatically links to the previous page in history.