Question: [jQuery UI](http://jqueryui.com/) has some nice convenient CSS styles for alerting and highlighting. I can see it at [the themeroller site](http://jqueryui.com/themeroller/) -- look on the right hand side. Is there a Javascript interface to these styles? Do we use hard-coded CSS? Where is this documented?

Is there method list, a cheatsheat, or anything other than the interactive docs on jQuery UI?

Answer: 
Apply the appropriate CSS classes for the desired interaction cue from the [UI/Theming/API](http://jqueryui.com/docs/Theming/API#Interaction_Cues) page: **.ui-state-highlight** for highlight and **.ui-state-error** for error. You can do it statically or use `.addClass('ui-state-highlight')` or `.addClass('ui-state-error')` to do it dynamically.
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](http://jsfiddle.net/774wH/).

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 = '<div class="ui-state-' + type + ' ui-corner-all" style="padding:0 .7em;">';
        alertHtml += '<p>';
        alertHtml += '<span class="ui-icon ' + icon + '" style="float:left;margin-right: .3em;"></span>';
        alertHtml += $(this).text();
        alertHtml += '</p>';
        alertHtml += '</div>';

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

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

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

```