PNotify - doplnok s vysokou prispôsobiteľnosťou
Pre niektorých z nás, ktorí sú neustále zaneprázdnení, upozornenia nás udržiavajú na vrchole každej dôležitej udalosti, spravodajstva a informácií. Znižuje čakaciu dobu, keď sa snažíme aktualizovať nás s najnovšími udalosťami, a nie je divu, že dostaneme upozornenia na pracovných plochách aj mobilných telefónoch.
Ak však chcete vytvoriť upozornenie na svoje stránky, môžete ho jednoducho vytvoriť pomocou tohto pluginu s názvom PNotify. Je to bezplatný a open source javascript plugin s množstvom možností a je ľahko použiteľný. Pomocou programu PNotify môžete zobraziť naraz až 1000 upozornení naraz (skúste to skúsiť tento benchmarking test). Ako je to v pohode?
Prečo používať PNotify?
PNotify, predtým známy ako Pines Notify, nesie tri hlavné typy upozornení: Info, oznámenia a chyba. Má veľa funkcií, efektov, tém a tiež štýlov. Môžete si vybrať rôzne štýly z Bootstrap, jQuery UI, Font Awesome alebo prejsť svojim štýlom. Existuje tiež asi 18 hotových motívov (vyrobených s Bootswatchom), z ktorých si môžete vybrať a dokonca aj prechodové efekty.
Skvelá vec o PNotify je, že nemá len skvelé grafické vlastnosti, ale je tiež obohatená výkonnými a bohatými API (alebo modulmi). Medzi tieto rozhrania API patria upozornenia na pracovnej ploche (na základe návrhu Štandardov webových oznámení), podpora dynamickej aktualizácie, spätné volania rôznych udalostí, prehliadač histórie zobrazujúci predchádzajúce upozornenia a podporu HTML v nadpise a tele.
PNotify poskytuje nenápadné upozornenie čo znamená, že môžete kliknúť na ľubovoľný prvok vedľa oznámenia bez toho, aby ste ho prepustili. Môžete tiež určiť, kde sa oznámenie objaví pomocou funkcií Stacks, čo vám umožní umiestniť oznámenie všade: ako štýl horného / dolného panela alebo dokonca ako popisky.
Základné použitie
Zdroje PNotify sa dodávajú v prispôsobiteľných balíkových moduloch a sú k dispozícii tu.
Začíname
Po získaní zdrojov ich vložte do kódu HTML takto:
PNotify je veľmi jednoduché použitie. Tu je jednoduché upozornenie:
$ (funkcia () new PNotify (title: 'Jednoduché upozornenie', text: 'Hej, ja som jednoduché upozornenie.'););
A to je výsledok:
V podstate na vytvorenie upozornenia iniciujete novú funkciu PNotify. Titulok, text, štýl a ďalšie možnosti potom môžu prejsť do funkcie. Ak nezadáte typ upozornenia, použije sa predvolený typ, ktorý je a oznámenia. Je tu asi 20+ konfigurovateľných možností môžete prejsť. Ak chcete zobraziť zoznam s predvolenou hodnotou, kliknite tu.
styling
Ak chcete zmeniť štýl, môžete prejsť styling v oznámení a definujte požadovaný štýl. K dispozícii sú štýly bootstrap2, bootstrap3, jqueryui a fontawesome. Nezabudnite obsahovať súvisiace zdroje štýlov vo vašom projekte.
Ak napríklad chcem zmeniť predchádzajúci štýl oznámenia na tému používateľského rozhrania jQuery, používam nasledujúci útržok:
nový PNotify (title: "jQuery UI štýl", text: "Hej, ja som v štýle jQuery UI", styling: "jqueryui");
Existuje aj iný spôsob, ako prispôsobiť svoje upozornenie prostredníctvom tohto kódu:
PNotify.prototype.options.styling = "jqueryui";
zmena jqueryui so štýlom, ktorý chcete, a potom vložte tento riadok pred upozornením takto:
PNotify.prototype.options.styling = "jqueryui"; nový PNotify (title: "jQuery UI Style", text: "Hej, ja som v štýle jQuery UI.");
Tu je váš výsledok, v štýle:
Pridávanie modulov
Moduly sú bohaté rozhrania API, ktoré umožňujú rozšírené funkcie oznamovania. Existujú 7 modulov v PNotify: Pracovná plocha, Tlačidlá, NonBlock, Potvrdiť, História, Spätné volania a Referenčný modul. Moduly je možné použiť na odoslanie príslušných možností do oznámenia.
Príkladom nižšie sú kódy, ktoré vám ukážu, ako používať modul Desktop:
PNotify.desktop.permission (); nové PNotify (title: 'Desktop Notification', text: 'I' m ohlásenie na ploche. Musíte mi dať povolenie, aby som sa mohol zobraziť ako to čo mám. Ak nie, budem sa stať pravidelným upozornením. ', pracovná plocha: desktop: true, icon: null);
PNotify.desktop.permission (); sa používa, aby sa ubezpečil, že používatelia majú povolenie aby sa stránka zobrazila. Ak používateľ zakáže túto stránku, oznámenie bude uvedené ako pravidelné oznámenie namiesto.
Ako môžete vidieť, je tu dodatočná možnosť pridania desktop na kód. pracovná plocha: true povolí upozornenie pre počítač; ak ho nastavíte ako nepravdivé, oznámenie sa stane pravidelným upozornením.
Môžete tiež použiť vlastnú ikonu cez ikona voľba. Vyplňte ho adresou URL ikony. môžete ho nastaviť nepravdivý vypnúť ikonu. Ak ho nastavíte nulový, použije sa predvolená ikona.
Ak chcete zobraziť ďalšie možnosti implementácie modulov, prejdite na tento odkaz.
Implementáciu môžete rozšíriť na oficiálnej stránke. Tam môžete vidieť nejaké pokročilé používanie spolu s ukážkami. Prípadne môžete navštíviť stránku GitHub pre ďalšie informácie.
