2010-06-12 10 views
10

Je regarde pins informer (http://pines.sourceforge.net/pnotify/) et il semble bon, mais il semble avoir peu de documentation réelle alors je me demande s'il n'y a rien de plus établi et travaillé là-bas?Bon plugin de notification pour Jquery?

Comme je ne veux pas perdre de temps à essayer de comprendre comment utiliser les pins, puis découvrir qu'il manque une fonctionnalité dont j'avais besoin quelques mois plus tard que j'avais besoin de changer pour un plugin différent.

Cela m'est arrivé avec tablesorter 2.0 Je l'utilisais alors j'avais besoin du filtrage mais le leur était un peu aspiré donc j'ai trouvé des données qui avaient une plus grande API et développé plus. Donc, je me demande s'il y a quelque chose comme des données (en termes de développement et de fonctionnalités) juste pour les notifications à la place.

Modifier

Je suis à la recherche jgrowl et un peu confus avec la façon d'utiliser le rouleau à thème avec elle. J'ai donc pris une fois les fichiers d'exemple et les ai dépouillés avec tout ce que je pensais être un bric-à-brac.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true"> 
    <head> 
     <title>jGrowl meet Twitter</title> 
     <link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/> 
     <link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="Stylesheet" /> 
     <script type="text/javascript"> 
      $(function(){ 
       $('.ui-state-default').hover(
        function(){$(this).addClass('ui-state-hover');}, 
        function(){$(this).removeClass('ui-state-hover');} 
       ) 
       .mousedown(function(){$(this).addClass('ui-state-active');}) 
       .mouseup(function(){$(this).removeClass('ui-state-active');}) 
       .mouseout(function(){$(this).removeClass('ui-state-active');}); 
      }); 
     </script> 

     <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script> 
     <script type="text/javascript" src="../jquery-1.3.2.js"></script> 
     <script type="text/javascript" src="../jquery.jgrowl.js"></script> 
     <script type="text/javascript"> 

      $(document).ready(function(){ 
       // This value can be true, false or a function to be used as a callback when the closer is clciked 
       $.jGrowl.defaults.closer = function() { 
        console.log("Closing everything!", this); 
       }; 

       $.jGrowl("Sticky notification with a header", 
        { 
         header: 'A Header', 
         sticky: true, 
        }); 
      }); 

     </script> 
    </head> 
    <body> 
    <div id="trdevtool_contain" class="ui-widget ui-widget-content ui-corner-all"> 
     <div class="ui-widget-header ui-corner-top"> 
      <h1>jQuery UI ThemeRoller <span>Developer Tool</span></h1> 
     </div> 
    </div> 

    </body> 
</html> 

Je ne comprends pas ce que cela est pour

<script type="text/javascript"> 
     $(function(){ 
      $('.ui-state-default').hover(
       function(){$(this).addClass('ui-state-hover');}, 
       function(){$(this).removeClass('ui-state-hover');} 
      ) 
      .mousedown(function(){$(this).addClass('ui-state-active');}) 
      .mouseup(function(){$(this).removeClass('ui-state-active');}) 
      .mouseout(function(){$(this).removeClass('ui-state-active');}); 
     }); 
    </script> 

Il semble avoir rien à voir avec l'application des thèmes. Je l'ai pris et le thème était toujours appliqué. Aussi, si vous regardez mon jgrow

$.jGrowl("Sticky notification with a header", 
    { 
     header: 'A Header', 
     sticky: true, 
    }); 

Je fais encore aucune mention du thème il encore un peu comment utilisé le thème. Pourquoi prend-il le thème?

Répondre

9

Il y a grappes de ces là-bas, j'extraira le site plugins jQuery, en particulier the plugins classified under the notification category :)

Voici quelques-uns:

+0

Ya je vois un groupe que je suis en train de comprendre que l'on est le plus utilisé et le plus dans le développement. – chobo2

+2

@ chobo2 -Ils ont tous des styles/saveurs légèrement différents, choisissez celui qui correspond le mieux à votre site et les fonctionnalités requises je dirais (par exemple avez-vous besoin de faire la queue?), Ils sont tous assez légers –

+0

[ici] (http://stackoverflow.com/questions/2983899/does-jquery-have-a-plugin-to-display-a-message-bar-like-the-twitter-wrong-pas) est une autre réponse écrite par vous pour ** montrer la notfcation messages haut de page ** – stom

1

Personnellement, j'utiliser jGrowl. Mais here are a few others.

Éditer: En réponse au commentaire ci-dessous, voici le jGrowl site. Que fait-il mieux? C'est facile à utiliser et ça fonctionne bien. Les autres peuvent réaliser la même chose, mais mon expérience est la même que celle de Funka: l'essayer, ça a marché, c'était facile, fini.

+0

Ya j'ai vu ça mais je ne trouve pas la page d'accueil. Que fait-il mieux? – chobo2

+0

J'ai récemment utilisé jGrowl sur un projet; Je n'ai pas eu beaucoup de temps pour regarder autour de moi et c'était le premier que j'ai trouvé, mais c'était tellement facile à configurer et rapide à courir que je n'avais pas besoin de regarder plus loin. – Funka

+0

Hmm Je regarde jGrowl mais je me demande (et cela pourrait aller pour tous). Quelle est la meilleure façon de les peupler avec ajax? Comme je vais envoyer un message à partir du serveur et que ceux-ci doivent apparaître dans la notification. Quel est le meilleur moyen de l'envoyer et comment remplir les notifications? – chobo2

1

Je suis peut-être en retard avec cette réponse, mais si quelqu'un vient chercher un plugin de notification simple, léger, minimaliste et discret, j'ai créé un plugin de notification jQuery open source qui peut être intégré aux applications web, appelé jNotifyOSD. Vous pouvez voir une démo sur ce lien. J'ai essayé de garder l'API propre et mort simple à utiliser.Voici un exemple:

$.notify_osd.create({ 
    'text'  : 'Hi!',    // notification message 
    'icon'  : 'images/icon.png', // icon path, 48x48 
    'sticky'  : false,    // if true, timeout is ignored 
    'timeout'  : 6,     // disappears after 6 seconds 
    'dismissable' : true    // can be dismissed manually 
}); 

Vous pouvez également définir les valeurs par défaut globales pour toutes les notifications futures (peut être surpassée sur une base par notification):

$.notify_osd.setup({ 
    'icon'  : 'images/default.png', 
    'sticky'  : false, 
    'timeout'  : 8 
}); 

Il comprend un thème par défaut très agréable avec transparence hover (ce qui signifie que les notifications deviennent de plus en plus translucides à mesure que le pointeur de la souris approche), mais le thème peut être changé très facilement simplement en mettant un fichier CSS qui spécifie des styles pour certaines classes définies. Je travaille pour inclure plus de fonctionnalités, donc vous devriez garder un oeil sur the GitHub repository.

Mise à jour [13 décembre 2012]:

Il a été un certain temps, mais je l'ai finalement mis en œuvre le soutien de plusieurs notifications visibles à l'aide d'un système de file d'attente. Ainsi, par exemple:

$.notify_osd.setup({ 
    // ... config ... 
    'visible_max' : 5     // max 5 notifications visible simultaneously 
    'spacing'  : 30     // spacing between consecutive notifications 
}); 

Vous pouvez voir une démo here. Je pense que le plugin est maintenant suffisamment flexible pour gérer une bonne variété de cas d'utilisation.

17

Je voudrais ajouter mes 2cents en liant à mon préféré, toastr.

http://codeseven.github.com/toastr/

+0

Je pense qu'il m'a fallu 5 minutes après avoir lu cette réponse pour télécharger, mettre à jour ma page Web et voir les notifications fonctionnant exactement comme je le voulais. donc +1 en 2016 –

+0

J'ai utilisé 'toastr' mais ** Deux autres ** pour vérifier 1. [pnotify] (https://sciactive.com/pnotify/) 2. [Alerte Bootstrap en utilisant NotifyJs] (http: // www.jqueryscript.net/other/Creating-Growl-Notifications-with-jQuery-Bootstrap-Notify-js.html) – stom

Questions connexes