Los vi en la página de temas de jQuery UI, y pensé que estaban limpios.Mostrar mensajes con jQuery UI
Me pregunto cómo mostrar los mensajes con estos estilos, tanto en forma estática y con JavaScript.
Gracias de antemano.
Los vi en la página de temas de jQuery UI, y pensé que estaban limpios.Mostrar mensajes con jQuery UI
Me pregunto cómo mostrar los mensajes con estos estilos, tanto en forma estática y con JavaScript.
Gracias de antemano.
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.
Copie las clases y la estructura HTML que produce jQuery UI, y asegúrese de haber incluido un tema de jQuery UI.
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>
Use Jquery Messages Plugin. Es ordenado, ligero y fácil de usar.
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);