JQuery -plugins og biblioteker til webudvikling

Et plugin er et genanvendeligt kodeværktøj skrevet i en standard JavaScript -fil. Disse filer giver nyttige jQuery -metoder, der kan bruges sammen med jQuery -rammemetoderne.

Lad os se nogle tilgængelige plugins og eksempler på, hvordan du bruger dem

Plugin Sidepilling eller stablet side
PagePiling.js er et jQuery -plugin til at navigere mellem sektioner af et websted ved at rulle med musen, som om de var dias gennem en menu, ved hjælp af tastaturpile eller ved at rotere musehjulet, alle sektioner er på det samme websted. Rulningen er lodret, derfor stables siden.

 Start
 Midlertidigt
 JQuery

Formålet med denne vejledning er at præsentere plugins
fra JavaScript -biblioteket JQUERY

1 - Introduktion til jQuery
2 - Grundlæggende programmering med jQuery
3 - Avancerede effekter med jQuery

Et JavaScript -bibliotek til at skrive mindre og gøre mere

Eksempel

Konfigurationen udføres ved at aktivere sidefileringsfunktionen, hvor vi angiver menuens id, derefter angiver vi navnet på hvert afsnit, vi angiver baggrundsfarven for hvert afsnit og derefter i den højre navigation angiver vi det navn, der vises.

 $ ('# side'). pagepiling ({menu: '#menu', ankre: ['start', 'sektion', 'sektionb'], sektionerColor: ['# 9aceed', '# 2ebe21', '# 2C3E50 '], navigation: {' position ':' højre ',' værktøjstip ': [' Hjem ',' Afsnit A ',' Afsnit B ']}

Sektionsklassen er den, der bruges af JQuery -plugin For at genkende hvert afsnit er introduktionsklassen den, vi angiver for at starte indholdet af et afsnit.

Plugin til sortering til sortering af lister
Dette plugin er meget nyttigt at omarrangere lister ved at trække med musen og udveksle elementer. WordPress cms bruger dette plugin til at omarrangere kategorier, indlæg og sider.

Lad os gøre et eksempel, antag at vi har en liste over et starthold med spillere og et erstatningshold, vi har også en liste over reservespillere. Vi vil lave disse tre lister, og ved hjælp af det sorterbare plugin vil vi være i stand til at udveksle listespillerne ved blot at trække deres navn med musen til den liste, vi ønsker at placere eller ændre dens position inden for den samme liste.

 jQuery Sorterbar - Spillerliste 
jQuery Sortable - player team owner

 Overskrifter Team Stedfortræderhold Reservespillere 

 
 

José
Alberto
Charles
Punkt 4

 

Javier
rammer
Daniel
Genaro

 

Mario
Fernan
Hyacint
Manuel
Silvano

 

 

Eksempel

Hvordan opretter jeg mit eget jQuery -plugin?
Et jQuery -plugin er et script eller en ny metode, som vi bruger til at oprette en ny funktionalitet ved at udvide eller lette de muligheder, jQuery tilbyder os. For at oprette et plugin skal vi erklære en funktion og programmere funktionaliteten i generisk form, så den kan genbruges på enhver side eller websted.

Vi skal analysere og tage højde for, at når vi inkluderer vores plugin i jQuery, har vi ikke konflikt med noget andet bibliotek eller en funktion eller endda med css -filer, der kan ændre vores plugins ydeevne. jQuery giver os mulighed for at definere plugins på forskellige måder. Elementerne på et websted kan ikke manipuleres sikkert, før dokumentet er fuldt indlæst i browseren. jQuery registrerer denne tilstand for at afgøre, hvornår der kan tilgås HTML -elementer.

.Ready () -hændelsen udføres først, når internettet er indlæst, og før det vises i browseren, har .ready () det formål at udføre en eller anden funktion umiddelbart efter indlæsning af hele HTML -dokumentet, der sikrer, at vores kode udføres på elementer, der vises.

Formatet for denne funktion er:

 // Disse funktioner vil være tilgængelige, når internettet er færdig med at indlæse $ (document) .ready (function () {function myfunction () {// funktionens kode}});

Hvis jeg i stedet for en funktion anvender en CSS -vælger. Denne linje udføres automatisk, når siden er indlæst, f.eks. Efter indlæsning af siden, sætter alle links i grønt og med en størrelse på 14 pixels.

 $ (dokument) .ready (funktion () {$ ('a'). css ({'farve': grøn, 'skrifttype': '14px'});}); 

Dernæst opretter vi et plugin, der fjerner enhver mail, der er offentliggjort i en liste med kommentarer på et websted.

 
 
 
Brugeranmeldelser 
 

 
 
Kommentar Lorem Ipsum 1 - Fredag ​​01/04/2016 12:35 Lorem Ipsum er simpelthen dummetekst fra printere og tekstfiler.
[email protected] 
 

 
 
Kommentar Lorem Ipsum 2 - Fredag ​​01/04/2016 12:35 Lorem Ipsum er simpelthen dummetekst fra printere og tekstfiler.
[email protected] 
 

 

 

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt