Mostrar mensajes con jQuery UI

Question

Los vi en la página de temas de jQuery UI, y pensé que estaban limpios.

Me pregunto cómo mostrar los mensajes con estos estilos, tanto en forma estática y con JavaScript.

Gracias de antemano.

Answer 1

Utilizando las Herramientas del desarrollador de Chrome, inspeccioné el código HTML del mensaje de error. Puede hacer lo mismo con el otro o puede consultar el jQuery UI CSS Framework.

HTML

<div class="ui-widget"> 
    <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> 
</div> 

CSS

body { 
    font-family: Verdana,Arial,sans-serif; 
    font-size: 10px; 
} 

p { 
    margin: 1em 0; 
} 

strong { 
    font-weight: 900; 
} 

Usted puede utilizar el método addClass añadir estas clases mediante programación utilizando JS. También vea los métodos show y hide que puede usar para mostrar u ocultar estos mensajes.

<button id="show">Show</button> 
<button id="hide">Hide</button> 

$("#show").click(function() { 
    $(".ui-widget").show(); 
}); 

$("#hide").click(function() { 
    $(".ui-widget").hide(); 
}); 

Ver fiddle.

Answer 2

Copie las clases y la estructura HTML que produce jQuery UI, y asegúrese de haber incluido un tema de jQuery UI.

Answer 3

Simplemente use firebug para inspeccionar el HTML de ese elemento. Parece que están usando <div style="margin-top: 20px; padding: 0pt 0.7em;" class="ui-state-highlight ui-corner-all"> <p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span> <strong>Hey!</strong> Sample ui-state-highlight style.</p> </div>

Answer 4

Use Jquery Messages Plugin. Es ordenado, ligero y fácil de usar.

Answer 5

He adaptado una función jQuery corta para convertir un conjunto dado de divs (que contienen texto) en elementos de error/resaltado.

Puede verlo en acción en this jsFiddle.

Aquí está el 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);