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

jquery-archive · Dec 4, 2012 · db4a2ea · db4a2ea
1 parent 6fd28f9
commit db4a2ea
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 1 deletion.
diff --git a/docs/pages/dialog-noclosebtn.html b/docs/pages/dialog-noclosebtn.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>
diff --git a/docs/pages/dialog-rightclosebtn.html b/docs/pages/dialog-rightclosebtn.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>
diff --git a/docs/pages/dialog/index.html b/docs/pages/dialog/index.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>