Adding actions to the dialog title

By default, the dialog widget provides the user with one action that doesn't require developer intervention—the close button in the title bar. This is a universal action that applies to almost any dialog, as users would expect to be able to close them. Additionally, it isn't by accident that the close dialog action button is an icon positioned in the top-right corner of the dialog. This is a standard location and action in graphical windowing environments as well, in addition to other actions. Let's take a look at how we might go about extending the actions placed in the title bar of the dialog widget.

How to do it...

For this demonstration, we only need the following basic dialog HTML:

<div id="dialog" title="Dialog Title">
    <p>Basic dialog content</p>
</div>

Next, we'll implement our dialog specialization that adds a new option and some code that creates a new dialog instance using that option:

(function( $, undefined ) {

$.widget...