
- jQuery Mobile Tutorial
- jQuery Mobile - Home
- jQuery Mobile - Overview
- jQuery Mobile - Setup
- jQuery Mobile - Pages
- jQuery Mobile - Icons
- jQuery Mobile - Transitions
- jQuery Mobile - Layouts
- jQuery Mobile - Widgets
- jQuery Mobile - Events
- jQuery Mobile - Forms
- jQuery Mobile - Themes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Data Attributes
- jQuery Mobile Useful Resources
- jQuery Mobile - Interview Questions
- jQuery Mobile - Quick Guide
- jQuery Mobile - Useful Resources
- jQuery Mobile - Discussion
jQuery Mobile - Chaining Dialogs
Description
The data-rel = "back" attribute is used to navigate to go back to the previous dialog. When one dialog is chained to the second dialog box and the second dialog is chained to the third, then using the data-rel = "back" on the third dialog you can navigate to the second dialog box.
Example
Following example demonstrates the use of chaining dialogs in the jQuery Mobile.
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role = "page" id = "page1"> <div data-role = "header"> <h2>Header</h2> </div> <div role = "main" class = "ui-content"> <a href = "#page2" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline"> Open Dialog</a> </div> <div data-role = "footer"> <h4>Footer</h4> </div> </div> <div data-role = "page" data-dialog = "true" id = "page2"> <div data-role = "header"> <h1>First Dialogs</h1> </div> <div role = "main" class = "ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <a href = "#page3" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline"> Open Second Dialog</a> </div> </div> <div data-role = "page" data-dialog = "true" data-close-btn = "none" id = "page3"> <div data-role = "header"> <h1>Second Dialogs</h1> </div> <div role = "main" class = "ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <a href = "#page1" class = "ui-btn ui-corner-all" data-rel = "back"> Back to First Dialog </a> </div> </div> </body> </html>
Output
Let's carry out the following steps to see how the above code works −
Save the above html code as chaining_dialogs.html file in your server root folder.
Open this HTML file as http://localhost/chaining_dialogs.html and the following output will be displayed.
jquery_mobile_pages.htm
Advertisements