jQuery UI Dialogbar

This widget serves as a sort of task bar for closed dialog widgets. This is useful if you have several dialogs, with no obvious place to put them when closed.

by Adam Boduch

HTML

<div id="dialog1" title="First Dialog">Test</div>
<div id="dialog2" title="Second Dialog">Test2</div>
<div id="dialogbar"></div>

CSS

body {
    font-size: 0.8em;
}

.ui-dialogbar {
    position: fixed;
    bottom: 2px;
    padding: 0.2em;
}

.ui-dialogbar a {
    border-left: none;
    border-right: none;
    border-top: none;
    background: none;
    margin: 0 0.4em;
}

JavaScript

(function( $ ) {
    
    // Classes applied to the dialogbar widget element.
    var classes = [
        "ui-dialogbar",
        "ui-widget",
        "ui-state-default",
        "ui-corner-top"        
    ];
    
    // Declares the new widget in our own namespace.
    $.widget( "app.dialogbar", {
        
        // Our options. We can tell the dialogbar which dialog widgets
        // we care about.
        options: {
            dialogs: $()
        },
        
        _create: function() {
            
            // Call the default widget constructor.
            this._super();
            
            // Apply our classes to the widget element.
            this.element.addClass( classes.join( " " ) );
            
            // Listen to dialog close events, but only for dialog
            // widgets in the "dialogs" option for this widget.
            this._on( this.options.dialogs, {
                "dialogclose": "_ondialogclose"    
            });
            
            // Listen for click events inside this widget.
            this._on( this.element, {
                "click a": "_onclick"
            });
            
            this._hideIfEmpty();
            
        },
        
        // Clean up our added elements and classes when destroyed.
        _destroy: function() {
            this._super();
        },
        
        _ondialogclose: function( e, ui ) {
            
            // Get the title of the closed dialog, and it's index relative to the
            // "dialogs" option of this widget.
            var title = $( e.currentTarget ).dialog( "option", "title" ),
                index = this.options.dialogs.index( e.currentTarget );
            
            // Add the dialog link to the dialog bar.
            this._hoverable( $( "<a/>" ).attr( "href", "#" )
                       .data( "dialog", index )
                       .text( title )
                       .appendTo( this.element ));
            
           ...