Jquery的良好通知插件？

我在尋找松樹通知（http://pines.sourceforge.net/pnotify/），它看起來不錯，但它似乎沒有什麼實際的文檔，所以我想知道有什麼更多的建立和工作在那裏？Jquery的良好通知插件？

就像我不想花時間試圖弄清楚如何使用松樹，然後發現它缺少一些功能，我需要幾個月後，我需要改變到不同的插件。

這發生在我與tablesorter 2.0我使用它然後我需要過濾，但他們有點吸所以我發現datatables什麼有這樣一個更大的api和開發更多。

所以我想知道是否有像datatables（在開發和功能方面）只是爲了通知。

編輯

所以我在看jgrowl與如何使用的主題輥與它有點困惑。

所以我採取了一個示例文件，並剝去了我認爲是垃圾的一切。

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

我不明白這是什麼

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

它似乎什麼都沒有做與應用主題。我把它拿走了，主題仍然適用。此外，如果你看看我的jgrow

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

我沒有提到的主題，但它仍然是一些如何使用的主題。爲什麼要採用這個主題？

來源

2010-06-12 chobo2

有束的這些在那裏，我會在結帳的jQuery插件的網站，特別是the plugins classified under the notification category :)

這裏有幾個：

來源

2010-06-12 18:15:59

雅我看到一堆我試圖找出哪一個是最常用和最發展。 – chobo2 2010-06-12 18:18:21

@ chobo2 - 它們都有略微不同的風格/風味，挑選最適合您的網站和需要的功能集（我需要說）（例如，您是否需要排隊？），它們都非常輕巧 – 2010-06-12 18:19:06

[here]（http：/ /stackoverflow.com/questions/2983899/does-jquery-have-a-plugin-to-display-a-message-bar-like-the-twitter-wrong-pas）是你寫給** show notfcation的另一個答案消息頁面頂部** – stom 2016-06-23 13:58:05

我個人使用jGrowl。但是here are a few others。

編輯：在迴應下面的評論，這裏是jGrowl site。它有什麼更好的做法？它很容易使用，而且效果很好。其他人可以實現同樣的目標，但是我的經驗和Funka一樣：嘗試了它，它工作，很簡單，完成。

來源

2010-06-12 18:16:49

雅我看到了，但我找不到主頁。它有什麼更好的做法？ – chobo2 2010-06-12 18:18:00

我最近在一個項目上使用了jGrowl;我沒有太多的時間四處看看，這是我發現的第一個，但它很容易設置和快速運行，我不需要看得更遠。 – Funka 2010-06-12 18:25:17

嗯我看着jGrowl，但我想知道（這可能會適用於所有人）。用ajax填充它們的最佳方式是什麼？就像我要從服務器發送消息，並希望那些在通知中彈出。如何最好地發送它，然後如何填充通知？ – chobo2 2010-06-13 04:48:45

我可能是這個答案晚了，但如果有人來這裏尋找一個簡單，輕便，簡約，和不顯眼的通知插件，我做了可以無縫地與Web應用程序集成的一個開源的jQuery插件的通知，稱爲jNotifyOSD。您可以在該鏈接上看到演示。我試圖保持API清潔和簡單易用。這裏有一個例子：

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

您還可以設置全局默認爲未來的所有通知（可以在每個通知進行覆蓋）：

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

它包括一個非常漂亮的默認主題與透明度懸停（意味着鼠標指針接近時通知會變得越來越透明），但只需通過爲指定的類指定樣式的CSS文件，就可以很容易地更改主題。我正在努力添加更多功能，因此您應該密切關注the GitHub repository。

UPDATE [2012年12月13日]：

它已經有一段時間，但我終於實現了使用隊列系統中的多個可視通知的支持。例如：

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

您可以看到演示here。我認爲這個插件現在足夠靈活，可以處理各種各樣的用例。

來源

2011-08-21 18:17:12

我想添加我的2cents鏈接到我最喜歡的，toastr。

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

來源

2012-07-20 17:26:42 hrdwdmrbl

我認爲在閱讀本答案下載5分鐘後，我更新了網頁並查看了完全按照我的意願工作的通知。所以+1在2016 – 2016-01-07 04:12:17

我使用了'toastr'，但是**另外兩個**來檢查1. [pnotify]（https://sciactive.com/pnotify/）2. [使用NotifyJs的Bootstrap Alert]（http：// www.jqueryscript.net/other/Creating-Growl-Notifications-with-jQuery-Bootstrap-Notify-js.html） – stom 2017-04-05 10:19:20

Jquery的良好通知插件？

回答

相關問題