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 to |
|
close |
Closes or hides the dialog |
|
destroy |
Permanently disables the dialog |
|
isOpen |
Determines whether a dialog is open or not |
|
moveToTop |
Moves the specified dialog to the top of the stack |
|
open |
Opens the dialog |
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.
