2010-06-12 13 views
10

मैं पाइंस से देख रहा हूँ सूचित (http://pines.sourceforge.net/pnotify/) है और यह अच्छा लग रहा है, लेकिन यह थोड़ा वास्तविक प्रलेखन तो मैं सोच रहा हूँ के लिए लगता है कि और अधिक स्थापित कुछ भी है और वहाँ से बाहर पर काम किया?अच्छा अधिसूचना प्लगइन Jquery के लिए?

जैसा कि मैं पाइन का उपयोग करने का तरीका जानने का प्रयास करने में समय बिताना नहीं चाहता हूं और फिर पता लगाना कि इसमें कुछ फीचर गुम है, मुझे कुछ महीनों बाद मुझे एक अलग प्लगइन में बदलने की जरूरत है।

यह मेरे साथ टेबलबोर्डर 2.0 के साथ हुआ था, मैं इसका उपयोग कर रहा था, तब मुझे फ़िल्टरिंग की आवश्यकता थी, लेकिन उनके थोड़े चूसने की ज़रूरत थी, इसलिए मुझे डेटाटेबल्स मिले जो कि इतने बड़े एपीआई थे और अधिक विकसित हुए।

इसलिए मैं अगर वहाँ 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, 
    }); 

मुझे थीम का कोई उल्लेख नहीं है, फिर भी यह थीम का उपयोग कैसे किया गया है। थीम क्यों ले रही है?

उत्तर

9

वहाँ गुच्छों इनमें से वहाँ the plugins classified under the notification category :)

यहाँ कर रहे हैं, मैं jQuery प्लगइन्स साइट चेकआउट चाहते हैं, विशेष रूप से बस कुछ ही रहे हैं:

+0

हां मुझे लगता है मैं यह पता लगाने की जो एक सबसे अधिक इस्तेमाल किया और विकास में सबसे अधिक है कोशिश कर रहा हूँ एक गुच्छा देखते हैं। – chobo2

+2

@ chobo2- वे सभी के पास थोड़ा अलग शैलियों/स्वाद हैं, जो आपकी साइट पर सबसे अच्छा फिट बैठते हैं और आवश्यक फीचर सेट जो मैं कहूंगा (उदाहरण के लिए आपको क्यूइंग की आवश्यकता है?), वे सभी बहुत हल्के वजन –

+0

[यहां] हैं (http://stackoverflow.com/questions/2983899/does-jquery-have-a-plugin-to-display-a-message-bar-like-the-twitter-wrong-pas) आपके द्वारा लिखित एक और उत्तर है ** नोटिफिकेशन दिखाएं पृष्ठ के शीर्ष संदेश ** – stom

1

व्यक्तिगत तौर पर मैं jGrowl का उपयोग करें। लेकिन here are a few others

संपादित करें: नीचे दी गई टिप्पणी के जवाब में, यहां jGrowl site है। यह बेहतर क्या करता है? इसका उपयोग करना आसान है, और यह अच्छी तरह से काम करता है। दूसरों एक ही बात को प्राप्त कर सकते, लेकिन मेरे अनुभव Funka के रूप में एक ही है: यह कोशिश की, यह काम किया, यह आसान था, किया।

+0

हां मैंने देखा कि मुझे वहां होम पेज नहीं मिल रहा है। यह बेहतर क्या करता है? – chobo2

+0

मैंने हाल ही में एक परियोजना पर jGrowl का उपयोग किया; मेरे पास चारों ओर देखने के लिए ज्यादा समय नहीं था और यह मुझे मिला पहला था, लेकिन इसे स्थापित करना इतना आसान था और दौड़ने के लिए जल्दी मुझे आगे देखने की आवश्यकता नहीं थी। – Funka

+0

हम्म मैं jGrowl देख रहा हूं लेकिन मुझे आश्चर्य है (और यह उन सभी के लिए जा सकता है)। AJAX के साथ उन्हें पॉप्युलेट करने का सबसे अच्छा तरीका क्या है? जैसे कि मैं सर्वर से संदेश भेजने जा रहा हूं और चाहते हैं कि वे अधिसूचना में पॉपअप करें। इसे कैसे भेजना है और फिर अधिसूचनाओं को कैसे पॉप्युलेट करना है? – chobo2

1

मुझे इस उत्तर के साथ देर हो सकती है, लेकिन अगर कोई यहां एक साधारण, हल्का, minimalist, और अविभाज्य अधिसूचना प्लगइन की तलाश में आता है, तो मैंने एक ओपन सोर्स jQuery अधिसूचना प्लगइन बनाया है जिसे वेब ऐप्स के साथ सहजता से एकीकृत किया जा सकता है, jNotifyOSD कहा जाता है। आप उस लिंक पर एक डेमो देख सकते हैं। मैंने एपीआई को साफ और मृत उपयोग करने के लिए सरल रखने की कोशिश की है।यहाँ एक उदाहरण है:

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

यह पर पारदर्शिता के साथ एक बहुत अच्छा डिफ़ॉल्ट थीम शामिल होवर (जिसका अर्थ यह है कि माउस पॉइंटर दृष्टिकोण के रूप में नोटिफिकेशन अधिक से अधिक पारदर्शी हो जाता है), लेकिन विषय को केवल एक सीएसएस फ़ाइल डालने से बहुत आसानी से बदला जा सकता है जो कुछ परिभाषित वर्गों के लिए शैलियों को निर्दिष्ट करता है। मैं और अधिक सुविधाओं को शामिल करने के लिए काम कर रहा हूं, इसलिए आपको the GitHub repository पर नजर रखना चाहिए।

अद्यतन [13 वीं दिसंबर, 2012]:

कुछ समय हो गया है, लेकिन मैं अंत में एक कतार प्रणाली का उपयोग कर कई दिखाई सूचनाओं के लिए समर्थन क्रियान्वित किया है। उदाहरण के लिए तो:

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

आप एक डेमो here देख सकते हैं। मुझे लगता है कि प्लगइन अब उपयोग-मामलों की एक अच्छी किस्म को संभालने के लिए पर्याप्त लचीला है।

17

मैं अपने पसंदीदा, टोस्टर से लिंक करके अपने 2 सेंट जोड़ना चाहता हूं।

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

+0

मुझे लगता है कि डाउनलोड करने के लिए इस जवाब को पढ़ने के 5 मिनट बाद, मेरे वेबपृष्ठ को अपडेट करें और वांछित कार्यकर्ताओं को ठीक तरह से काम कर देखें। तो 2016 में +1 –

+0

मैंने 'toastr' का उपयोग किया लेकिन ** दो और ** जांचने के लिए ** [pnotify] (https://sciactive.com/pnotify/) 2. [NotifyJs का उपयोग कर बूटस्ट्रैप अलर्ट] (http: // www.jqueryscript.net/other/Creating-Growl-Notifications-with-jQuery-Bootstrap-Notify-js.html) – stom

संबंधित मुद्दे