Mostrare avvisi ed errori con jQuery UI

Esiste una libreria molto interessate se si usa jQuery ch'è jQuery UI. L'insieme di queste librerie sono molto utili e facilitano il lavoro con l'HTML nella pagina web.

by Sergio Parilli

HTML

<div id="lista-errore"> </div> 
<div id="lista-avviso"> </div>

CSS

@import url('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css');

JavaScript

jQuery.fn.comeErrore = function() {
    return this.each(function() {
        $(this).replaceWith(function(i, msg) {
            var ropeHtml = "<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>";
            ropeHtml += "<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'>";
            ropeHtml += "</span>";
            ropeHtml += msg;
            ropeHtml += "</p></div>";
            return ropeHtml;
        });
    });
};
jQuery.fn.comeAvviso = function() {
    return this.each(function() {
        $(this).replaceWith(function(i, msg) {
            var ropeHtml = "<div class='ui-state-highlight ui-corner-all' style='padding: 0 .7em;'>";
            ropeHtml += "<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'>";
            ropeHtml += "</span>";
            ropeHtml += msg;
            ropeHtml += "</p></div>";
            return ropeHtml;
        });
    });
};


$('<p>').text('Sono il messaggio di errore').appendTo('#lista-errore').comeErrore();
$('<p>').text('Sono il messaggio di avviso').appendTo('#lista-avviso').comeAvviso();