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

$.widget('custom.noteBox', {
options: {
    icon: true,
    state: 'highlight'
},
_create: function () {
    var icon, note = $('
').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($('')
        .addClass('ui-icon ui-icon-' + icon)
        .css({
        'float': 'left',
        'margin-right': '.3em'
    }));
    var title = this.element.attr('title');
    if (title) note.prepend($('').text(title + ' '));
    this.element.addClass('ui-widget')
        .replaceWith($('
')
        .addClass('ui-state-' + this.options.state + ' ui-corner-all')
        .css({
        'margin-top': '20px',
        'padding': '0 .7em'
    })
        .append(note));
   }
});


$('.error').noteBox({
    state: 'error'
 });
$('.info').noteBox();
$('
I`m dynamically added #1
')
    .appendTo('body').noteBox({
    icon: 'folder-open'
 });
 $('
I`m dynamically added #2
')
    .appendTo('body').noteBox({
    state: 'error'
 });
 $('
I`m dynamically added #3
')
    .appendTo('body').noteBox({
    state: 'error',
    icon: 'trash'
 });