10 frammenti JQuery che ogni designer dovrebbe conoscere
jQuery viene utilizzato su migliaia e migliaia di pagine Web. È una delle librerie più comuni da inserire nelle pagine e rende la manipolazione DOM un gioco da ragazzi.
Naturalmente, parte della popolarità di jQuery è la sua semplicità. Sembra che possiamo fare quasi tutto ciò che ci piace con questa potente libreria.
Per tutte le opzioni a nostra disposizione, ci sono alcuni frammenti che tendiamo a tornare di volta in volta. Oggi vorrei darti 10 frammenti che tutti, neofiti ai guru, useranno di volta in volta.
1) Pulsante Torna all'inizio
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tagBack to top
Come puoi vedere usando le funzioni animate e scrollTop in jQuery non abbiamo bisogno di un plugin per creare un semplice scorrimento verso l'animazione superiore.
Cambiando il valore scrollTop possiamo cambiare il punto in cui vogliamo far atterrare la barra di scorrimento, nel mio caso ho usato il valore 0 perché voglio che vada in cima alla nostra pagina, ma se volessi un offset di 100px potrei semplicemente digitare 100px nella funzione.
Quindi tutto ciò che stiamo realmente facendo è animare il corpo del nostro documento nel corso di 800 ms fino a quando non scorre fino alla cima del documento.
2) Verifica se le immagini sono caricate
$(‘img’).load(function() {
console.log(‘image load successful’);
});
A volte è necessario controllare se le immagini sono completamente caricate per continuare con gli script, questo frammento jQuery a tre righe può farlo facilmente per te.
Puoi anche controllare se una determinata immagine è stata caricata sostituendo il tag img con un ID o una classe.
3) Correggi automaticamente le immagini spezzate
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
Occasionalmente ci sono momenti in cui abbiamo rotto i collegamenti alle immagini sul nostro sito Web e sostituirli uno per uno non è facile, quindi aggiungere questo semplice pezzo di codice può farti risparmiare un sacco di mal di testa.
Anche se non si dispone di collegamenti interrotti l'aggiunta di questo non fa alcun danno.
4) Attiva / disattiva la classe al passaggio del mouse
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
Di solito vogliamo modificare la visualizzazione di un elemento cliccabile sulla nostra pagina quando l'utente si posiziona sopra e questo frammento jQuery fa proprio questo, aggiunge una classe al tuo elemento quando l'utente è in bilico e quando l'utente lo interrompe rimuove la classe, quindi tutto ciò che devi fare è aggiungere gli stili necessari nel tuo file CSS.
5) Disabilitare i campi di input
$('input[type="submit"]').attr("disabled", true);
A volte potresti volere che il pulsante di invio di un modulo o anche uno dei suoi input di testo sia disabilitato finché l'utente non ha eseguito una determinata azione (controllando la casella di controllo "Ho letto i termini" per esempio) e questa linea di codice ottiene quella; aggiunge l'attributo disabilitato al tuo input in modo da poterlo abilitare quando lo desideri.
Per fare ciò tutto ciò che devi fare è eseguire la funzione removeAttr sull'input con disabled come parametro:
$('input[type="submit"]').removeAttr("disabled”);
6) Interrompe il caricamento dei collegamenti
$(‘a.no-link').click(function(e){
e.preventDefault();
});
A volte non vogliamo che i link vadano a una certa pagina o addirittura lo ricarichino, vogliamo che facciano qualcos'altro come attivare qualche altro script e in tal caso questo pezzo di codice farà il trucco di impedire l'azione predefinita.
7) Attiva / disattiva dissolvenza
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
Le diapositive e le dissolvenze sono qualcosa che usiamo molto nelle nostre animazioni usando jQuery, a volte vogliamo solo mostrare un elemento quando facciamo clic su qualcosa e per questo i metodi fadeIn e slideDown sono perfetti, ma se vogliamo che quell'elemento appaia al primo clic e poi sparisci nel secondo questo pezzo di codice funzionerà bene.
8) Fisarmonica semplice
// 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;
});
Aggiungendo questo script tutto ciò che è veramente necessario sulla tua pagina è il codice HTML necessario per farlo funzionare.
Come puoi vedere in questo frammento ho prima chiuso tutti i pannelli nella nostra fisarmonica e poi nell'evento click ho creato il contenuto collegato a quella diapositiva della diapositiva, e tutti gli altri in alto. È un metodo semplice per una fisarmonica veloce.
9) Fai due div alla stessa altezza
$(‘.div').css('min-height', $(‘.main-div').height());
A volte vuoi che due div abbiano la stessa altezza, indipendentemente dal contenuto che hanno in loro, questo piccolo frammento consente proprio questo; in questo caso imposta l' altezza minima, il che significa che può essere più grande del div principale ma mai più piccolo. Questo è ottimo per i siti web come quelli in muratura.
10) Zebra ha spogliato la lista non ordinata
$('li:odd').css('background', '#E8E8E8’);
Con questo piccolo frammento puoi facilmente creare liste non ordinate zebrate, questo posiziona lo sfondo che definisci su ogni elemento dell'elenco dispari in modo che tu possa posizionare quello predefinito per quelli pari nel tuo file CSS. Puoi aggiungere questo snippet a qualsiasi tipo di markup, dalle tabelle alle semplici div, qualsiasi cosa tu voglia essere zebra.
Conclusione
Questi sono i pezzi di codice jQuery che mi ritrovo ad usare ancora e ancora nei miei progetti. Spero che tu aggiunga questa pagina ai segnalibri e torni quando hai bisogno di uno di questi frammenti.
Su quali frammenti jQuery fa affidamento? Hai un codice migliore per questi scenari? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine utile via Shutterstock.