PNotify - vysoce přizpůsobitelný oznamovací plugin
Pro některé z nás, kteří jsou neustále zaneprázdněni, nás upozornění udržují na vrcholu každé důležité události, zpravodajství a informací. Snižuje čekací dobu, zatímco se nám podaří aktualizovat nás nejnovějšími událostmi, a není divu, že dostáváme oznámení o stolních počítačích a mobilních telefonech..
Pokud však chcete vytvořit oznámení pro svůj web, můžete jej snadno vytvořit pomocí tohoto pluginu s názvem PNotify. Je to bezplatný a open source javascript plugin se spoustou možností a je snadno ovladatelný. S PNotify můžete dokonce zobrazit až 1000 oznámení najednou (viz tento test benchmarkingu, abyste si to vyzkoušeli). Jak je to cool?
Proč používat PNotify?
PNotify, dříve známý jako Pines Notify, nese tři hlavní typy oznámení: info, oznámení a chyba. Má spoustu funkcí, efektů, témat a stylů. Můžete si vybrat různé styly z Bootstrap, jQuery UI, Font Awesome nebo jít s vlastním stylem. Tam je také asi 18 ready-made témata (vyrobené s Bootswatch) si můžete vybrat z a tam jsou dokonce i přechodové efekty.
Skvělá věc na PNotify je, že nemá jen úžasné grafické funkce, ale je také obohacena o výkonné a bohaté API (nebo moduly). Tato rozhraní API zahrnují oznámení o pracovní ploše (na základě standardu Web Notifications Draft), podporu dynamické aktualizace, zpětná volání pro různé události, prohlížeč historie a zobrazení předchozích oznámení a podporu HTML v názvu a těle.
PNotify poskytuje nenápadné oznámení což znamená, že můžete proklikat jakýkoli prvek za upozorněním, aniž byste jej odmítli. Můžete také určit, kde se zobrazí oznámení pomocí funkcí Stacks (Stohy), které vám umožní umístit oznámení všude: ve stylu horní / dolní lišty nebo dokonce jako popis.
Základní použití
Zdroje PNotify se dodávají v přizpůsobitelných modulech svazků a jsou k dispozici zde.
Začínáme
Až budete mít zdroje, přidejte je do svého kódu HTML:
PNotify je velmi snadné použití. Zde je jednoduché oznámení:
$ (function () new PNotify (title: 'Simple Notification', text: 'Hej, já jsem jednoduché oznámení.'););
A to je výsledek:
Chcete-li vytvořit oznámení, inicializujte novou funkci PNotify. Název, text, styl a další možnosti pak mohou být předány uvnitř funkce. Pokud nezadáte typ oznámení, použije se výchozí typ, který je oznámení. Je o tom 20+ konfigurovatelných možností můžete projít. Chcete-li zobrazit seznam s výchozí hodnotou, klikněte zde.
Styling
Chcete-li změnit styl, můžete projít styling v oznámení a definujte požadovaný styl. Dostupné styly jsou bootstrap2, bootstrap3, jqueryui a fontawesome. Nezapomeňte zahrnují související zdroje stylu v rámci vašeho projektu.
Pokud například chci změnit předchozí styl oznámení na téma uživatelského rozhraní jQuery, používám následující fragment:
nový PNotify (název: "jQuery UI Style", text: "Hej, já jsem stylizovaný s jQuery UI tématem.", styling: "jqueryui");
Existuje další způsob, jak styl notitovat pomocí tohoto kódu:
PNotify.prototype.options.styling = "jqueryui";
Změna jqueryui s požadovaným stylem a pak tento řádek umístěte před oznámení:
PNotify.prototype.options.styling = "jqueryui"; nový PNotify (title: "jQuery UI Style", text: "Hej, já jsem stylizovaný s jQuery UI motivem.");
Zde je váš výsledek ve stylu:
Přidávání modulů
Moduly jsou bohatá rozhraní API, která umožňují rozšířené funkce oznámení. Existují 7 modulů v PNotify: Desktop, Buttons, NonBlock, Confirm, History, Callbacks a Reference Module. Moduly lze použít předáním příslušných možností do oznámení.
Níže jsou uvedeny příklady, které vám ukážou, jak používat modul Desktop:
PNotify.desktop.permission (); new PNotify (title: 'Desktop Notification', text: 'Jsem oznámení na stolním počítači. Musíte mi dát svolení, abych se mohl objevit jako to, co jsem m. Pokud ne, stanu se pravidelným oznámením. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); se používá k zajištění toho, aby uživatelé měli povolení pro zobrazení stránky oznámení. Pokud uživatelé tuto stránku nepovolí, bude oznámení provedeno zobrazeny jako pravidelné oznámení místo toho.
Jak vidíte, existuje další možnost přidání plocha počítače kód. desktop: true umožní oznámení pro stolní počítač; pokud jej nastavíte na hodnotu false, oznámení se stane běžným oznámením.
Můžete také použít vlastní ikonu přes ikona volba. Vyplňte ji ikonou url; můžete ji nastavit Nepravdivé zakázat ikonu. Pokud ho nastavíte nula, bude použita výchozí ikona.
Chcete-li zobrazit další implementace modulů s jejich možnostmi, přejděte na tento odkaz.
Implementaci můžete dále rozšířit na oficiální stránku. Tam můžete vidět některé pokročilé použití spolu s dema. Další informace naleznete na stránce GitHub.
