Dialog: Added info and example for option corners.

jquery-archive · Dec 4, 2012 · 7caa974 · 7caa974
1 parent c7cd508
commit 7caa974
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/docs/pages/dialog-corners.html b/docs/pages/dialog-corners.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-corners="false">
+		<div data-role="header">
+			<h1>Dialog</h1>
+		</div>
+
+		<div data-role="content">
+			<h1>No rounded corners</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
@@ -82,6 +82,9 @@ <h2>Styling &amp; theming</h2>
 			<p>Dialogs can be styled with different theme swatches, just like any page by adding <code>data-theme</code> attributes to the header, content, or footer containers. Here is an example of a different dialog design:</p>
 				<a href="../dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>
 
+			<p>By default dialogs have rounded corners. The option <code>corners</code> can be set to <code>false</code> by adding <code>data-corners="false"</code> to the dialog container:</p>
+				<a href="../dialog-corners.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">No rounded corners</a>
+
 			<p>Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch "a" content color by default, but the <code>data-overlay-theme</code> attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch "e":</p>
 				<a href="../dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a>