jQuery UI - pidiendo Resalte/Error

Question

Lo siento si esto es demasiado obvio, pero no puedo encontrar ninguna respuesta adecuada en cualquier lugar ...

¿Hay alguna manera de colocar un mensaje resaltado/error como las en la parte inferior derecha de esta página: http://jqueryui.com/themeroller/ simplemente llamando a una función jquery ui?

Inspeccioné el código fuente pero no puedo encontrar la respuesta ... ¿Codifican el html?

Gracias

----------------------------------------- SOLUCIÓN --------------------------------------

jQuery: (crear whatever.js un nuevo archivo y colocar el siguiente código no

$(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: simplemente crean de divs que desea colocar los mensajes como:

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

o de Avisos:

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

A continuación, puede estilo de las clases usando CSS.

Espero que esto ayude a cualquiera.

----------------------------------------- SOLUCIÓN - -------------------------------------

Answer 1

No hay una función de jQuery UI para colocar un error en la página; sin embargo, puede aplicar la clase de error usando jQuery a elementos como este:

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

Espero que esto ayude!

Answer 2

Según la documentación, después de cargar Jquery UI css, puede utilizar algunas clases:

http://jqueryui.com/docs/Theming/API

Por ejemplo, aquí el cuadro de alerta se define así:

<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
    <p> 
    <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
    <strong>Alert:</strong> 
    Sample ui-state-error style. 
    </p> 
</div>