jQuery UI—The Dialog: Part 2
In the previous part of the article, we learned how to create a basic dialog, work with dialog’s properties and
callbacks, and add buttons to the dialog. In this final part of the article by Dan Wellman, we will learn how
to enable animations for the dialog and how to control the dialog
programmatically.
Using dialog animations
The dialog provides us with built-in effect abilities and also allows us to
specify effects to use when the dialog is opened or closed. Using these effects
is extremely easy and gives a great visual flair. Let’s look at how these
effects can be enabled. Create the following new page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.dialog.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.resizable.css">
<link rel="stylesheet" type="text/css" href="styles/dialogTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Dialog Example 6</title>
</head>
<body>
<div id="myDialog" class="flora" title="This is the title">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat
ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam
tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis
tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse
potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus.
Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt
viverra felis. Integer elit mauris, egestas ultricies, gravida vitae,
feugiat a, tellus.</div>
<script type="text/javascript" src="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.dialog.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.resizable.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.draggable.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define config object
var dialogOpts = {
hide: true
};
//create the dialog
$("#myDialog").dialog(dialogOpts);
});
</script>
</body>
</html>
Save this as dialog6.html. In this example, our configuration object
contains just one property—the hide property. The hide property
accepts the boolean true as its value. This enables the built-in hide effect, which gradually reduces the dialog’s size and opacity until
it gracefully disappears.
We can also enable the show effect, which is the opposite of the hide animation. However, at this stage in the component’s development,
this causes a slight issue with its display. The following screenshot shows the hide effect in progress:
Controlling a dialog programmatically
The dialog requires few methods in order to function. As implementers, we can
easily open, close, or destroy the dialog at will. The full list of methods we
can call on a dialog instance are as follows:
|
Method |
Used |
|
close |
Closes |
|
destroy |
Permanently |
|
isOpen |
Determines |
|
moveToTop |
Moves |
|
open |
Opens |
Let’s look at opening and closing the widget, which can be achieved with the
simple use of the open and close methods. Create the following new
page in your text editor:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.dialog.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.resizable.css">
<link rel="stylesheet" type="text/css" href="styles/dialogTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Dialog Example 7</title>
</head>
<body>
<div id="myDialog" class="flora" title="This is the title">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat
ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam
tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis
tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse
potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus.
Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt
viverra felis. Integer elit mauris, egestas ultricies, gravida vitae,
feugiat a, tellus.</div>
<button id="openDialog">Open the Dialog!</button>
<script type="text/javascript" src="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.dialog.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.resizable.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.draggable.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define doOk function
var doOk = function() {
//close the dialog
$("#myDialog").dialog("close");
}
//define config object
var dialogOpts = {
modal: true,
overlay: {
background: "url(img/modal.png) repeat"
},
buttons: {
"Ok!": doOk
},
height: "400px",
autoOpen: false
};
//create the dialog
$("#myDialog").dialog(dialogOpts);
//define click handler for the button
$("#openDialog").click(function() {
//open the dialog
$("#myDialog").dialog("open");
});
});
</script>
</body>
</html>
The open and close methods require no additional arguments and
do exactly as they say, pure and simple. Save the file as dialog7.html.
The destroy method for a dialog works in a slightly different way than
it does for the other widgets we’ve seen so far. Instead of returning the
underlying HTML to its original state, the dialog’s destroy method
completely disables the widget, hiding its content in the process. Change dialog7.html to make use of the destroy method:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.dialog.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.resizable.css">
<link rel="stylesheet" type="text/css" href="styles/dialogTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Dialog Example 8</title>
</head>
<body>
<div id="myDialog" class="flora" title="This is the title">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat
ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam
tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis
tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse
potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus.
Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt
viverra felis. Integer elit mauris, egestas ultricies, gravida vitae,
feugiat a, tellus.</div>
<button id="openDialog">Open the Dialog!</button>
<button id="destroy">Destroy the dialog!</button>
<script type="text/javascript" src="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.dialog.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.resizable.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.draggable.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define doOk function
var doOk = function() {
//close the dialog
$("#myDialog").dialog("close");
}
//define config object
var dialogOpts = {
modal: true,
overlay: {
background:"url(img/modal.png) repeat"
},
buttons: {
"Ok!": doOk
},
height: "400px",
autoOpen: false
};
//create the dialog
$("#myDialog").dialog(dialogOpts);
//define click handler for the button
$("#openDialog").click(function() {
//open the dialog
$("#myDialog").dialog("open");
});
//define click handler for destroy
$("#destroy").click(function() {
//destroy dialog
$("#myDialog").dialog("destroy");
});
});
</script>
</body>
</html>
Save the changes as dialog8.html and try out the new file. You’ll find
that you can open and close the dialog as many times as you want until the Destroy the dialog! button is clicked. After this, the dialog will no
longer appear (although it will still exist in the DOM). To fully remove the
dialog mark-up from the page, we can simply chain the remove jQuery
method onto the end of the destroy method call.
 |
Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library
http://www.packtpub.com/user-interface-library-for-jquery/book |
Getting data from the dialog
Because the widget is a part of the underlying page, passing data to and from
it is extremely simple. The dialog can be treated as any other standard element
on the page. Let’s look at a basic example. Create the following new page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.dialog.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.resizable.css">
<link rel="stylesheet" type="text/css" href="styles/dialogTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Dialog Example 9</title>
</head>
<body>
<p>Answer the opinion poll:</p>
<button id="poll">Poll</button>
<div id="myDialog" class="flora" title="This is the title">
<p>Is jQuery UI the greatest JavaScript extensions library in the universe?</p>
<label for="yes">Yes!</label><input type="radio" id="yes" value="yes" name="question"><br>
<label for="no">No!</label><input type="radio" id="no" value="no" name="question">
</div>
<script type="text/javascript" src="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.dialog.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.resizable.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.draggable.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define cancel button function
var cancel = function() {
//close the dialog
$("#myDialog").dialog("close");
}
//define done button function
var getResponse = function(){
var answer;
$("input").each(function(){
(this.checked == true) ? answer = $(this).val() : null;
});
$("<p>").text("Thanks for selecting " + answer).insertAfter($("#poll"));
$("#myDialog").dialog("close");
}
//define config object
var dialogOpts = {
modal: true,
overlay: {
background: "url(img/modal.png) repeat"
},
buttons: {
"Done": getResponse,
"Cancel": cancel
},
autoOpen: false
};
//create the dialog
$("#myDialog").dialog(dialogOpts);
//define click handler for poll button
$("#poll").click(function() {
//open the dialog
$("#myDialog").dialog("open");
});
});
</script>
</body>
</html>
Save this as dialog9.html. Our dialog contains a set of radio buttons, <label> elements, and some text. The purpose of the example is to
get the result of whichever radio is selected, and then do something with it
when the dialog closes.
We start the <script> off by creating the cancel function, which will be attached as the value of the cancel property in
the buttons object later in the script. It will therefore be executed
each time the Cancel <button> is clicked.
Next, we define the getResponse function, which again will be attached
to a <button> on the dialog using the buttons configuration object. In this function, we determine which radio is selected,
then create and append to the page a new <p> element with a brief
message and the value of the radio that was selected.
Once these two functions have been defined, we create a configuration object
as before. The dialog is initially hidden from view, and we use the open method to show the dialog when the Poll <button> is
clicked.
The following screenshot shows how the page should appear once a radio button
has been selected:
Fun with dialog
The class behind the dialog widget is compact and is catered to a small range
of specialized behavior, much of which we have already looked at. We can still
have some fun with the dialog widget however, and could, for example, easily
create an AJAX dialog which gets its content from a remote file when it is
opened. In a new page in your text editor, add the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.dialog.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.resizable.css">
<link rel="stylesheet" type="text/css" href="styles/ajaxDialogTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI AJAX Dialog Example</title>
</head>
<body>
<div id="ajaxDialog" class="flora"></div>
<div class="content">
<h3>Section 1</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat
ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam
tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis
tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse
potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus.
Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt
viverra felis. Integer elit mauris, egestas ultricies, gravida vitae,
feugiat a, tellus.</p>
<p class="helpLabel">For help about this section, click here:
</p><span id="help1" class="helpIcon"></span>
</div>
<div class="content">
<h3>Section 2</h3>
<p>Lorem ipsum...</p>
<p class="helpLabel">For help about this section, click here:
</p><span id="help2" class="helpIcon"></span>
</div>
<script type="text/javascript" src="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.dialog.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.resizable.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.draggable.js"></script>
</body>
</html>
Now add the following <script> block directly before the
closing </body> tag:
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//control variable
var help = 0;
//define doOk function
var doOk = function() {
//close the dialog
$("#ajaxDialog").dialog("close");
}
//define config object
var dialogOpts = {
title: "Help!",
modal: true,
overlay: {
background: "url(img/modal.png) repeat"
},
buttons: {
"Ok!": doOk
},
height: "110px",
autoOpen: false,
open: function() {
//display correct dialog content
$("#ajaxDialog").load("helpContents" + (help == 1 ? 1 : 2) +
".html"); }
};
//create the dialog
$("#ajaxDialog").dialog(dialogOpts);
//define click handler for helpIcons
$(".helpIcon").click(function(event) {
//which icons was clicked?
event.target.id == "help1" ? help = 1 : help = 2;
//call open method
$("#ajaxDialog").dialog("open");
});
});
</script>
Save this as ajaxDialog.html. The dialog is similar to that of
previous examples, but the main differences are the open event handler
defined within the dialog’s configuration object, and the click handler
for the helpIcon elements.
When either of the helpIcon elements are clicked, the handler will
determine which icon it was, and set our control variable accordingly. The open method of the dialog is then called.
This will invoke the open event handler which reads the control
variable and then loads the appropriate external file into the dialog using the
standard jQuery load method. We’ll need a new stylesheet for this
example. In a new page in your text editor, add the following code:
* page styles */
h3 { margin-top:0px; }
.content {
border:1px solid #7eb8f8;
margin-bottom:10px; padding:10px;
position:relative;
}
.helpIcon {
position:absolute; right:5px; bottom:5px;
background:url(../img/QuestionMark.png) no-repeat;
cursor:pointer;
display:block; width:25px; height:25px;
}
.helpLabel {
width:100%; margin:0px;
position:relative; right:25px; top:-2px;
font:bold 60% Verdana, Arial; text-align:right;
}
/* dialog styles */
.flora .ui-dialog, .flora.ui-dialog {
background-color:#ffffff;
}
.flora .ui-dialog .ui-dialog-titlebar, .flora.ui-dialog
.ui-dialog-titlebar {
background:url(../img/dialog/my-title.gif) repeat-x;
background-color:#003399;
}
.flora .ui-dialog .ui-dialog-titlebar-close, .flora.ui-dialog
.ui-dialog-titlebar-close {
background:url(../img/dialog/my-title-close.gif) no-repeat;
}
.flora .ui-dialog .ui-dialog-titlebar-close-hover, .flora.ui-dialog
.ui-dialog-titlebar-close-hover {
background:url(../img/dialog/my-title-close-hover.gif) no-repeat;
}
.flora .ui-dialog .ui-resizable-n, .flora.ui-dialog .ui-resizable-n {
background:url(../img/dialog/my-n.gif) repeat center top;
}
.flora .ui-dialog .ui-resizable-s, .flora.ui-dialog .ui-resizable-s {
background:url(../img/dialog/my-s.gif) repeat center top;
}
.flora .ui-dialog .ui-resizable-e, .flora.ui-dialog .ui-resizable-e {
background:url(../img/dialog/my-e.gif) repeat right center;
}
.flora .ui-dialog .ui-resizable-w, .flora.ui-dialog .ui-resizable-w {
background:url(../img/dialog/my-w.gif) repeat left center;
}
.flora .ui-dialog .ui-resizable-ne, .flora.ui-dialog .ui-resizable-ne
{
background:url(../img/dialog/my-ne.gif) repeat;
}
.flora .ui-dialog .ui-resizable-se, .flora.ui-dialog .ui-resizable-se
{
background:url(../img/dialog/my-se.gif) repeat;
}
.flora .ui-dialog .ui-resizable-sw, .flora.ui-dialog .ui-resizable-sw
{
background:url(../img/dialog/my-sw.gif) repeat;
}
.flora .ui-dialog .ui-resizable-nw, .flora.ui-dialog .ui-resizable-nw
{
background:url(../img/dialog/my-nw.gif) repeat;
}
Many of these styles have been used in previous examples, but adding some new
rules for the other page elements lets us see the dialog in real-world context.
Save this as ajaxDialogTheme.css in the styles folder. Open the
page and click the help icon in the second section. The dialog, with its
correct content, should be displayed:
Help
Icon The icons used as help icons in this example were taken from
the ColorCons icon package by Ken Saunders, and can be found at http://mouserunner.com/Spheres_ColoCons1_Free_Icons.html.
Summary
In this final part of the article, we learned how to enable animations for
the dialog and how to control the dialog programmatically. We took a brief look
at the built-in opening and closing effects that can be used with the dialog,
before moving on to see the basic methods we can invoke in order to make the
dialog do things, such as open or close.
|
Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library
http://www.packtpub.com/user-interface-library-for-jquery/book |
Skype
Leave a Reply