Web Development with jQuery®

(Elliott) #1

(^414) ❘ CHAPTER 17 DIALOG


}


});


$('input#exampleDialogOpen').click(
function(event)
{
event.preventDefault();

$('div#exampleDialog')
.dialog('open');
}
);
}
);

The preceding script demonstrates the attachment of the close and open options to the dialog, which
causes a callback function to be executed when the dialog is opened or closed. The callback function
is executed within the context of the dialog element it is attached to, making that element available
in the this keyword, as shown in Figure 17-6.

FIGURE 17-6


Summary


In this chapter, you learned how to implement a dialog using the jQuery UI Dialog plugin. The
Dialog plugin doesn’t come with much styling, so you learned how the markup is structured and
implemented your own styling for a dialog. An alternative and easier way of styling a dialog is to
also download and apply a jQuery UI theme from the http://www.jqueryui.com website.

http://www.it-ebooks.info

Free download pdf