Отображать сообщения с пользовательским интерфейсом jQuery

Ответ 1

Используя инструменты разработчика Chrome, я проверил HTML-сообщение об ошибке. Вы можете сделать то же самое для другого, или вы можете проверить 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;   
}

Вы можете использовать метод addClass, чтобы программно использовать эти классы с помощью JS. Также см. show и hide методы, которые вы можете использовать для отображения/скрытия этих сообщений.

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

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

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

См. fiddle.

Ответ 2

Просто используйте firebug для проверки HTML этого элемента. Похоже, они используют <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>

Ответ 3

Используйте Плагин сообщений JQuery. Он опрятен, легковес и прост в использовании.

Ответ 4

Я адаптировал короткую функцию jQuery для преобразования заданного набора div (содержащего текст) в элементы error/highlight.

Вы можете увидеть его в действии этот jsFiddle.

Вот 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);

Ответ 5

Скопируйте классы и структуру HTML, которые создает пользовательский интерфейс jQuery, и убедитесь, что вы включили тему пользовательского интерфейса jQuery.