Permalink
Browse files

Dialog: Added info and demo of option closeBtn to the docs.

  • Loading branch information...
jaspermdegroot committed Dec 4, 2012
1 parent 6fd28f9 commit db4a2ea935babb1bd4aa99f5cd9e5254ef2719ce
Showing with 68 additions and 1 deletion.
  1. +31 −0 docs/pages/dialog-noclosebtn.html
  2. +31 −0 docs/pages/dialog-rightclosebtn.html
  3. +6 −1 docs/pages/dialog/index.html
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Dialog Example</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" data-close-btn="none">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h1>No close button</h1>
<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>
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Ok, I get it</a>
</div>
</div>
</body>
</html>
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Dialog Example</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" data-close-btn="right">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h1>Right close button</h1>
<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>
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Ok, I get it</a>
</div>
</div>
</body>
</html>
@@ -35,7 +35,7 @@ <h2>Dialog</h2>
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<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>
<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>
<p>
<code>
@@ -63,6 +63,11 @@ <h2>Transitions</h2>
<h2>Closing dialogs</h2>
<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>
<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>
<a href="../dialog-rightclosebtn.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Right close button</a>
<a href="../dialog-noclosebtn.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">No close button</a>
<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>
<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>

0 comments on commit db4a2ea

Please sign in to comment.