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

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 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 1

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.

Answer 2

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

Answer 3

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

Answer 4

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