10 JQuery-fragmenten die elke ontwerper moet weten
jQuery wordt gebruikt op duizenden webpagina's. Het is een van de meest gebruikte bibliotheken om in te voegen in pagina's en het maakt DOM-manipulatie een fluitje van een cent.
Natuurlijk is een deel van de populariteit van jQuery de eenvoud. Het lijkt erop dat we bijna alles kunnen doen wat we leuk vinden met deze krachtige bibliotheek.
Voor alle opties die voor ons openstaan, zijn er enkele fragmenten waar we de neiging hebben om keer op keer terug te komen. Vandaag zou ik je 10 fragmenten willen geven die iedereen, nieuwelingen tot goeroes, keer op keer zal gebruiken.
1) Terug naar beginknop
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tagBack to top
Zoals je kunt zien met behulp van de functies animeren en scrollenTop in jQuery hebben we geen plug-in nodig om een eenvoudige scroll-naar- bovenanimatie te maken.
Door de scrollTop- waarde te wijzigen, kunnen we wijzigen waar we de schuifbalk willen laten landen, in mijn geval heb ik de waarde 0 gebruikt omdat ik wil dat deze naar de top van onze pagina gaat, maar als ik een offset van 100 px wilde, kon ik gewoon typ 100 px in de functie.
Dus het enige dat we echt doen, is het lichaam van ons document animeren in de loop van 800 ms totdat het helemaal naar de bovenkant van het document scrollt.
2) Controleren of afbeeldingen zijn geladen
$(‘img’).load(function() {
console.log(‘image load successful’);
});
Soms moet u controleren of uw afbeeldingen volledig zijn geladen om door te gaan met uw scripts, dit drieluikige jQuery-fragment kan dat gemakkelijk voor u doen.
U kunt ook controleren of een bepaalde afbeelding is geladen door de img-tag te vervangen door een ID of klasse.
3) Herstel gebroken afbeeldingen automatisch
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
Af en toe hebben we tijden dat we beeldkoppelingen op onze website hebben verbroken en ze één voor één vervangen, dus het toevoegen van dit eenvoudige stuk code kan u veel hoofdbrekens besparen.
Zelfs als je geen kapotte links hebt, voegt het toevoegen van dit geen enkele schade toe.
4) Schakel klasse in hover
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
Meestal willen we het uiterlijk van een klikbaar element op onze pagina wijzigen wanneer de gebruiker zweeft en dit jQuery-fragment doet precies dat, het voegt een klasse aan uw element toe wanneer de gebruiker zweeft en wanneer de gebruiker stopt, wordt de klasse verwijderd, dus het enige wat u hoeft te doen is de nodige stijlen toevoegen aan uw CSS-bestand.
5) Invoervelden uitschakelen
$('input[type="submit"]').attr("disabled", true);
Soms wilt u misschien dat de submit-knop van een formulier of zelfs een van de tekstinvoerelementen wordt uitgeschakeld totdat de gebruiker een bepaalde actie heeft uitgevoerd (bijvoorbeeld het selectievakje 'Ik heb de voorwaarden gelezen') en deze regel met code volbrengt dat; het voegt het uitgeschakelde attribuut toe aan je invoer zodat je het kunt inschakelen wanneer je dat wilt.
Hiertoe hoeft u alleen de functie removeAttr op de invoer met uitgeschakelde als de parameter uit te voeren:
$('input[type="submit"]').removeAttr("disabled”);
6) Stop met het laden van links
$(‘a.no-link').click(function(e){
e.preventDefault();
});
Soms willen we niet dat links naar een bepaalde pagina gaan of zelfs opnieuw laden, we willen dat ze iets anders doen, zoals het activeren van een ander script en in dat geval zal dit stukje code de truc wegwerken om de standaardactie te voorkomen.
7) Schakel fade / slide in
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
Slides en Fades gebruiken we veel in onze animaties met jQuery, soms willen we alleen een element laten zien als we op iets klikken en daarvoor zijn de fadeIn en slideDown-methoden perfect, maar als we willen dat dat element bij de eerste klik verschijnt en verdwijnt dan op de seconde dit stuk code zal prima werken.
8) Eenvoudige accordeon
// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});
Door dit script alles toe te voegen wat je echt nodig hebt op je pagina is de nodige HTML nodig om dit te laten werken.
Zoals je in dit fragment kunt zien, heb ik eerst alle panelen in onze accordeon gesloten en vervolgens op de klikgebeurtenis heb ik de inhoud gemaakt die aan die kopdia-schuif is gekoppeld en alle andere dia's omhoog. Het is een eenvoudige methode voor een snelle accordeon.
9) Maak twee divs dezelfde hoogte
$(‘.div').css('min-height', $(‘.main-div').height());
Soms wil je dat twee divs dezelfde hoogte hebben, ongeacht welke inhoud ze hebben, dit kleine fragment maakt precies dat mogelijk; in dit geval wordt de min-hoogte ingesteld, wat betekent dat deze groter kan zijn dan de hoofd-div, maar nooit kleiner. Dit is geweldig voor metselwerkachtige websites.
10) Zebra heeft de ongeordende lijst gestript
$('li:odd').css('background', '#E8E8E8’);
Met dit kleine fragment kun je gemakkelijk zebra gestreept ongeordende lijsten maken, dit plaatst de achtergrond die je op elk oneven lijstitem definieert, zodat je de standaard voor de even in je CSS-bestand kunt plaatsen. U kunt dit fragment toevoegen aan elk type markup, van tabellen tot gewone divs, alles wat u als zebrastrip wilt laten zijn.
Conclusie
Dit zijn de stukjes jQuery-code die ik steeds opnieuw gebruik in mijn projecten. Ik hoop dat je deze pagina een bladwijzer maakt en terugkomt wanneer je een van deze fragmenten nodig hebt.
Op welke jQuery-fragmenten vertrouwt u? Heb je betere code voor deze scenario's? Laat het ons weten in de comments.
Uitgelichte afbeelding / miniatuur, nuttige afbeelding via Shutterstock.