Skip to content
Browse files

Added Dialog Doc examples

  • Loading branch information...
1 parent d6dfa4c commit 205575693680feda0ec09abaf27c404f37952485 RobSchmuecker committed Sep 20, 2012
Showing with 94 additions and 0 deletions.
  1. +94 −0 docs/pages/dialog/index.html
View
94 docs/pages/dialog/index.html
@@ -10,6 +10,37 @@
<script src="../../../js/jquery.js"></script>
<script src="../../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
+ <script type="text/javascript">
+ function generateDynamicDialog(){
+ // Check to see if the dialog has already been created
+ if($('#someDiv').length == 1){
+ /* we have already created the dialog and hence don't want to add
+ another one with the same ID into the DOM so we will just change any details we want
+ and then change to the dialog with the $.mobile.changePage() method.
+ */
+
+ //We can change the content too
+ $('#someDiv [data-role="header"] h1').html('Dynamic dialog opened again');
+ $.mobile.changePage('#someDiv', 'pop');
+
+ } else {
+ // the dialog has not been generated yet and so we will add it to the DOM, then call the jQuery Mobile dialog() method to add all the correct CSS and HTML markup and then "change" to the dialog page.
+ $('body').append(
+ '<div id="someDiv" data-role="dialog">'+
+ '<div data-role="header" data-theme="d">'+
+ '<h1>Dialog</h1>'+
+ '</div>'+
+
+ '<div data-role="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>'+
+ '</div>'
+ );
+
+ $('#someDiv').dialog();
+ $.mobile.changePage('#someDiv', 'pop');
+
+ }
+ }
+ </script>
</head>
<body>
@@ -44,6 +75,54 @@
</p>
<a href="../dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
+
+ <p>Just like any other page in the <a href="../multipage-template.html">multi-page template</a>, dialogs can also be called from within the same page. </p>
+
+ <p>
+ <code>
+ &lt;a href=&quot;#someDialog&quot; data-rel=&quot;dialog&quot;&gt;Open dialog&lt;/a&gt;
+ </code>
+ </p>
+ <a href="#internalDialog" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open same page dialog</a>
+
+ <p>Knowing this we can easily generate dynamic dialogs without having to have/know the markup ahead of time. An example of how this could be achieved is shown below</p>
+ <pre><p><code>
+//Javascript
+//Make function or in this case bind to a click event
+$('#dynamicDialogButton').click(function(){
+
+// Check to see if the dialog has already been created
+if($('#someDiv').length == 1){
+ /* we have already created the dialog and hence don't want to add
+ another one with the same ID into the DOM so we will just change any details we want
+ and then change to the dialog with the $.mobile.changePage() method.
+ */
+
+ //We can change the content too
+ $('#someDiv [data-role="header"] h1').html('Dynamic dialog opened again');
+ $.mobile.changePage('#someDiv', 'pop');
+
+} else {
+ // the dialog has not been generated yet and so we will add it to the DOM, then call the jQuery Mobile dialog() method to add all the correct CSS and HTML markup and then "change" to the dialog page.
+ $('body').append(
+ '&lt;div id="someDiv" data-role="dialog"&gt;'+
+ '&lt;div data-role="header" data-theme="d"&gt;'+
+ '&lt;h1&gt;Dialog&lt;/h1&gt;'+
+ '&lt;/div&gt;'+
+
+ '&lt;div data-role="content"&gt;'+
+ 'This is some dynamically generated text.'+
+ '&lt;/div&gt;'+
+ '&lt;/div&gt;'
+ );
+
+ $('#someDiv').dialog();
+ $.mobile.changePage('#someDiv', 'pop');
+
+}
+});
+</code></p></pre>
+ <a href="" data-role="button" data-inline="true" onclick="generateDynamicDialog()">Open dynamic dialog</a>
@@ -146,5 +225,20 @@
</div><!-- /page -->
+<div id="internalDialog" data-role="page">
+
+ <div data-role="header" data-theme="d">
+ <h1>Internal Dialog</h1>
+
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="c">
+ <h1>Delete page?</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="dialog/index.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>
+ <a href="dialog/index.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>
+ </div><!-- /content -->
+ </div><!-- /page -->
+
</body>
</html>

0 comments on commit 2055756

Please sign in to comment.
Something went wrong with that request. Please try again.