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'd like to share one more solution. It's based on custom widgets and allows to add a title and customizable icon. Try [Fiddle](http://jsfiddle.net/w7CHB/) or look below:

```
$.widget('custom.noteBox', {
options: {
    icon: true,
    state: 'highlight'
},
_create: function () {
    var icon, note = $('<p>').html(this.element.html());
    if (this.options.icon === true) {
        switch (this.options.state) {
            case 'highlight':
                icon = 'info';
                break;
            case 'error':
                icon = 'alert';
                break;
            default:
                icon = false;
        }
    } else {
        icon = this.options.icon;
    }
    if (icon) note.prepend($('<span>')
        .addClass('ui-icon ui-icon-' + icon)
        .css({
        'float': 'left',
        'margin-right': '.3em'
    }));
    var title = this.element.attr('title');
    if (title) note.prepend($('<strong>').text(title + ' '));
    this.element.addClass('ui-widget')
        .replaceWith($('<div>')
        .addClass('ui-state-' + this.options.state + ' ui-corner-all')
        .css({
        'margin-top': '20px',
        'padding': '0 .7em'
    })
        .append(note));
   }
});

$('.error').noteBox({
    state: 'error'
 });
$('.info').noteBox();
$('<div title="Note! ">I`m dynamically added #1</div>')
    .appendTo('body').noteBox({
    icon: 'folder-open'
 });
 $('<div title="Note! ">I`m dynamically added #2</div>')
    .appendTo('body').noteBox({
    state: 'error'
 });
 $('<div title="Note! ">I`m dynamically added #3</div>')
    .appendTo('body').noteBox({
    state: 'error',
    icon: 'trash'
 });

```