Error & Highlight Dialogs

by jofitz

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
<div class="error">Error text 1</div>
<div class="error">Error text 2</div>
<div class="highlight">Highlight text 1</div>
<div class="highlight">Highlight text 2</div>

CSS

p {
    margin:1em 0;
}

JavaScript

//function to create error and alert dialogs


function errorHighlight(e, type, icon) {
    if (!icon) {
        if (type === 'highlight') {
            icon = 'ui-icon-info';
        } else {
            icon = 'ui-icon-alert';
        }
    }
    return e.each(function () {
        $(this).addClass('ui-widget');
        var h = '<div class="ui-state-' + type + ' ui-corner-all" style="padding:0 .7em;">';
        h += '<p>';
        h += '<span class="ui-icon ' + icon + '" style="float:left;margin-right: .3em;"></span>';
        h += $(this).text();
        h += '</p>';
        h += '</div>';

        $(this).html(h);
    });
}

//error dialog
(function ($) {
    $.fn.error = function () {
        errorHighlight(this, 'error');
    };
})(jQuery);

//highlight (alert) dialog
(function ($) {
    $.fn.highlight = function () {
        errorHighlight(this, 'highlight');
    };
})(jQuery);


$('.error').error();
$('.highlight').highlight();