Comment faire pour afficher un pop-up de notification à l'utilisateur à l'aide de jquery?

Je développe une application qui nécessite que l'utilisateur doit être averti au sujet de certains événements d'arrière-plan c'est à dire l'invitation d'un autre utilisateur, l'heure de rappel etc.

Chaque fois que l'événement se produit, le contrôleur sera notifié, et une petite fenêtre devrait être affiché à l'utilisateur.

Comment dois-je procéder pour y parvenir. La technologie /l'outil va m'aider. Je suis à l'aide de jQuery, JSF 2.0 et le Printemps 3.0.

InformationsquelleAutor Amit | 2011-06-28
  1. 24

    cela donnera une notification similaire à la stackoverflow

    jQuery

    $("#notification").fadeIn("slow").append('your message');
$(".dismiss").click(function(){
       $("#notification").fadeOut("slow");
});

    HTML

    <div id="notification" style="display: none;">
  <span class="dismiss"><a title="dismiss this notification">x</a></span>
</div>

    CSS

    #notification {
    position:fixed;
    top:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:normal;
    font-size:14px;
    font-weight:bold;
    color:white;
    background-color:#FF7800;
    padding:5px;
}
#notification span.dismiss {
    border:2px solid #FFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    margin-right:10px;
}
#notification a {
    color:white;
    text-decoration:none;
    font-weight:bold
}

    Aussi jeter un oeil à mplungjan réponse sur l'écoute des mises à jour du serveur et le message de la charge

    • Une belle. J'ai bricolé pour vous jsfiddle.net/mplungjan/xa23e
    • mplungjan c'est génial, mais maintenant que je remarque, l'OP a demandé pour le côté serveur de l'aide aussi
    • ainsi, le script doit interroger le serveur. Pas trop grave. setInterval et $.get()
    • oui je vais mettre à jour ma réponse. Par la façon dont je me demandais est-il possible de la mettre en œuvre sans l'aide de la méthode setInterval(), je veux dire de l'événement triggerd par une autre logique?
    • Long sondage ou Comète
    InformationsquelleAutor anu
  2. 2

    À l'aide du code à partir de @Anu à la suggestion de mon violon, vous pouvez simplement ajouter un sondage

    $(document).ready(function() {
  $(".dismiss").click(function(){$("#notification").fadeOut("slow");});

  setInterval(function() {
    $.get("ping.jsp?userid=<%= userID %>",function(message) {
      if (message) $("#notification").fadeIn("slow").html(message);
    });
   ,10000);
})

    le message pourrait inclure un horodateur pour voir si vous aviez informé plus tôt, au lieu d'envoyer un message vide si pas de notificati9on est nécessaire

    Alternatives: Long sondage ou La comète

    InformationsquelleAutor mplungjan
  3. 1

    HTML:

    <input type="button" id="pop" value="Submit"/>
<div id="popup">
  <div id="topbar"> TITLE..</div>
  <div id="content">Here is you content...</div>
  <input type="button" id="ok" value="OK"/>
</div>

    CSS:

    #popup { background:#ccc; -moz-border-radius: 10px; width:300px; height: 200px; padding: 5px; position: absolute; left: 50%; margin-left: -150px; z-index: 500; display:none }
#topbar { background:#ddd; -moz-border-radius: 10px; padding:5px; height:20px; line-height:20px }
#content { padding:5px; -moz-border-radius: 10px; text-align:center }
#ok { position: absolute; left: 140px; top: 180px }

    JQUERY:

    $(function(){
    $('#pop').click(function(){
        $('#popup').fadeIn().css('top',$(document).height()/2);
    });
    $('#ok').click(function(){
        $('#popup').fadeOut();
    });
});
    • Fixe le css ID popup - ajout d'un violon la soustraction de la popup hauteur est probablement aussi une bonne idée
    InformationsquelleAutor thecodeparadox
  4. 1

    Jquery ui dialogue est-ce que vous cherchez. Il vous sera utile pour vous. Bien qu'il existe beaucoup d'autres plugin disponible. C'est le plus simple..

    • En fait en regardant les autres exemples, le jQuery UI n'est pas nécessaire ici.
    InformationsquelleAutor Abdul Kader