PNotify - एक अत्यधिक अनुकूलन अधिसूचना प्लगइन
हममें से कुछ लोग जो लगातार व्यस्त रहते हैं, सूचनाएं हमें हर महत्वपूर्ण घटना, समाचार पत्र और सूचना के शीर्ष पर रखती हैं। यह नवीनतम घटनाओं के साथ हमें अपडेट करने का प्रबंधन करते समय प्रतीक्षा समय कम कर देता है, और यह कोई आश्चर्य नहीं है कि हमें डेस्कटॉप और मोबाइल फ़ोन पर सूचनाएं समान रूप से मिलती हैं।.
यदि आप अपनी साइट के लिए अधिसूचना बनाना चाहते हैं, तो आप इसे आसानी से PNotify नामक प्लगइन से बना सकते हैं। यह बहुत सारे विकल्पों के साथ एक स्वतंत्र और खुला स्रोत जावास्क्रिप्ट प्लगइन है और इसका उपयोग करना आसान है। PNotify के साथ, आप एक बार में 1000 तक सूचनाएं दिखा सकते हैं (इसे आज़माने के लिए यह बेंचमार्किंग टेस्ट देखें)। कितना मजेदार था वो?
क्यों इस्तेमाल करें PNotify?
पाइनोटिफ़, जिसे पहले पाइंस के रूप में जाना जाता है, तीन मुख्य अधिसूचना प्रकारों को सूचित करता है: जानकारी, नोटिस तथा त्रुटि. इसमें सुविधाओं, प्रभावों, विषयों और शैलियों का एक समूह है। आप बूटस्ट्रैप, jQuery यूआई, फ़ॉन्ट से विभिन्न शैलियों का चयन कर सकते हैं या अपनी खुद की शैली के साथ जा सकते हैं। लगभग 18 तैयार-निर्मित थीम (बूटस्वाच के साथ बनाई गई) हैं जिन्हें आप चुन सकते हैं और संक्रमण प्रभाव भी हैं.
PNotify के बारे में महान बात यह है कि इसमें न केवल भयानक चित्रमय विशेषताएं हैं, बल्कि यह शक्तिशाली और समृद्ध एपीआई (या मॉड्यूल) के साथ भी समृद्ध है। इन एपीआई में डेस्कटॉप नोटिफिकेशन (वेब नोटिफिकेशन ड्राफ्ट स्टैंडर्ड के आधार पर), डायनेमिक अपडेट सपोर्ट, विभिन्न इवेंट्स के लिए कॉलबैक, पिछली नोटिफिकेशन देखने के लिए हिस्ट्री व्यूअर और टाइटल और बॉडी में HTML सपोर्ट शामिल हैं।.
PNotify एक प्रदान करता है विनीत अधिसूचना जिसका अर्थ है कि आप नोटिस को पीछे हटाए बिना किसी भी तत्व पर क्लिक कर सकते हैं। आप यह भी निर्धारित कर सकते हैं कि स्टैक सुविधाओं के साथ अधिसूचना कहां दिखाई देती है, जो आपको हर जगह नोटिस की स्थिति प्रदान करने की अनुमति देती है: शीर्ष / नीचे बार शैली या यहां तक कि टूलटिप के रूप में.
मूल उपयोग
PNotify के स्रोत कस्टमाइज्ड बंडल मॉड्यूल में आते हैं और यहां उपलब्ध हैं.
शुरू करना
आपके द्वारा स्रोत प्राप्त करने के बाद, उन्हें अपने HTML में शामिल करें जैसे:
PNotify का उपयोग करना बहुत आसान है। यहाँ एक सरल सूचना है:
$ (फ़ंक्शन () नया PNotify (शीर्षक: 'सिंपल नोटिफिकेशन', टेक्स्ट: 'हे, आई \ _ एक सिंपल नोटिफिकेशन।'););
और यह परिणाम है:
मूल रूप से, एक अधिसूचना बनाने के लिए आप एक नया PNotify फ़ंक्शन आरंभ करते हैं। शीर्षक, पाठ, शैली और अन्य विकल्प तब फ़ंक्शन के अंदर पारित किए जा सकते हैं। यदि आप अधिसूचना प्रकार निर्दिष्ट नहीं करते हैं, तो यह डिफ़ॉल्ट प्रकार का उपयोग करेगा जो कि एक है नोटिस. वहाँ लगभग 20+ विन्यास योग्य विकल्प आप पास हो सकते हैं। सूची को इसके डिफ़ॉल्ट मान के साथ देखने के लिए, यहां क्लिक करें.
स्टाइलिंग
शैली को बदलने के लिए, आप पास कर सकते हैं स्टाइल
अधिसूचना में विकल्प और अपनी इच्छित शैली को परिभाषित करें। उपलब्ध शैलियाँ हैं bootstrap2
, Bootstrap3
, jQueryUI
तथा fontawesome
. भूलना मत संबंधित शैली के स्रोत शामिल करें अपने प्रोजेक्ट के भीतर.
उदाहरण के लिए, यदि मैं पिछली अधिसूचना शैली को jQuery UI थीम में बदलना चाहता हूं, तो मैं निम्नलिखित स्निपेट का उपयोग करता हूं:
नया PNotify (शीर्षक: "jQuery UI Style", टेक्स्ट: "Hey, I \ 's स्टाइल विथ ____ यूआई थीम।", स्टाइलिंग: "jqueryui");
इस कोड के माध्यम से आपकी सूचना को स्टाइल करने का एक और तरीका है:
PNotify.prototype.options.styling = "jqueryui";
परिवर्तन jQueryUI
अपनी मनचाही शैली के साथ, फिर इस लाइन को नोटिफिकेशन से पहले डालें:
PNotify.prototype.options.styling = "jqueryui"; नया PNotify (शीर्षक: "jQuery UI Style", टेक्स्ट: "Hey, I's का स्टाइल NQuery UI थीम के साथ है।");
यहाँ आपका परिणाम है, स्टाइल:
मॉड्यूल जोड़ना
मॉड्यूल समृद्ध एपीआई हैं जो उन्नत अधिसूचना सुविधाओं को सक्षम करते हैं। वहां 7 मॉड्यूल पीएनोटिफाई में: डेस्कटॉप, बटन, नॉनब्लॉक, कन्फर्म, हिस्ट्री, कॉलबैक और रेफरेंस मॉड्यूल। मॉड्यूल को अधिसूचना में इसके उपयुक्त विकल्पों को पारित करके उपयोग किया जा सकता है.
एक उदाहरण के रूप में, नीचे दिए गए कोड आपको डेस्कटॉप मॉड्यूल का उपयोग करने का तरीका बताते हैं:
PNotify.desktop.permission (); नया PNotify (शीर्षक: 'डेस्कटॉप नोटिफिकेशन ’, टेक्स्ट: notification I \’ मा डेस्कटॉप नोटिफिकेशन। आपको मुझे अनुमति देने की आवश्यकता है ताकि मैं I \ _ m के रूप में प्रदर्शित हो सकूं। यदि नहीं, तो मैं नियमित अधिसूचना बन जाऊंगा। ', डेस्कटॉप: डेस्कटॉप: ट्रू, आइकन: नल);
PNotify.desktop.permission ();
यह सुनिश्चित करने के लिए उपयोग किया जाता है कि उपयोगकर्ता के पास है अनुमति दी गई अधिसूचना दिखाने के लिए साइट के लिए। यदि उपयोगकर्ता साइट को अस्वीकार करते हैं, तो अधिसूचना होगी एक नियमित सूचना के रूप में दिखाया गया है बजाय.
जैसा कि आप देख सकते हैं, जोड़ने का अतिरिक्त विकल्प है डेस्कटॉप
कोड के लिए। डेस्कटॉप: सच
डेस्कटॉप के लिए अधिसूचना को सक्षम करेगा; यदि आप इसे गलत पर सेट करते हैं, तो अधिसूचना एक नियमित सूचना बन जाएगी.
आप कस्टम आइकन का भी उपयोग कर सकते हैं आइकन
विकल्प। इसे अपने आइकन url से भरें; आप इसे सेट कर सकते हैं असत्य
आइकन को निष्क्रिय करने के लिए। यदि आप इसके साथ सेट करते हैं शून्य
, डिफ़ॉल्ट आइकन का उपयोग किया जाएगा.
अपने विकल्पों के साथ अन्य मॉड्यूल कार्यान्वयन को देखने के लिए, इस लिंक पर जाएं.
आप इसके आधिकारिक साइट पर जाकर कार्यान्वयन को आगे बढ़ा सकते हैं। वहां आप डेमो के साथ कुछ उन्नत उपयोग देख सकते हैं। वैकल्पिक रूप से, आप अतिरिक्त जानकारी के लिए इसके GitHub पृष्ठ पर जा सकते हैं.