Permalink
Browse files

Dynamic Dialog and popup examples for Docs

  • Loading branch information...
1 parent 2b0e633 commit e2a6e282e4ebcf72a9f3a6b149cac791c6104f1f RobSchmuecker committed Sep 28, 2012
Showing with 169 additions and 47 deletions.
  1. +71 −46 docs/pages/dialog/index.html
  2. +98 −1 docs/pages/popup/index.html
@@ -13,32 +13,43 @@
<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>'
- );
+
+ 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');
- $('#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>
@@ -84,27 +95,28 @@ <h2>Dialog</h2>
</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>
+ <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 fot the "onclick" or in this case bind directly to a click event
+/*
+ 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){
- /* 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(
+ // 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;'+
@@ -114,14 +126,27 @@ <h2>Dialog</h2>
'This is some dynamically generated text.'+
'&lt;/div&gt;'+
'&lt;/div&gt;'
- );
+ );
$('#someDiv').dialog();
- $.mobile.changePage('#someDiv', 'pop');
+ $.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>
@@ -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>

0 comments on commit e2a6e28

Please sign in to comment.