How do I use jQuery UI's Highlight and Error widgets?

Question

jQuery UI has some nice convenient CSS styles for alerting and highlighting. I can see it at the themeroller site -- look on the right hand side. Is there a Javascript interface

Answer 1

I have adapted a short jQuery function to convert a given set of divs (containing text) into error/highlight elements.

You can see it in action on this jsFiddle.

Here is the 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 alertHtml = '
';
        alertHtml += '
';
        alertHtml += '';
        alertHtml += $(this).text();
        alertHtml += '
';
        alertHtml += '
';

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

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

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