• Choose a category
• All
• Classic-Fiction

This is a simple, but fairly crude way to handle the button events. In Chapter 9, we’ll look at how we can set up a custom event handling system. The advantage of the method used here is that it’s extremely lightweight and targeted to our particular needs. But manually creating buttons and handling the related events would become tiring fairly quickly if you have many complicated dialogs to look after, so you’ll probably be interested in the jQuery UI Dialog widget.

jQuery UI Dialog

As you’d expect by now, the jQuery UI Dialog component is the complete bells and whistles version of a dialog box. Out of the box it is draggable and resizable, can be modal or non-modal, allows for various transition effects, and lets you specify the dialog buttons programmatically. A sample dialog, styled with the UI lightness theme, is shown in Figure 7.9.

Figure 7.9. A jQuery UI dialog

Just like with our custom dialog box, the main contents are specified in the HTML itself, then hidden and displayed as necessary by the library. This way you can put whatever you like inside the dialog—including images, links, or forms:

chapter_07/18_jquery_ui_dialog/index.html (excerpt)

We’re using the UI lightness theme for CSS, as it matches up well with the StarTrackr! site—but the dialogs are fully skinnable, and as always you can make a custom theme with the ThemeRoller tool (more on this in the section called “Theme Rolling” in Chapter 9). As you can see from the HTML snippet, the title attribute specifies the text to be displayed in the title bar of the dialog. Other than that, there’s little going on in our HTML … so where do those buttons come from? Let’s have a look at the script:

chapter_07/18_jquery_ui_dialog/script.js (excerpt)

$('#dialog').dialog({

autoOpen: false,

height: 280,

modal: true,

resizable: false,

buttons: {

Continue: function() {

$(this).dialog('close');

// Submit Rating

},

'Change Rating': function() {

$(this).dialog('close');

// Update Rating

}

}

});

Aha, interesting! The buttons, including their text, are specified via the options passed to the dialog function.

The buttons are grouped together in an object and assigned to the buttons property of the dialog. To define a button, you need to create a named function inside the buttons object. The function code will execute whenever the user clicks the button—and the name of the function is the text that will be displayed on the button. If you want your button text to contain a space, you’ll need to wrap the function name in quotes. The buttons are added to the dialog from right to left, so make sure you add them in the order you want them displayed. This is quite a neat way to package together the button functions with the dialog—unlike our custom dialog where the functionality was specified independently of the dialog code.

Tip: Quotes

In the above example, the second button’s name is in quotes, while the first one isn’t. This is simply to illustrate the necessity of enclosing multiple-word buttons in quotes; in your code it might be preferable to put quotes around everything for consistency and simplicity.

By default, the dialog will pop up as soon as you define it. This makes it easy to create small and simple dialogs as you need them. For our example, though, we want to set up the dialog first, and only have it pop up on a certain trigger (when the user gives the poor celebrity a zero rating). To prevent the dialog popping up immediately, we set the autoOpen property to false. Now, when the page is loaded, the dialog sits and waits for further instructions.

When the user clicks the rating-0 link, we tell the dialog to display itself by passing the string 'open' to the dialog method. This is a good way to communicate with the dialog after the initialization phase:

chapter_07/18_jquery_ui_dialog/script.js