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

jQuery UI has some nice convenient CSS styles for alerting and highlighting. I 开发者_如何学JAVAcan see it at the themeroller site -- 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?

Apply the appropriate CSS classes for the desired interaction cue from the UI/Theming/API 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.

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);

They are just CSS styles. You can apply them on the backend, or apply them using .addClass().

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 = $('<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'
 });