Her Tasarımcı Bilmeniz Gereken 10 JQuery Parçacıkları

jQuery binlerce web sayfasında binlerce kullanılmaktadır. Sayfalara eklenecek en yaygın kitaplıklardan biridir ve DOM manipulasyonunu anında yapar.

Elbette, jQuery'nin popülerliğinin bir parçası basitliğidir. Bu güçlü kütüphaneyle sevdiğimiz her şeyi yapabileceğimiz anlaşılıyor.

Bize açık olan tüm seçenekler için, tekrar tekrar dönme eğiliminde olan bazı parçacıklar var. Bugün sizlere 10 yeni parçayı vermek istiyorum, herkesin, yeni başlayanların gurulara, tekrar tekrar zaman kullanacağını.

1) Başa dön düğmesi

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

//Create an anchor tag
Back to top

JQuery'deki animate ve scrollTop işlevlerini görebildiğiniz gibi, en iyi animasyona basit bir kaydırma yapmak için bir eklentiye ihtiyacımız yoktur.

ScrollTop değerini değiştirerek, kaydırma çubuğunun inmesini istediğimiz yeri değiştirebiliriz, benim durumumda, 0 değerini kullandım çünkü sayfamızın en üstüne gitmek istiyorum, ancak 100px'lik bir ofset istedim, sadece Fonksiyonda 100px yazın.

Yani tüm yaptığımız şey, dokümanın gövdesini, belgenin en üstüne kaydırıncaya kadar, 800 ms. Boyunca canlandırıyor.

2) Resimlerin yüklenip yüklenmediğini kontrol etme

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

Bazen, komut dosyalarınıza devam etmek için resimlerinizin tam olarak yüklenip yüklenmediğini kontrol etmeniz gerekir; bu üç satırlı jQuery pasajı bunu sizin için kolayca yapabilir.

Belirli bir resmin yüklendiğini img etiketini bir ID veya sınıfla değiştirerek de kontrol edebilirsiniz.

3) Kırık görüntüleri otomatik olarak düzeltin

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

Bazen web sitemizdeki görüntü linklerini kırıp teker teker değiştirdiğimizde zamanımız kalmaz, bu nedenle bu basit kod parçasını eklemek sizi çok fazla başağrıtan kurtarabilir.

Ekleyen herhangi bir kırık bağlantınız olmasa bile, herhangi bir zarar vermez.

4) Vurgulu olarak geçiş yap

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

Kullanıcı, kullanıcı üzerinde gezinirken sayfamızdaki tıklanabilir bir öğenin görselini değiştirmek isteriz ve bu jQuery pasajı bunu yapar, kullanıcı gezinirken öğenize bir sınıf ekler ve kullanıcı bunu durdurduğunda, sınıfı kaldırır. Yapmanız gereken tek şey CSS dosyanızda gerekli stilleri eklemektir.

5) Giriş alanlarını devre dışı bırakma

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

İstediğiniz zaman, kullanıcının belirli bir eylemi gerçekleştirene kadar (örneğin “şartları okudum” onay kutusunu işaretleyin) ve bu kod satırını tamamlayana kadar, bir formun gönder düğmesine veya metin girişlerinden birinin bile devre dışı bırakılmasını isteyebilirsiniz. o; Engelli özniteliği girişinize ekler, böylece istediğiniz zaman etkinleştirebilirsiniz.

Bunu yapmak için tek yapmanız gereken, input üzerindeki removeAttr işlevini parametre olarak devre dışıyken çalıştırmaktır:

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

6) Bağlantıların yüklenmesini durdurun

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

Bazen bağlantıların belirli bir sayfaya gitmesini ya da yeniden yüklemesini istemiyoruz, başka bir senaryoyu tetiklemek gibi başka bir şey yapmasını istiyoruz ve bu durumda bu kod parçası varsayılan eylemi önleme hilesini gerçekleştirecektir.

7) geçiş / slayt geçiş

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

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

Slaytlar ve Fadlar jQuery kullanarak animasyonlarımızda bolca kullandığımız bir şeydir, bazen sadece bir şeyi tıkladığımızda bir öğeyi göstermek isteriz ve bunun için fadeIn ve slideDown yöntemleri mükemmeldir, ancak bu öğenin ilk tıklamada görünmesini istiyorsak ve Daha sonra ikinci bu kaybolacaksınız, bu kod sadece iyi çalışacaktır.

8) Basit 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;
});

Bu betik ekleyerek gerçekten ihtiyacınız olan tüm sayfanızda gereken HTML bu işe gitmeye gidelim.

Bu pasajda görebildiğiniz gibi akordeondaki tüm panelleri ilk olarak kapattım ve daha sonra tıklatma olayında bu üstbilgi kaydırma geçişine bağlı içeriği yaptım ve diğeri kayıyordu. Hızlı bir akordeon için basit bir yöntem.

9) Aynı boyda iki div yapın

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

Bazen içlerinde hangi içeriğe sahip olursa olsun aynı yüksekliğe sahip iki div istersiniz, bu küçük pasaj bunu mümkün kılar; bu durumda min-yüksekliğini ayarlar, yani ana div'dan daha büyük olabilir ama asla daha küçük olamaz. Bu web siteleri gibi duvarcılık için harika.

10) Zebra sırasız liste sıyrıldı

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

Bu küçük snippet ile kolayca zebra çizgili sırasız listeler oluşturabilir, bu her bir tek liste öğesinde tanımladığınız arka planı yerleştirir, böylece CSS dosyanızdaki varsayılanlar için varsayılan olanı yerleştirebilirsiniz. Bu parçacığı, tablolardan düz divlara, zebra sıyrılmak istediğiniz her şeye istediğiniz şekilde ekleyebilirsiniz.

Sonuç

Bunlar projelerimde tekrar tekrar kullanıyorum jQuery kodu parçalarıdır. Umarım bu sayfayı işaretlersiniz ve bu parçacıklardan birine ihtiyacınız olduğunda geri gelirsiniz.

Hangi jQuery snippet'larına güveniyorsunuz? Bu senaryolar için daha iyi kodunuz var mı? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, kullanışlı resim Shutterstock üzerinden.