In Part 1 of using the JQuery UI, I discussed how to customize and download all the compenents. In Part 2, I will discuss the using the UI widgets, specifically the UI dialog. Before you can use the UI dialog, you must first download the necessary files. Read Part 1 to learn more about downloading the file. I’m using a minified version of the JQuery UI widgets, to include a custom Theme. Remember from Part 1, that the customized build includes ui.core.js and other relevant files:
<link rel="stylesheet" type="text/css" href="js/jquery/jquery-ui/css/jquery-ui-1.7.2.css"><script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script> |
Initializing the UI dialog is simple. First create a container to hold the dialog:
<div id="container" title="My Title"> |
Then add code in the header section of your web page:
$(document).ready(function() {
$('#container').dialog();
}); |
I can also add options to the dialog:
$('#container').dialog(
autoOpen: false,
modal: true,
width: 600,
buttons: {
"OK": function() {
//do something;
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
},
show: 'drop',
bgiframe: true
); |
autoOpen: When set to true (the default), the dialog will appear when it is initialized. When set to false, the dialog will appear when dialog(‘open’) is called.
modal: If set to true, the all items below the dialog will be disabled. Modal dialogs create an overlay below the dialog but above other page elements.
buttons: Use the buttons option to add buttons to the dialog and create events for each.
show: There are many effects that can be applied to the dialog. In the example above, the ‘drop’ effect has been added. This will caused the dialog to drop into place on open. To view other effects, go to the UI Demo page.
bgiframe: When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.
Click here to view more options for the UI dialog.
As you can see, the UI Dialog is quite easy to use.
Note: Make sure that you initialize dialog button outside the button’s click event. In other words, don’t do this:
$('#button').click(function() {
$('#container').dialog();
}) |
While this will display the dialog, it will not display again after it has been closed. So do this instead:
$('#container').dialog({autoOpen: false});
$('#button').click(function() {
$('#container').dialog(open);
}) |
Enjoy.
To create...