10 úryvků JQuery, které by měl každý návrhář vědět
jQuery se používá na tisících a tisících webových stránek. Jedná se o jednu z nejběžnějších knihoven, která se vkládá do stránek, a to způsobuje, že manipulace s DOMem je rychlá.
Samozřejmě, že popularita jQuery je její jednoduchost. Zdá se, že můžeme dělat téměř všechno, co se nám líbí s touto mocnou knihovnou.
U všech možností, které máme k dispozici, máme několik úryvků, které máme zpravidla znovu a znovu. Dnes bych vám chtěl dát 10 úryvků, které budou všichni, nováčci k guruům, používat znovu a znovu.
1) Tlačítko Zpět nahoru
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tagBack to top
Jak vidíte pomocí funkcí animate a scrollTop v jQuery, nepotřebujeme plugin pro vytvoření jednoduchého přechodu na nejvyšší animaci.
Změnou hodnoty scrollTop se můžeme změnit tam, kde chceme přistávací lištu přistát, v mém případě jsem použil hodnotu 0, protože chci, aby to šlo na samý vrchol naší stránky, ale pokud bych chtěl kompenzovat 100px, mohl bych zadejte do funkce 100 pixelů.
Takže vše, co skutečně děláme, je animace těla našeho dokumentu v průběhu 800ms, dokud se nepřesune až na vrchol dokumentu.
2) Zkontrolujte, zda jsou obrázky načteny
$(‘img’).load(function() {
console.log(‘image load successful’);
});
Někdy je třeba zkontrolovat, zda jsou vaše obrázky plně načteny, abyste mohli pokračovat ve vašem skriptu. Tento úryvek jQuery se třemi řádky to může udělat pro vás snadno.
Můžete také zkontrolovat, zda byl načten konkrétní obrázek, tím, že nahradíte značku img ID nebo třídou.
3) Automatické opravy poškozených snímků
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
Občas máme chvíle, kdy máme zlomené obrazové odkazy na našich webových stránkách a nahrazení je po jednom, není snadné, takže přidání tohoto jednoduchého kódu vám může ušetřit mnoho bolesti hlavy.
Dokonce i když nemáte žádné přerušené odkazy, přidává to neškodí.
4) Přepnout třídu na vznášedlí
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
Obvykle bychom chtěli změnit vizuální prvek elementu, na který lze kliknout, na naší stránce, když se uživatel pohybuje nad sebou a tento úryvek jQuery to jen dělá, přidá třídu k vašemu prvku, když se uživatel vznáší a když uživatel zastaví odebrání třídy, tak vše, co musíte udělat, je přidat do souboru CSS potřebné styly.
5) Zakázání vstupních polí
$('input[type="submit"]').attr("disabled", true);
Někdy budete chtít, aby bylo tlačítko pro odeslání formuláře nebo dokonce jeden z jeho textových vstupů deaktivováno, dokud uživatel neuskutečnil určitou akci (zaškrtnutím políčka "Četl jsem podmínky", například) a tento řádek kódu splňuje že; přidá atribut vypnutého vstupu, abyste jej mohli povolit, pokud chcete.
Chcete-li tak učinit, stačí spustit funkci removeAttr na vstupu, který je zakázán jako parametr:
$('input[type="submit"]').removeAttr("disabled”);
6) Zastavte načítání odkazů
$(‘a.no-link').click(function(e){
e.preventDefault();
});
Někdy nechceme, aby odkazy směřovaly na určitou stránku nebo dokonce ji znovu načítaly, chceme, aby něco jiného spustily nějaký jiný skript a v takovém případě tento kód bude dělat trik prevence výchozí akce.
7) Přepínání fade / skluzu
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
Slides and Fades jsou něco, co používáme v našich animacích pomocí jQuery, někdy chceme zobrazit element, když něco klikneme, a proto jsou metody fadeIn a slideDown dokonalé, ale pokud chceme, aby se tento prvek objevil při prvním kliknutí a pak zmizí na druhém tento kód bude fungovat dobře.
8) Jednoduchý akordeon
// 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;
});
Přidáním tohoto skriptu vše, co opravdu potřebujete na vaší stránce, je nezbytné HTML, aby to fungovalo.
Jak můžete vidět v tomto úryvku, nejprve jsem zavřel všechny panely v našem akordeonu a pak na události kliknutí jsem udělal obsah, který je spojen s touto záhlaví snímku přepínat, a všechny ostatní posunout nahoru. Je to jednoduchá metoda pro rychlou akordeonku.
9) Vytvořte dvě divy stejné výšky
$(‘.div').css('min-height', $(‘.main-div').height());
Někdy chcete, aby dvě divy měly stejnou výšku bez ohledu na to, jaký obsah mají v nich, tento malý fragment umožňuje právě to; v tomto případě nastaví výšku min, což znamená, že může být větší než hlavní div, ale nikdy menší. To je skvělé pro webové stránky jako zdiva.
10) Zebra zrušil neřízený seznam
$('li:odd').css('background', '#E8E8E8’);
S tímto malým úryvkem můžete snadno vytvářet seznamy severských pruhovaných neořádaných seznamů, které umístí pozadí, které definujete, na každou položku v lichém seznamu, takže můžete umístit výchozí pro sudé v souboru CSS. Tento úryvek můžete přidat do libovolného typu značkování, od tabulek až po jednoduché divy, ať už chcete zebra zbavit.
Závěr
Jedná se o kusy kódu jQuery, který jsem se v mých projektech znovu a znovu nacházel. Doufám, že tuto stránku uložíte do záložky a vrátíte se, kdykoli budete potřebovat jeden z těchto úryvků.
Jaké úryvky jQuery se spoléháte? Máte lepší kód pro tyto scénáře? Dejte nám vědět v komentářích.
Doporučený obrázek / náhled, užitečný obrázek přes Shutterstock.