PNotify - En svært tilpasselig varslingsplugin

For noen av oss som er konstant opptatt, holder varsler oss på toppen av alle viktige hendelser, nyheter og informasjon. Det reduserer ventetiden mens du klarer å oppdatere oss med de siste hendelsene, og det er ikke rart at vi får varsler på både stasjonære og mobiler.

Hvis du imidlertid ønsker å opprette varsel for nettstedet ditt, kan du enkelt lage det med dette pluginet kalles PNotify. Det er et gratis og åpen kildekode javascript-plugin med mange alternativer, og det er enkelt å bruke. Med PNotify kan du til og med vise opptil 1000 varsler på en gang (se denne benchmarking testen for å prøve det). Hvor kult er det?

Hvorfor bruke PNotify?

PNotify, tidligere kjent som Pines Notify, har tre hovedvarslingstyper: info, varsel og feil . Den har en rekke funksjoner, effekter, temaer og stilarter. Du kan velge forskjellige stilarter fra Bootstrap, jQuery UI, Font Awesome eller gå med din egen stil. Det er også rundt 18 ferdige temaer (laget med Bootswatch) du kan velge mellom, og det er til og med overgangseffekter.

Den gode tingen om PNotify er at den ikke bare har fantastiske grafiske funksjoner, men det er også beriket med kraftige og rike APIer (eller moduler). Disse APIene inkluderer skrivebordsvarsler (basert på nettmeldinger Draft standard), dynamisk oppdateringsstøtte, tilbakeringinger for ulike hendelser, historikkviseren for å se tidligere varsler og HTML-støtte i tittelen og kroppen.

PNotify gir et ikke- påtrengende varsel som betyr at du kan klikke gjennom et hvilket som helst element bak varselet uten å avvise det. Du kan også avgjøre hvor varslingen dukker opp med Stacks-funksjonene, som gjør at du kan plassere varselet overalt: som topp / nederst barstil eller til og med som et verktøytips.

Grunnleggende bruk

PNotify s kilder kommer i tilpassbare bunte moduler og er tilgjengelig her.

Starter

Når du har kildene, ta dem med i HTML-koden din slik:

PNotify er veldig enkelt å bruke. Her er et enkelt varsel:

 $ (funksjon () {ny PNotify ({title: 'Simple Notification', tekst: 'Hei, jeg er enkel melding.'});}); 

Og dette er resultatet:

I utgangspunktet, for å opprette et varsel, starter du en ny PNotify-funksjon. Tittelen, teksten, stilen og andre alternativer kan da sendes inn i funksjonen. Hvis du ikke angir varsel typen, vil den bruke standardtypen som er en varsel . Det er omtrent 20 + konfigurerbare alternativer du kan passere. For å se listen med standardverdien, klikk her.

styling

For å endre stilen, kan du passere styling i varselet og definere ønsket stil. Tilgjengelige stiler er bootstrap2, bootstrap3, jqueryui og fontawesome . Ikke glem å inkludere relaterte stilkilder i prosjektet ditt.

Hvis jeg for eksempel vil endre forrige varslingsstil til jQuery UI-temaet, bruker jeg følgende utdrag:

 Ny PNotify ({tittel: "jQuery UI Style", tekst: "Hei, jeg er stylet med jQuery UI tema.", styling: "jqueryui"}); 

Det er en annen måte å utforme notiseringen din på, via denne koden:

 PNotify.prototype.options.styling = "jqueryui"; 

Endre jqueryui med stilen du vil ha, og sett deretter denne linjen før varselet slik:

 PNotify.prototype.options.styling = "jqueryui"; Ny PNotify ({tittel: "jQuery UI Style", tekst: "Hei, jeg er stylet med jQuery UI tema."}); 

Her er resultatet ditt, stilet:

Legge til moduler

Moduler er rike APIer som aktiverer avanserte varslingsfunksjoner. Det finnes 7 moduler i PNotify: Desktop, Buttons, NonBlock, Confirm, History, Tilbakeringinger og Referansemodul. Moduler kan brukes ved å sende de riktige alternativene i varslingen.

Som et eksempel nedenfor er kodene for å vise deg hvordan du bruker skrivebordsmodulen:

 PNotify.desktop.permission (); Ny PNotify ({title: 'Desktop Notification', tekst: 'Jeg' s desktop beskjed. Du må gi meg tillatelse, så jeg kan vises som hva jeg vil. Hvis ikke, blir jeg en vanlig melding. ', desktop: {desktop: true, icon: null}}); 

PNotify.desktop.permission(); brukes til å sørge for at brukerne har gitt tillatelse til at nettstedet skal vise varsel. Hvis brukerne tillater nettstedet, vil varselet bli vist som en vanlig melding i stedet.

Som du kan se, er det ekstra alternativet for å legge til desktop til koden. desktop: true vil aktivere varslingen for skrivebordet; Hvis du setter den til feil, vil varselet bli regelmessig.

Du kan også bruke et egendefinert ikon via icon . Fyll det med ikonet url; Du kan angi det false å deaktivere ikonet. Hvis du angir det med null, vil standardikonet bli brukt.

For å se andre modul implementeringer med sine alternativer, gå til denne linken.

Du kan videreføre implementeringen ved å gå til sitt offisielle nettsted. Der kan du se noen avansert bruk sammen med demoene. Alternativt kan du besøke sin GitHub-side for mer informasjon.

Lær barna å kode med Tynker

Med teknologi som er så utbredt som det er i disse dager, og nye programmeringsspråk lanseres annenhver dag, kommer det ikke som noen overraskelse at noen foreldre ser på å få barna til å plukke opp programmeringen i en tidlig alder.Folkene på Apple er sikkert godt klar over at programmører er avgjørende i denne teknologidrevne verden, og derfor har selskapet gått sammen med et firma som heter Tynker for å utvikle en pedagogisk iPad app som heter ... vel ...

(Tekniske og design tips)

Pause & Loop CSS Animasjoner med vent! animere

Det er mye du kan gjøre med ren CSS-animasjon, men pause og looping en animasjon er ikke mulig med den nåværende W3-spesifikasjonen.Men med et gratis verktøy som WAIT! Animer at du faktisk kan lage loopede animasjoner fra bunnen av med tilpassede forsinkelser mellom hver loop. Dette kan virke som en verdslig oppgave, men det løser et smertepunkt for mange utviklere. Det

(Tekniske og design tips)