10 JQuery-utdrag Varje designer borde veta

jQuery används på tusentals tusentals webbsidor. Det är ett av de vanligaste biblioteken att infoga i sidor, och det gör DOM-manipulationen en snap.

En del av jQuerys popularitet är naturligtvis dess enkelhet. Det verkar som vi kan göra nästan vad vi gillar med detta kraftfulla bibliotek.

För alla alternativ som är öppna för oss finns det några utdrag som vi brukar komma tillbaka till gång på gång. Idag vill jag ge dig 10 snippets att alla, nybörjare till guruer, kommer att använda gång på gång.

1) Tillbaka till toppen knappen

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});

//Create an anchor tag
Back to top

Som du kan se använda animera och scrollTop- funktionerna i jQuery behöver vi inte ett plugin för att skapa en enkel bläddra till topp animation.

Genom att ändra scrollTop- värdet kan vi ändra var vi vill att rullningsfältet ska landa, i mitt fall använde jag ett värde på 0 eftersom jag vill att den ska gå till toppen av vår sida, men om jag ville ha en kompensation på 100 px kunde jag bara skriv 100px i funktionen.

Så allt vi gör är att animera kroppen i vårt dokument under 800ms, tills det rullar hela vägen till toppen av dokumentet.

2) Kontrollera om bilder laddas

$(‘img’).load(function() {
console.log(‘image load successful’);
});

Ibland behöver du kontrollera om dina bilder är fullt laddade för att kunna fortsätta med dina skript. Det här kan du enkelt göra med det här jQuery-koden i tre rader.

Du kan också kontrollera om en viss bild har laddats genom att ersätta img-taggen med ett ID eller en klass.

3) Fixa brutna bilder automatiskt

$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});

Ibland har vi tider när vi har brutna bildlänkar på vår hemsida och ersätter dem en efter en är inte lätt, så att lägga till den här enkla koden kan spara mycket huvudvärk.

Även om du inte har några trasiga länkar lägger till detta gör ingen skada.

4) Växla klassen på svävaren

$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);

Vi vill vanligtvis ändra visningen av ett klickbart element på vår sida när användaren svänger över och det här jQuery-stycket gör just det, det lägger till en klass i ditt element när användaren svävar och när användaren slutar tar den bort klassen, så allt du behöver göra är att lägga till de nödvändiga formaten i din CSS-fil.

5) Inaktivera inmatningsfält

$('input[type="submit"]').attr("disabled", true);

Ibland kan det hända att inlämningsknappen på en blankett eller till och med en av dess textinmatningar är avstängd tills användaren har utfört en viss åtgärd (kolla kryssrutan "Jag har läst villkoren" till exempel) och den här koden utförs den där; den lägger till funktionshindrade attributet till din inmatning så att du kan aktivera den när du vill.

För att göra det enda du behöver göra är att köra funktionen removeAttr på ingången med inaktiverad som parameter:

$('input[type="submit"]').removeAttr("disabled”);

6) Sluta laddningen av länkar

$(‘a.no-link').click(function(e){
e.preventDefault();
});

Ibland vill vi inte ha länkar till att gå till en viss sida eller till och med ladda om den, vi vill att de ska göra något annat som utlösa något annat skript och i så fall kommer den här koden att göra tricket att förhindra standardåtgärden.

7) Växla blek / glida

// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});

// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});

Slides och Fades är något vi använder mycket i våra animeringar med jQuery, ibland vill vi bara visa ett element när vi klickar på något och för att fadeIn och slideDown metoderna är perfekta, men om vi vill att elementet ska visas på första klicket och Försvinner sedan på andra sidan kommer den här koden att fungera bra.

8) Enkelt dragspel

// 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;
});

Genom att lägga till detta skript allt du verkligen behöver på din sida är den nödvändiga HTML-enheten, få det här att fungera.

Som du kan se i det här klippet stängde jag först alla paneler i vårt dragspel och sedan på klickhändelsen gjorde jag innehållet som är länkat till den här huvuddioden och alla de andra glider upp. Det är en enkel metod för ett snabbt dragspel.

9) Gör två divs i samma höjd

$(‘.div').css('min-height', $(‘.main-div').height());

Ibland vill du att två divs ska ha samma höjd oavsett vilket innehåll de har i dem, det här lilla fragmentet möjliggör just det; i det här fallet sätter den minhöjden vilket betyder att den kan vara större än den huvudsakliga div men aldrig mindre. Detta är bra för murverk som webbplatser.

10) Zebra strippad oorderad lista

$('li:odd').css('background', '#E8E8E8’);

Med det här lilla fragmentet kan du enkelt skapa zebra stripade oordnade listor, vilket ställer bakgrunden du definierar på varje udda listobjekt så att du kan placera standarden för de jämnaste i din CSS-fil. Du kan lägga till det här snippet till vilken typ av uppställning som helst, från tabeller till vanliga div, allt du vill bli zebra-strippad.

Slutsats

Det här är de delar av jQuery-koden som jag finner mig själv igen och igen i mina projekt. Jag hoppas att du bokmärke denna sida och komma tillbaka när du behöver en av dessa snippets.

Vilka jQuery snippets litar du på? Har du bättre kod för dessa scenarier? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, användbar bild via Shutterstock.