jQuery UI - calling Highlight/Error

Question

I'm sorry if this is too obvious but I can't find any proper answer anywhere...

Is there any way to place an highlight/error message like the ones on the bottom right of this page: http://jqueryui.com/themeroller/ by simply calling a jquery ui function?

I inspected the source code but can't seem to find the answer... Do they hardcode the html?

Thanks

----------------------------------------- SOLUTION ---------------------------------------

jQuery: (create a new file whatever.js and place the following code there

$(document).ready(function(){

if($("div.error")[0]){
    createError($("div.error"));
}

if($("div.notice")[0]){
    createHighlight($("div.notice"));
}
});

//functions start
function createHighlight(obj){
    obj.addClass('ui-state-highlight ui-corner-all');
    obj.html('<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:.3em;"></span>'+obj.html()+'</p>');
}

function createError(obj){
    obj.addClass('ui-state-error ui-corner-all');
    obj.html('<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:.3em;"></span>'+obj.html()+'</p>');
}

HTML: Simply create de divs that you want to place the messages like:

<div class="error"><b>ERROR:</b> The message goes here</div>

or for Notices:

<div class="notice"><b>NOTICE:</b> The message goes here</div>

you can then style the classes using css.

Hope this helps anyone.

----------------------------------------- SOLUTION ---------------------------------------

Answer 1

There is no jQuery UI function to place an error on the page; however you can apply the error class using jQuery to elements like this:

$('#el').addClass('ui-state-error ui-corner-all'); // Rounded corners
$('#el').addClass('ui-state-error'); // Squared Corners

I hope this helps!