Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Docs: added examples of dynamic dialogs/popups #5105

Closed
wants to merge 4 commits into from
Closed

Docs: added examples of dynamic dialogs/popups #5105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2055756
Added Dialog Doc examples
Sep 20, 2012
2684bb0
Amended comment of Dialog docs example
Sep 28, 2012
2b0e633
Merge branch 'master' into doc-changes
Sep 28, 2012
e2a6e28
Dynamic Dialog and popup examples for Docs
Sep 28, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
119 changes: 119 additions & 0 deletions docs/pages/dialog/index.html
View file
Open in desktop
Expand Up @@ -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>
Expand Down Expand Up @@ -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>



Expand Down Expand Up @@ -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>
99 changes: 98 additions & 1 deletion docs/pages/popup/index.html
View file
Open in desktop
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down