The tutorial for today will be on making floating dialog windows using the jQuery library. Before jQuery, doing a simple floating dialog window would have taken an enormous amount of code, and also an enormous amount of effort to work. With the advent of jQuery, this task has been made much easier. This tutorial will assume that you have at least basic knowledge of using Javascript and jQuery. Before everything else, we will need the following libraries for our tutorial:
In this tutorial, I’ll be making a save preferences form as an example
First of all, we need to have our save settings form. Lets label it as #layer1_form (id = “layer1_form”) :
<form id="layer1_form" method="post" action="save_settings.php">
Display Settings<br />
<input type="radio" name="display" checked="checked"
value="Default" />
Default<br />
<input type="radio" name="display" value="Option A" />
Option A<br />
<input type="radio" name="display" value="Option B" />
Option B<br /><br />
Autosave settings<br />
<input type="radio" name="autosave" checked="checked"
value="Enabled" />
Enabled<br />
<input type="radio" name="autosave" value="Disabled" />
Disabled<br /><br />
<input type="submit" name="submit" value="Save" />
</form>
basically in our sample, we have 2 settings for the display and auto-save settings. However, since we need show this form in a floating dialog, we must wrap this form on a floating layer. Let’s call this floating layer #layer1 (id = “layer1″).
We also need to define a handle where our window can be clicked to be dragged for our interface plugin. We’ll call our handle #layer1_handle (id = “layer1_handle”).
As with any floating dialogs, we also need a close button. For simplicity, I’ll just use a link named #close (id = “close”). You can also use buttons or images if you want.
Here is what our form would look like:
<div id="layer1">
<div id="layer1_handle">
<a href="#" id="close">[ x ]</a>
Preferences
</div>
<div id="layer1_content">
<form id="layer1_form" method="post" action="save_settings.php">
Display Settings<br />
<input type="radio" name="display" checked="checked"
value="Default" />
Default<br />
<input type="radio" name="display" value="Option A" />
Option A<br />
<input type="radio" name="display" value="Option B" />
Option B<br /><br />
Autosave settings<br />
<input type="radio" name="autosave" checked="checked"
value="Enabled" />
Enabled<br />
<input type="radio" name="autosave" value="Disabled" />
Disabled<br /><br />
<input type="submit" name="submit" value="Save" />
</form>
</div>
</div>
For our backend, we’ll simply print out the options that were selected on the form for simplicity. We’ll call our backend save_settings.php
save_settings.php
<b>Preferences:</b><br />
Display Setting:
<?php echo htmlspecialchars($_POST['display'], ENT_QUOTES); ?><br />
Autosave Setting:
<?php echo htmlspecialchars($_POST['autosave'], ENT_QUOTES); ?><br />
Now that we have defined our form and our backend, the next step will me indicating where we would output the AJAX response. Let’s create a new container called #content. It will contain the button for setting the preferences and will be replaced by the AJAX response when the form action is successful:
<div id="content"><input type="button" id="preferences"
value="Edit Preferences" /></div>
Now that we have defined our form, its time to implement the jQuery functions. First of all, we need to import the libraries by defining the javascript libraries within the <head> of our document:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
To load our functions after the DOM has rendered, we must declare the jQuery functions under $(document).ready function of our script inside the <body> of our document:
<script type="text/javascript">
$(document).ready(function()
{
//jQuery events go here
}
<script>
Now lets define the #layer1 wrapper of our form as a draggable window with a z-index of 20, and an opacity of 0.7 when being dragged:
$('#layer1').Draggable(
{
zIndex: 20,
ghosting:false,
opacity: 0.7,
handle: '#layer1_handle'
}
);
and to hide the floating window, we just hide the wrapper, in our case, we need to hide #layer1:
$("#layer1").hide();
and to display our floating dialog when the edit preferences button is clicked:
$('#preferences').click(function()
{
$("#layer1").show();
});
and to hide the form once again when #close is clicked
$('#close').click(function()
{
$("#layer1").hide();
});
And finally to define our form as an AJAX form, we need to define #content as the target container where the AJAX response will show. We also need to automatically close the floating dialog window on success:
$('#layer1_form').ajaxForm({
target: '#content',
success: function()
{
$("#layer1").hide();
}
});
To view the working demo of this tutorial, just click on the links below
