Afficher les messages avec l'interface utilisateur jQuery

J'ai vu ces sur jQuery UI les thèmes de la page, et de la pensée, ils étaient soignés.

Afficher les messages avec l'interface utilisateur jQuery

Je me demande comment faire pour afficher des messages avec ces styles à la fois de manière statique et avec JavaScript.

Merci d'avance.

source d'informationauteur Tom Tucker

  1. 14

    L'aide d'Outils de développement Chrome, j'ai inspecté le code HTML du message d'erreur. Vous pouvez faire de même pour l'autre ou vous pouvez vérifier l' jQuery UI Framework CSS.

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

    Vous pouvez utiliser le addClass méthode pour ajouter ces classes par programmation à l'aide de JS. Voir aussi la show et masquer méthodes que vous pouvez utiliser pour afficher/masquer ces messages.

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

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

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

    Voir violon.

  2. 1

    Suffit d'utiliser firebug pour inspecter le code HTML de l'élément. Dirait qu'ils vont à l'aide de <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. 1

    Utilisation Jquery Plugin Messages.C'est joli, léger et simple à utiliser.

  4. 1

    J'ai adapté un court jQuery fonction pour convertir un ensemble donné de divs (contenant du texte) dans l'erreur/mettre en lumière les éléments.

    Vous pouvez le voir en action sur cette jsFiddle.

    Ici, c'est le 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. 0

    Copier les classes et la structure HTML jQuery UI produit, et assurez-vous que vous avez inclus un thème jQuery UI.