10 JQuery sneiðar Hver hönnuður ætti að vita
jQuery er notað á þúsundum þúsunda vefsíðna. Það er eitt af algengustu bókasöfnum til að setja inn í síður, og það gerir DOM-meðferðin smám saman.
Auðvitað, hluti af vinsældum jQuery er einfaldleiki þess. Það virðist sem við getum gert næstum allt sem okkur líkar við þetta öfluga bókasafn.
Fyrir alla möguleika opna fyrir okkur, þá eru nokkrar sneiðar sem við höfum tilhneigingu til að koma aftur til tímans og aftur. Í dag langar mig til að gefa þér 10 sneiðar sem allir, nýliðar til sérfræðingur, munu nota tíma og tíma aftur.
1) Til baka efst á hnappinn
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tagBack to top
Eins og þú getur séð með því að nota hreyfimyndina og skrunaðgerðirnar í jQuery þurfum við ekki viðbót til að búa til einfalda fletta að efstu fjör.
Með því að breyta scrollTop gildi getum við breytt þar sem við viljum að skruntakkinn lendi í mér, ég notaði gildi 0 vegna þess að ég vil að það fer mjög efst á síðunni okkar, en ef ég vildi fá 100 punkta móti gæti ég bara tegund 100px í aðgerðinni.
Svo allt sem við gerum í raun er að hreyfa líkama skjalsins okkar yfir 800ms þangað til það skríður alla leið efst á skjalinu.
2) Athugaðu hvort myndir séu hlaðnar
$(‘img’).load(function() {
console.log(‘image load successful’);
});
Stundum þarftu að athuga hvort myndirnar þínar séu fullhlaðnir til þess að halda áfram með forskriftir þínar, þetta þriggja lína jQuery stykki getur gert það fyrir þig.
Þú getur einnig athugað hvort tiltekin mynd hefur verið hlaðin með því að skipta um img merkið með kennitölu eða flokki.
3) Festa brotnar myndir sjálfkrafa
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
Stundum höfum við tíma þegar við höfum brotin myndatengla á vefsíðunni okkar og skipta þeim einum af öðrum er ekki auðvelt, þannig að bæta við þessu einfalda kóðann getur þú bjargað mikið af höfuðverkjum.
Jafnvel ef þú ert ekki með nein brotin hlekkur að bæta þessu gerist ekki skaða.
4) Skiptu bekknum á sveima
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
Við viljum venjulega breyta sýnilegum þáttum á síðunni okkar þegar notandinn svifar yfir og þetta jQuery stykki gerir það bara, það bætir flokki við þáttinn þinn þegar notandi er sveima og þegar notandi hættir að fjarlægja bekkinn, svo allt sem þú þarft að gera er að bæta við nauðsynlegum stílum í CSS skránum þínum.
5) Slökkva á innsláttarsvæðum
$('input[type="submit"]').attr("disabled", true);
Stundum getur þú vilt að senda hnappinn á eyðublaði eða jafnvel einn af innsláttum sínum til að vera óvirkur þar til notandinn hefur framkvæmt ákveðna aðgerð (athugaðu að "ég hef lesið skilmálana" til dæmis) og þessi lína af kóða nær það; það bætir fatlaðri eiginleiki við inntak þitt svo þú getir virkjað það þegar þú vilt.
Til að gera það eina sem þú þarft að gera er að keyra fjarlægðAttr virka á inntakið með fatlaða sem breytu:
$('input[type="submit"]').removeAttr("disabled”);
6) Hættu að hleðsla tengla
$(‘a.no-link').click(function(e){
e.preventDefault();
});
Stundum viljum við ekki tengla til að fara á ákveðna síðu eða jafnvel endurhlaða hana, við viljum að þau gera eitthvað annað eins og kveikja á einhverjum öðrum handriti og í því tilfelli mun þetta stykki af kóða gera bragðið að koma í veg fyrir sjálfgefna aðgerðina.
7) Skipta um hverfa / renna
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
Slides og Fades eru eitthvað sem við notum nóg í hreyfimyndir okkar með jQuery, stundum viljum við bara sýna þátt þegar við smellum á eitthvað og fyrir það eru fadeIn og slideDown aðferðirnar fullkomnar, en ef við viljum þessi þáttur birtast á fyrstu smelli og þá hverfa á seinni þetta stykki af kóða mun virka bara fínt.
8) Einföld harmleikur
// 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;
});
Með því að bæta þessu handriti allt sem þú þarft virkilega að á síðunni þinni er nauðsynlegt HTML að fá þetta að vinna.
Eins og þú sérð í þessu útskrifti lokaði ég fyrst og fremst öllum spjöldum í harmóníunni okkar og síðan á smelli viðburðinn sem ég gerði efnið sem tengist þeim haus glugga, og allir hinir renna upp. Það er einföld aðferð fyrir fljótur harmóniku.
9) Gerðu tvær deildir á sama hæð
$(‘.div').css('min-height', $(‘.main-div').height());
Stundum vilt þú að tveir deildir hafi sömu hæð, sama hvaða efni þeir hafa í þeim, þetta litla bragð gerir það bara; Í þessu tilviki setur það lágmarkshæð sem þýðir að það getur verið stærra en aðal div en aldrei minni. Þetta er frábært fyrir múrverk eins og vefsíður.
10) Zebra sviptur óflokkað listi
$('li:odd').css('background', '#E8E8E8’);
Með þessu litla stykki getur þú auðveldlega búið til zebra röndóttar óskráðir listar, þetta setur bakgrunninn sem þú skilgreinir á hverju stakri listatriði svo að þú getir stillt sjálfgefið fyrir jafna sjálfur í CSS skránum þínum. Þú getur bætt þessu bragði við hvaða tegund af merkingu, frá borðum til venjulegra deilda, allt sem þú vilt vera með zebraþurrka.
Niðurstaða
Þetta eru stykki af jQuery kóða sem ég finn sjálfur að nota aftur og aftur í verkefnum mínum. Ég vona að þú bókamerki þessa síðu og komdu aftur þegar þú þarft eitt af þessum sneiðum.
Hvaða jQuery brot ertu að treysta á? Ertu með betri kóða fyrir þessar aðstæður? Láttu okkur vita í athugasemdunum.
Valin mynd / smámynd, gagnleg mynd um Shutterstock.