jQuery UI - wywołanie Highlight/Error

Question

Przepraszam, jeśli jest to zbyt oczywiste, ale nie mogę znaleźć żadnego właściwą odpowiedź gdziekolwiek ...

Czy istnieje jakiś sposób, aby umieścić wiadomość kulminacyjnym/błędzie, jak te w prawym dolnym rogu tej strony: http://jqueryui.com/themeroller/ po prostu wywołując funkcję jquery ui?

Sprawdziłem kod źródłowy, ale nie mogę znaleźć odpowiedzi ... Czy kodują kod html?

Dzięki

----------------------------------------- ROZWIĄZANIE ---------------------------------------

jQuery: (tworzenie nowy whatever.js pliku i umieścić następujący kod tam

$(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: Wystarczy utworzyć de div, które chcesz umieścić komunikaty takie jak:

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

lub zawiadomień:

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

następnie można projektować klas za pomocą CSS.

Mam nadzieję, że to pomoże każdemu.

----------------------------------------- ROZWIĄZANIE - -------------------------------------

Answer 1

Nie ma funkcji interfejsu jQuery, aby umieścić błąd na stronie; jednak można zastosować klasę błędów za pomocą jQuery do elementów takich jak ten:

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

Mam nadzieję, że to pomoże!

Answer 2

Zgodnie z dokumentacją, po załadowaniu Jquery UI CSS, można użyć niektórych klas:

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

Na przykład tutaj alert box jest zdefiniowane tak:

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