2010-06-12 15 views
10

Sto guardando pini notificare (http://pines.sourceforge.net/pnotify/) e sembra buono ma sembra avere poca documentazione effettiva quindi mi chiedo se c'è qualcosa di più stabilito e lavorato là fuori?Buon plugin di notifica per Jquery?

Come se non volessi perdere tempo a cercare di capire come usare i pini e poi scoprire che mancano alcune funzionalità che mi servivano pochi mesi dopo che avevo bisogno di passare a un altro plugin.

Questo è successo a me con tablesorter 2.0 Lo stavo usando, quindi avevo bisogno del filtro, ma il loro genere è stato risucchiato, quindi ho trovato i dati che avevano una API così grande e sviluppato di più.

Quindi mi chiedo se ci sia qualcosa di simile ai datatables (in termini di sviluppo e funzionalità) solo per le notifiche.

Modifica

Così sto guardando jgrowl e un pò confuso con il modo di usare il rullo tema con esso.

Così ho preso una volta i file di esempio e l'ho smontato con tutto quello che pensavo fosse spazzatura.

<!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> 

Non capisco di cosa si tratta per

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

Sembra avere nulla a che fare con l'applicazione dei temi. L'ho portato via e il tema era ancora applicato. Anche se si guarda al mio jgrow

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

faccio alcuna menzione di tema eppure ancora in qualche modo usato il tema. Perché sta prendendo il tema?

risposta

9

ci sono grappoli di questi là fuori, mi piacerebbe check-out il sito plugin jQuery, in particolare the plugins classified under the notification category :)

Qui sono solo alcuni:

+0

Ya vedo un gruppo che sto cercando di capire quale è il più utilizzato e più in fase di sviluppo. – chobo2

+2

@ chobo2 -Tutti hanno stili/sapori leggermente diversi, scelgono quello che meglio si adatta al tuo sito e il set di funzionalità richiesto Direi (ad esempio hai bisogno di fare la fila?), Sono tutti abbastanza leggeri –

+0

[qui] (http://stackoverflow.com/questions/2983899/does-jquery-have-a-plugin-to-display-a-message-bar-like-the-twitter-wrong-pas) è un'altra risposta scritta da te a ** show notfcation messaggi all'inizio della pagina ** – stom

1

personalmente utilizzo jGrowl. Ma here are a few others.

Modifica: In risposta al commento qui sotto, ecco lo jGrowl site. Cosa fa meglio? È facile da usare e funziona bene. Gli altri possono ottenere la stessa cosa, ma la mia esperienza è la stessa di Funka: provato, ha funzionato, è stato facile, fatto.

+0

Ya l'ho visto ma non riesco a trovare la home page. Cosa fa meglio? – chobo2

+0

Ho usato jGrowl di recente su un progetto; Non ho avuto molto tempo per guardarmi intorno ed è stato il primo che ho trovato, ma era così facile da configurare e veloce da far funzionare che non avevo bisogno di guardare oltre. – Funka

+0

Hmm Sto guardando jGrowl ma mi sto chiedendo (e questo potrebbe andare per tutti loro). Qual è il modo migliore per popolarli con ajax? Come sto per essere inviare un messaggio dal server e voglio quelli a popup nella notifica. Il modo migliore per inviarlo e poi come popolare le notifiche? – chobo2

1

Potrei essere in ritardo con questa risposta, ma se qualcuno viene qui cercando un plugin di notifica semplice, leggero, minimalista e discreto, ho creato un plugin di notifica jQuery open source che può essere integrato perfettamente con le app web, chiamato jNotifyOSD. Puoi vedere una demo su quel link. Ho cercato di mantenere l'API pulita e semplice da usare.Ecco un esempio:

$.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 
}); 

È inoltre possibile impostare valori di default globali per tutte le notifiche future (può essere sovrascritta una base per-notifica):

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

Esso comprende un bel tema di default con trasparenza sui al passaggio del mouse (il che significa che le notifiche diventano sempre più traslucide all'avvicinarsi del puntatore del mouse), ma il tema può essere modificato molto facilmente semplicemente inserendo un file CSS che specifica gli stili per alcune classi definite. Sto lavorando per includere più funzionalità, quindi dovresti tenere d'occhio lo the GitHub repository.

UPDATE [13 dicembre 2012]:

E 'passato un po' di tempo, ma ho finalmente implementato il supporto per più notifiche visibili utilizzando un sistema di coda. Ad esempio:

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

È possibile visualizzare una demo here. Penso che il plugin sia ora abbastanza flessibile da gestire una buona varietà di casi d'uso.

17

Vorrei aggiungere i miei 2cents collegandomi al mio preferito, toastr.

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

+0

Penso che mi ci sono voluti 5 minuti dopo aver letto questa risposta per scaricare, aggiornare la mia pagina web e vedere le notifiche che funzionano esattamente come volevo. quindi +1 nel 2016 –

+0

Ho usato 'toastr' ma ** Altri due ** per controllare 1. [pnotify] (https://sciactive.com/pnotify/) 2. [Avvio Bootstrap usando NotifyJs] (http: // www.jqueryscript.net/other/Creating-Growl-Notifications-with-jQuery-Bootstrap-Notify-js.html) – stom

Problemi correlati