Docs: added examples of dynamic dialogs/popups #5105

Closed
wants to merge 4 commits into
from
@@ -10,6 +10,48 @@
<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){
+
+ /*
+ the dialog has not been generated yet and so we 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">'+
+ 'This is some dynamically generated text.'+
+ '</div>'+
+ '</div>'
+ );
+
+ $('#someDiv').dialog();
+ $.mobile.changePage('#someDiv', 'pop');
+
+ } else {
+
+ /*
+ 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 will change the content to something else.
+ $('#someDiv [data-role="header"] h1').html('Dynamic dialog opened again');
+ $.mobile.changePage('#someDiv', 'pop');
+ }
+ }
+ </script>
</head>
<body>
@@ -44,6 +86,68 @@ <h2>Dialog</h2>
</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>
+ <h3>Dynamic dialogs</h3>
+ <p>Knowing that we can call dialogs from within our page means 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
+ You can make a function to be called by an "onclick" for example or in this
+ case bind directly to a click event
+*/
+
+$('#dynamicDialogButton').click(function(){
+
+ // Check to see if the dialog has already been created
+
+ if($('#someDiv').length != 1){
+
+ /*
+ the dialog has not been generated yet and so we 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');
+
+ } else {
+
+ /*
+ 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 will change the content to something else.
+ $('#someDiv [data-role="header"] h1').html('Dynamic dialog opened again');
+ $.mobile.changePage('#someDiv', 'pop');
+ }
+});
+</code></p></pre>
+ <p>Here all we've done is bind a function to a click of the button/link and checked to see if the dialog already exists, if it does we change the header value and re-show it and if it doesn't we first create the appropriate markup, call the <code>dialog()</code> method on the element and then display it.</p>
+ <a href="" data-role="button" data-inline="true" onclick="generateDynamicDialog()">Open dynamic dialog</a>
@@ -147,5 +251,20 @@ <h3>More in this section</h3>
</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>
@@ -10,6 +10,51 @@
<script src="../../../js/jquery.js"></script>
<script src="../../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
+ <script type="text/javascript">
+ function generateDynamicPopup(){
+ // Check to see if the dialog has already been created
+
+ if($('#someDiv').length != 1){
+
+ /*
+ the Popup has not been generated yet and so we add it to the DOM
+ then call the popup() method to add all the correct
+ CSS and HTML markup and then "open" popup.
+ */
+
+ /*
+ It is important to add the popup markup to a "page" as
+ otherwise the screen-element will not
+ detect a click/touch to close the popup
+ */
+ $('div[data-role="page"]').append(
+ '<div id="someDiv" class="ui-content" >'+
+ '<div data-role="header" data-theme="d">'+
+ '<h3>Popup Title</h3>'+
+ '</div>'+
+ '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>'+
+ '<p>This is some dynamically generated Popup text.</p>'+
+ '</div>'
+ );
+
+
+ // Initialize the close button as a jQM button
+ $('#someDiv [data-rel="back"]').button();
+ // Initialize a the new content as a popup
+ $('#someDiv').popup();
+ // Open the popup
+ $('#someDiv').popup('open');
+
+ } else {
+ /*
+ Popup already present in the DOM so we can just open it again
+ but first we can demonstrate how to change the content.
+ */
+ $('#someDiv [data-role="header"]').html('<h3>A new title</h3>');
+ $('#someDiv').popup('open');
+ }
+ }
+ </script>
</head>
<body>
@@ -151,7 +196,7 @@ <h3 class="ui-title">Are you sure you want to delete this page?</h3>
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img class="popphoto" src="../../_assets/images/colorful-city.jpg" alt="Colorful city">
</div>
- <h3>Advanced popup techniques</h3>
+ <h2>Advanced popup techniques</h2>
<p>Learn how to customize and extend popups by working with the API, custom scripts, and styles.</p>
<a href="popup-images.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Scaling images</a>
<a href="popup-iframes.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Map + video iframes</a>
@@ -203,6 +248,58 @@ <h2>Closing popups</h2>
<p>I have a close button at the top left corner with simple HTML markup.</p>
</div>
+ <h2>Dynamic popups</h2>
+ <p>In a similar way to creating dynamic <a href="../dialog/index.html">dialogs</a>, you can also create popups dynamically. Below we add an <code>onclick</code> handler to the button to call our <code>generateDynamicPopup</code> function.</p>
+ <p>The button:-</p>
+ <code>&lt;a href=&quot;&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot; onclick=&quot;generateDynamicPopup()&quot;&gt;Dynamic Popup&lt;/a&gt;</code>
+ <p> The function it calls:-</p>
+ <pre><p><code>
+function generateDynamicPopup(){
+ // Check to see if the dialog has already been created
+ if($('#someDiv').length != 1){
+
+ /*
+ the Popup has not been generated yet and so we add it to the DOM
+ then call the popup() method to add all the correct
+ CSS and HTML markup and then "open" popup.
+ */
+
+ /*
+ It is important to add the popup markup to a "page" as
+ otherwise the screen-element will not
+ detect a click/touch to close the popup.
+ */
+ $('div[data-role="page"]').append(
+ '&lt;div id=&quot;someDiv&quot; class=&quot;ui-content&quot; &gt;'+
+ '&lt;div data-role=&quot;header&quot; data-theme=&quot;d&quot;&gt;'+
+ '&lt;h3&gt;Popup Title&lt;/h3&gt;'+
+ '&lt;/div&gt;'+
+ '&lt;a href=&quot;#&quot; data-rel=&quot;back&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot; data-icon=&quot;delete&quot; data-iconpos=&quot;notext&quot; class=&quot;ui-btn-right&quot;&gt;Close&lt;/a&gt;'+
+ '&lt;p&gt;This is some dynamically generated Popup text.&lt;/p&gt;'+
+ '&lt;/div&gt;'
+ );
+
+
+ // Initialize the close button as a jQM button
+ $('#someDiv [data-rel="back"]').button();
+ // Initialize a the new content as a popup
+ $('#someDiv').popup();
+ // Open the popup
+ $('#someDiv').popup('open');
+
+ } else {
+ /*
+ Popup already present in the DOM so we can just open it again
+ but first we can demonstrate how to change the content.
+ */
+ $('#someDiv [data-role="header"]').html('&lt;h3&gt;A new title&lt;/h3&gt;');
+ $('#someDiv').popup('open');
+ }
+}
+ </code></p></pre>
+
+ <a href="" data-role="button" data-inline="true" onclick="generateDynamicPopup()">Dynamic Popup</a>
+
<h2>Adding padding</h2>
<p>For popups with formatted text, padding is needed. We recommend adding the <code>ui-content</code> class to the popup container which adds the standard 15px of padding, just like the page content container. Write your own styles to create a more customized design if needed.</p>