jQuery UI Dialog. user manual

In this article we will explain what the jQuery User Interface Dialog is and provides.

In this article we will talk about:

• What is and what does the jQuery User Interface Dialog provide?
• The essential components for its implementation in a web page
• Opening a dialog on demand
• Implementation of modal and amodal dialogs
• Application of custom styles
• Inclusion of close command buttons and others
• How to set your custom dimensions
• Using the dialog as a simple form
• Visual effects during presentation and removal

What is the jQuery User Interface Dialog?

Within the jQuery User Interface we find a whole series of programming elements of the user interface pre-programmed and ready to be integrated into our HTML projects. It is an extensive JavaScript library that covers everything from dynamic effects to menus, calendars, dialogs, etc.

The Internet reference and download site for the Dialog component, which is what we will discuss, is:

The capacities that it will provide us will be reeled off in the successive epigraphs, at vuelapluma they are:

• A resizable amodal basic dialog box
• The possibility of making it modal and open on demand
• Personal adaptation to predefined or more customized styles
• The complete conversion to a user input box, i.e. to a form

A first basic dialogue

Our first example will not be very ambitious, it is about illustrating a simple dialog that will open when the page is loaded, with a message inside and no additional functionality.

The code is that of Listing 1 and will be discussed below.

Listing 1: Code for a simple dialog

Dialog:

If we review the code we find, in sequential order:

Modal and amodal dialogues. Open on demand

The presentation of dialogs can be of two types:

• Modal: It will capture the input focus, so that we must attend to what is required in the dialog before being able to access other elements of the main window. Normally it is the behavior that we will want.
• Amodal: It will not capture the input focus in exclusive mode, so that we can access, for example, the main window and ignore what is required in the dialog. Note that, surprisingly, this is the default option in jQuery User Interface Dialog components.

In Listing 2 we see that to pass the dialog to a modal, without further ado, we have to specify said property in its construction:

modal: true;

On the other hand, to open a dialog on demand, which will be what we usually want, we have to specify:

Listing 2: Code a simple modal dialog

Dialog:

Open Dialog

Add a close button

Although closing a dialog can always be done by clicking on the ‘X’ button for closing a generic window, it is more elegant to display a button for such a function.

For this we use two functionalities, add buttons and close windows using JavaScript code:

• Using the buttons property we create a button with a specific label and a response function when clicked. We could thus create several, as we will see in the Dialog for simple form section, at the end of the article.

• To close the window, we make a call to the close function, with the code:
  
  $(this).dialog(“close”);

Listing 3: A simple dialog with a command button to close it

Dialog:

Open Dialog

Dialog with custom dimensions

So far, the dialogs shown are with dimensions predefined by the system, we will see how to define their dimensions ourselves.

We have opted for a modification on the fly, at the moment of creating the dialog, not in its definition, prior to its opening, as can be seen in Listing 4.

The properties to set are width and height, as shown in the portion of code that follows:

.click(function () { $(“#dialog”).dialog(“option”, “width”, 600); $(“#dialog”).dialog(“option”, “height”, 300); $ (“#dialog”).dialog(“open”); });

Listing 4 shows the complete example of a modal dialog, with fixed dimensions and a button to close it.

Listing 4: Simple modal dialog, with close button and fixed dimensions

Dialog:

Open Dialog

To make it non-resizable, with static dimensions, it will suffice to set the resizable property to false, as for example in the code portion that follows:

.click(function () { $(“#dialog”).dialog(“option”, “width”, 600); $(“#dialog”).dialog(“option”, “height”, 300); $ (“#dialog”).dialog(“option”, “resizable”, false); $(“#dialog”).dialog(“open”); });

playing with the styles

So far we’ve worked with references to the User Interface hosted on the jQuery forum; In this way we have a very comfortable and relatively efficient way to create the Dialogs, but not to customize their styles, since we work with a default one –a specific referenced CSS, given by the jQuery User Interface administrator-.

However, the jQuery User Interface itself has numerous predesigned styles ready to be used on demand; but for this we must download them and work with them and reference them locally -on the server itself-.

We can download the complete jQuery User Interface, which includes Dialog, the URL is:

In this download process, at the bottom we will find the Theme section, by displaying the list we can select the style of the Dialog to be downloaded. Actually, depending on what we have previously selected, it is the style –the theme- of the jQuery User Interface components that we will download.

That’s where the corresponding CSS and particular image directories are pulled from.

Note: In our example we have renamed the downloaded CSS file in order to be able to work with different styles, adding the style name and loading it locally –see the corresponding reference in the list-.

Working locally, we must also copy the corresponding images directory in each case and if we want to be able to vary the styles, give each of the styles a particular name –for example images_sunny- and change the references in the corresponding CSS file.

Listing 5: Modal dialog with a custom Sunny style

Dialog:

Open Dialog

To change all the style for another one predefined in the jQuery User Interface forum, just download the code again and change the style sheet (and the images directory) for the new one.

If what we want is to partially retouch a predefined style, we go to modify the styles of the style sheet -CSS file- downloaded, or with another complementary CSS file and later referenced in the HTML file -to respect the order of priority of the cascade styles-, either through inline styles in the HTML document itself.

Let’s notice the little style code where we’ll alter the background color of…