Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit db4a2ea

Browse files
jaspermdegrootjaspermdegroot
committed
Dialog: Added info and demo of option closeBtn to the docs.
1 parent 6fd28f9 commit db4a2ea

File tree

3 files changed

+68
-1
lines changed

3 files changed

+68
-1
lines changed

‎docs/pages/dialog-noclosebtn.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Dialog Example</title>
7+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
10+
<script src="../../js/jquery.js"></script>
11+
<script src="../../docs/_assets/js/jqm-docs.js"></script>
12+
<script src="../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page" data-close-btn="none">
18+
<div data-role="header">
19+
<h1>Dialog</h1>
20+
</div>
21+
22+
<div data-role="content">
23+
<h1>No close button</h1>
24+
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
25+
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Ok, I get it</a>
26+
</div>
27+
</div>
28+
29+
30+
</body>
31+
</html>

‎docs/pages/dialog-rightclosebtn.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Dialog Example</title>
7+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
10+
<script src="../../js/jquery.js"></script>
11+
<script src="../../docs/_assets/js/jqm-docs.js"></script>
12+
<script src="../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page" data-close-btn="right">
18+
<div data-role="header">
19+
<h1>Dialog</h1>
20+
</div>
21+
22+
<div data-role="content">
23+
<h1>Right close button</h1>
24+
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
25+
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Ok, I get it</a>
26+
</div>
27+
</div>
28+
29+
30+
</body>
31+
</html>

‎docs/pages/dialog/index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ <h2>Dialog</h2>
3535
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
3636
</ul>
3737

38-
<p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page. If the dialog has a header the framework will also add a close button at the left side of the header.</p>
38+
<p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page. By default the framework will also add a close button if the dialog has a header.</p>
3939

4040
<p>
4141
<code>
@@ -63,6 +63,11 @@ <h2>Transitions</h2>
6363

6464
<h2>Closing dialogs</h2>
6565
<p>When any link is clicked within a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. Nevertheless, dialogs can also be chained, as explained below under <strong>"Chaining Dialogs"</strong>. Similarly, a link that opens a popup will also leave the dialog in place.</p>
66+
67+
<p>If the dialog has a header the framework will add a close button at the left side of the header. You can change the position by adding <code>data-close-btn="right"</code> to the dialog container. If you don't want a close button in the header or add a custom close button, you can use <code>data-close-btn="none"</code>.</p>
68+
<a href="../dialog-rightclosebtn.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Right close button</a>
69+
<a href="../dialog-noclosebtn.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">No close button</a>
70+
6671
<p>To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the <code>data-rel="back"</code> attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.</p>
6772
<p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-rel="back"</code> attribute. You can also call the dialog's <code>close()</code> method to programmatically close dialogs, for example: <code>$('.ui-dialog').dialog('close')</code>. </p>
6873

0 commit comments

Comments
 (0)