JQuery -plugins og biblioteker for webutvikling

En plugin er et gjenbrukbart kodeverktøy skrevet i en standard JavaScript -fil. Disse filene gir nyttige jQuery -metoder som kan brukes i forbindelse med jQuery -rammemetodene.

La oss se noen tilgjengelige plugins og eksempler på hvordan du bruker dem

Plugin Sidepilling eller stablet side
PagePiling.js er en jQuery -plugin for å navigere mellom deler av et nettsted ved å rulle med musen som om de var lysbilder gjennom en meny, bruke tastaturpilene eller rotere musehjulet, alle seksjonene er på samme nettsted. Rullingen er vertikal, derfor er siden stablet.

 Start
 Midlertidig
 JQuery

Målet med denne opplæringen er å presentere plugins
fra JavaScript -biblioteket JQUERY

1 - Introduksjon til jQuery
2 - Grunnleggende programmering med jQuery
3 - Avanserte effekter med jQuery

Et JavaScript -bibliotek for å skrive mindre og gjøre mer

Eksempel

Konfigurasjonen gjøres ved å påkalle sidefileringsfunksjonen, der vi angir ID -en til menyen, deretter angir vi navnet på hver seksjon, vi angir bakgrunnsfargen for hver seksjon og deretter i den høyre navigasjonen angir vi navnet som skal vises.

 $ ('# side'). sidepilering ({meny: '#meny', ankre: ['start', 'seksjon', 'seksjonb'], seksjonerColor: ['# 9aceed', '# 2ebe21', '# 2C3E50 '], navigasjon: {' position ':' høyre ',' verktøytips ': [' Hjem ',' Seksjon A ',' Seksjon B ']}

Seksjonsklassen er den som brukes av JQuery -plugin For å gjenkjenne hver seksjon, er introduksjonsklassen den vi indikerer for å begynne innholdet i en seksjon.

Sorterbar plugin for å sortere lister
Denne pluginen er veldig nyttig for å omorganisere lister ved å dra med musen og utveksle elementer. Wordpress cms bruker denne pluginen til å omorganisere kategorier, innlegg og sider.

La oss gjøre et eksempel, anta at vi har en liste over et startlag med spillere og et innbytterlag, vi har også en liste over reservespillere. Vi vil lage disse tre listene, og ved hjelp av den sorterbare pluginen kan vi utveksle listespillerne ganske enkelt ved å dra navnet med musen til listen vi vil sette eller endre posisjonen i den samme listen.

 jQuery Sortable - Player List 
jQuery Sortable - spillerlagseier

 Overskrifter Team Innbytterlag Reservespillere 

 
 

José
Alberto
Charles
Artikkel 4

 

Javier
rammer
Daniel
Genaro

 

Mario
Fernan
Hyasint
Manuel
Silvano

 

 

Eksempel

Hvordan lage min egen jQuery -plugin?
Et jQuery -plugin er et skript eller en ny metode som vi bruker til å lage en ny funksjonalitet ved å utvide eller legge til rette for mulighetene som jQuery tilbyr oss. For å lage et plugin må vi deklarere en funksjon og programmere funksjonaliteten i generisk form, slik at den kan gjenbrukes på hvilken som helst side eller nettsted.

Vi må analysere og ta i betraktning at når vi inkluderer pluginet vårt i jQuery, har vi ikke konflikt med andre bibliotek eller funksjoner eller med css -filer som kan endre ytelsen til pluginet vårt. jQuery lar oss definere plugins på forskjellige måter. Elementene på et nettsted kan ikke manipuleres trygt før dokumentet er fullstendig lastet inn i nettleseren. jQuery oppdager denne tilstanden for å avgjøre når du kan få tilgang til HTML -elementer.

Hendelsen .ready () vil bare bli utført når nettet er lastet inn og før det vises i nettleseren. elementene som vises.

Formatet til denne funksjonen er:

 // Disse funksjonene vil være tilgjengelige når nettet er lastet inn $ (document) .ready (function () {function myfunction () {// code of the function}});

Hvis jeg bruker en CSS -velger i stedet for en funksjon. Denne linjen vil bli utført automatisk når siden er lastet inn, for eksempel etter å ha lastet inn siden, sett alle koblingene i grønt og med en størrelse på 14 piksler.

 $ (dokument) .ready (funksjon () {$ ('a'). css ({'color': green, 'font-size': '14px'});}); 

Deretter lager vi et plugin som eliminerer all e -post som er publisert i en liste med kommentarer på et nettsted.

 
 
 
Brukeranmeldelser 
 

 
 
Kommentar Lorem Ipsum 1 - Fredag ​​01/04/2016 12:35 Lorem Ipsum er rett og slett dummy -tekst fra skrivere og tekstfiler.
[email protected] 
 

 
 
Kommentar Lorem Ipsum 2 - Fredag ​​01/04/2016 12:35 Lorem Ipsum er rett og slett dummy -tekst fra skrivere og tekstfiler.
[email protected] 
 

 

 

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng