✅ JQuery-plug-ins en bibliotheken voor webontwikkeling

Inhoudsopgave

jQuery Sortable - eigenaar van het spelerteam

Een plug-in is een herbruikbare codetool die is geschreven in een standaard JavaScript-bestand. Deze bestanden bieden handige jQuery-methoden die kunnen worden gebruikt in combinatie met de jQuery-frameworkmethoden.

Laten we eens kijken naar enkele beschikbare plug-ins en voorbeelden van hoe ze te gebruiken

Plugin Pagepilling of gestapelde pagina
PagePiling.js is een jQuery-plug-in om tussen secties van een website te navigeren door met de muis te scrollen alsof het door een menu gaat, de toetsenbordpijlen te gebruiken of het muiswiel te draaien, alle secties bevinden zich op dezelfde website. Het scrollen is verticaal, daarom is de pagina gestapeld.

Begin
Temary
JQuery

Het doel van deze tutorial is om plug-ins te presenteren
uit de JavaScript-bibliotheek JQUERY

1 - Inleiding tot jQuery
2 - Basisprogrammering met jQuery
3 - Geavanceerde effecten met jQuery

Een JavaScript-bibliotheek om minder te schrijven en meer te doen

Voorbeeld

De configuratie wordt gedaan door de pagepiling-functie aan te roepen, waarbij we de id van het menu aangeven, dan geven we de naam van elke sectie aan, we geven de achtergrondkleur aan voor elke sectie en dan geven we in de rechternavigatie de naam aan die zal verschijnen.

 $ ('# pagina') paginastapeling ({menu: '#menu', anchors: ['start', 'section', 'sectionb'], sectiesColor: ['# 9aceed', '# 2ebe21', '# 2C3E50 '], navigatie: {' position ':' rechts ',' tooltips': ['Home', 'Sectie A', 'Sectie B']}

De sectieklasse is degene die wordt gebruikt door de JQuery-plug-in Om elke sectie te herkennen, is de intro-klasse degene die we aanduiden om de inhoud van een sectie te beginnen.

Sorteerbare plug-in om lijsten te sorteren
Deze plug-in is erg handig om lijsten opnieuw te ordenen door met de muis te slepen en items uit te wisselen. Het wordpress cms gebruikt deze plug-in om categorieën, berichten en pagina's opnieuw te ordenen.

Laten we een voorbeeld nemen, stel dat we een lijst hebben van een startend team van spelers en een vervangend team, we hebben ook een lijst van reservespelers. We zullen deze drie lijsten maken en door middel van de sorteerbare plug-in kunnen we de lijstspelers uitwisselen door simpelweg hun naam met de muis naar de lijst te slepen die we willen plaatsen of de positie ervan binnen dezelfde lijst te wijzigen.

 jQuery Sorteerbaar - Spelerslijst 
jQuery Sortable - eigenaar van het spelerteam


 Headlines-team Vervangend team Reserve spelers 

 
 

José
Alberto
Charles
Artikel 4

 

Javier
frames
Daniël
Genaro

 

Mario
Fernando
Hyacint
Manuel
Silvano

Voorbeeld

Hoe maak ik mijn eigen jQuery-plug-in?
Een jQuery-plug-in is een script of een nieuwe methode waarmee we een nieuwe functionaliteit creëren door de mogelijkheden die jQuery ons biedt uit te breiden of te faciliteren. Om een plug-in te maken, moeten we een functie declareren en de functionaliteit programmeren in generieke vorm zodat het op elke pagina of website kan worden hergebruikt.

We moeten analyseren en er rekening mee houden dat bij het opnemen van onze plug-in in jQuery we geen conflict hebben met een andere bibliotheek of functie of zelfs met CSS-bestanden die de prestaties van onze plug-in zouden kunnen veranderen. jQuery stelt ons in staat om plug-ins op verschillende manieren te definiëren. De elementen van een website kunnen pas veilig worden gemanipuleerd als het document volledig in de browser is geladen. jQuery detecteert deze status om te bepalen wanneer html-elementen toegankelijk zijn.

De gebeurtenis .ready () wordt alleen uitgevoerd nadat het web is geladen en voordat het in de browser wordt weergegeven, heeft .ready () tot doel een functie uit te voeren onmiddellijk na het laden van het volledige HTML-document, zodat onze code wordt uitgevoerd op elementen die worden weergegeven.

Het formaat van deze functie is:

 // Deze functies zijn beschikbaar wanneer het web klaar is met het laden van $ (document) .ready (function () {function myfunction () {// code of the function}});

Als ik in plaats van een functie een CSS-selector toepas. Deze regel wordt automatisch uitgevoerd wanneer de pagina klaar is met laden, bijvoorbeeld na het laden van de pagina, zet alle links in het groen en met een grootte van 14 pixels.

 $ (document) .ready (functie () {$ ('a'). css ({'color': groen, 'font-size': '14px'});});

Vervolgens zullen we een plug-in maken die alle e-mail elimineert die is gepubliceerd in een lijst met opmerkingen op een website.

 
 
 Gebruiker reviews  

 
 Commentaar Lorem Ipsum 1 - vrijdag 01/04/2016 12:35 Lorem Ipsum is gewoon dummy-tekst van printers en tekstbestanden.
[email protected]  

 
 Commentaar Lorem Ipsum 2 - vrijdag 01/04/2016 12:35 Lorem Ipsum is gewoon dummy-tekst van printers en tekstbestanden.
[email protected]