Kode

10 JQuery Snippets Hver designer bør vite

jQuery brukes på tusenvis av tusenvis av nettsider. Det er en av de vanligste bibliotekene å sette inn i sider, og det gjør DOM-manipulering et snap.

Selvfølgelig er en del av jQuery's popularitet enkelhet. Det virker som om vi kan gjøre nesten alt vi liker med dette kraftige biblioteket.

For alle alternativene som er åpne for oss, er det noen utdrag vi pleier å komme tilbake til tid og tid igjen. I dag vil jeg gjerne gi deg 10 utdrag som alle, nybegynnere til guruer, vil bruke tid og tid igjen.

1) Tilbake til 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 ved hjelp av animasjons- og scrollTop- funksjonene i jQuery trenger vi ikke et plugin for å lage en enkel rulle til topp animasjon.

Ved å endre scrollTop- verdien kan vi endre hvor vi vil at rullestangen skal lande, i mitt tilfelle bruker jeg en verdi på 0 fordi jeg vil at den skal gå helt opp på siden vår, men hvis jeg ville ha en kompensasjon på 100 px kunne jeg bare skriv 100px i funksjonen.

Så alt vi egentlig gjør er å animere kroppen av dokumentet vårt gjennom hele 800m til det ruller helt til toppen av dokumentet.

2) Kontrollerer om bildene er lastet

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

Noen ganger må du sjekke om bildene dine er fullt lastet for å kunne fortsette med skriptene dine. Denne tre linjens jQuery-utdrag kan gjøre det for deg enkelt.

Du kan også sjekke om et bestemt bilde er lastet ved å bytte img-taggen med en ID eller klasse.

3) Fest brutt bilder automatisk

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

Av og til har vi tidspunkter når vi har ødelagte bildekoblinger på nettstedet vårt, og det er ikke lett å bytte ut dem en etter en, slik at du kan spare mye hodepine ved å legge til dette enkle koden.

Selv om du ikke har noen ødelagte lenker, legger dette ikke til skade.

4) Bytt klasse på svinger

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

Vi vil vanligvis endre visningen av et klikkbart element på vår side når brukeren svinger over, og denne jQuery-koden gjør det bare, det legger til en klasse for elementet ditt når brukeren svinger og når brukeren stopper det, fjerner han klassen, så alt du trenger å gjøre er å legge til de nødvendige stilene i CSS-filen din.

5) Deaktivering av inputfelter

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

Noen ganger kan det hende at innsendingsknappen til et skjema eller til og med en av tekstinngangene skal deaktiveres til brukeren har utført en bestemt handling (se avmerkingsboksen "Jeg har lest vilkårene" for eksempel) og denne koden utføres at; den legger til deaktivert attributtet til innspillet ditt slik at du kan aktivere det når du vil.

For å gjøre det alt du trenger å gjøre er å kjøre funksjonen removeAttr på inngangen med deaktivert som parameter:

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

6) Stopp lastingen av koblinger

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

Noen ganger vil vi ikke ha koblinger for å gå til en bestemt side eller til og med laste den på nytt, vi vil at de skal gjøre noe annet som utløse et annet skript, og i så fall vil dette stykke kode gjøre det vanskelig å forhindre standardhandling.

7) Bytt farge / lysbilde

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

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

Lysbilder og fades er noe vi bruker mye i animasjonene våre ved hjelp av jQuery, noen ganger vil vi bare vise et element når vi klikker på noe og for at fadeIn og slideDown-metodene er perfekte, men hvis vi vil at elementet skal vises på første klikk og så forsvinner på den andre denne koden vil fungere fint.

8) Enkelt trekkspill

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

Ved å legge til dette skriptet, trenger du alt du virkelig trenger på siden din, er nødvendig HTML, få dette til å fungere.

Som du kan se i denne utklippet, lukkede jeg først alle panelene i vårt trekkspill, og deretter på klikkhendelsen gjorde jeg innholdet som er knyttet til den overskriften skyveknappen, og alle de andre lyser opp. Det er en enkel metode for et raskt trekkspill.

9) Lag to divs i samme høyde

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

Noen ganger vil du ha to diver å ha samme høyde, uansett hvilket innhold de har i dem, dette lille utsnittet gjør det mulig. i dette tilfellet setter den minhøyde som betyr at den kan være større enn hoved div, men aldri mindre. Dette er flott for murverk som nettsteder.

10) Zebra strippet uordnet liste

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

Med denne lille brikken kan du enkelt lage sebra stripede uordnede lister, dette plasserer bakgrunnen du definerer på hvert oddetall element, slik at du kan plassere standard en for de samme i CSS-filen. Du kan legge til denne brikken til hvilken som helst type markering, fra tabeller til vanlige divs, alt du vil bli zebra strippet.

Konklusjon

Dette er stykkene av jQuery-kode jeg finner meg selv igjen og igjen i prosjektene mine. Jeg håper du bokmerker denne siden og kommer tilbake når du trenger en av disse utdragene.

Hvilke jQuery-fragmenter stole du på? Har du bedre kode for disse scenariene? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, nyttig bilde via Shutterstock.

jquery jquery snippets nybegynner jquery lær jquery nyttig jquery