Zbiór 11 przydatnych fragmentów kodu jQuery, które powinien znać każdy Web Developer.
1. Przewiń stronę do góry
Ten krótki kod spowoduje, że po kliknięciu każdego elementu z klasą do-gory strona zostanie przewinięta do górnej krawędzi. Parametr duration (obecnie ustawiony na 800) określa czas animacji w milisekundach (1 sekunda = 1000 milisekund).
$( ".do-gory" ).on( "click", function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 800);
});
2. Wiele elementów tej samej wysokości
Ten fragment kodu wybierze wszystkie elementy div wewnątrz .container, znajdzie najwyższy z nich i ustawi jego wysokość dla wszystkich.
var highestBox = 0;
$('.container div').each(function() {
// znajdź najwyższy element
if ($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
// ustaw wysokość elementów
$('.container div').css("min-height", highestBox + "px");
3. Wyłącz input
Przydatny kod, jeśli podczas walidacji formularza chcemy wyłączać niektóre elementy input.
$('input').attr("disabled", true);
Możesz również wyłączyć tylko przycisk submit.
$('input[type="submit"]').attr("disabled", true);
Jeśli chcesz ponownie aktywować input, to po prostu usuń atrybut disabled.
$('input[type="submit"]').removeAttr("disabled");
4. Zatrzymanie linków
Dzięki temu snippetowi, możesz wyłączyć domyślne działanie odnośnika.
$( ".link" ).on( "click", function(event) {
event.preventDefault();
});
5. Otwieraj wszystkie zewnętrzne linki w nowej karcie
Ten prosty kod spowoduje, że każdy zewnętrzny link zostanie otwarty w nowej karcie.
$('a[href^="http://"]').not('a[href*=nazwadomeny]').attr('target','_blank');
6. Pobierz wartość inputa
Bardzo przydatny snippet podczas pobierania danych z formularza.
Tekstowy:
var name = $('#name').val();
Radio:
$("input[type='radio']:checked").val();
Checkbox:
$("input[type='checkbox']").val();
7. Walidacja adresu email
Prosta walidacja adresu email.
function validateEmail($email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test($email);
}
if (!validateEmail($('#name').val())) {
console.log('Adres nieprawidłowy!');
} else {
console.log('Adres prawidłowy!');
}
8. Wykrywanie akcji użytkownika
jQuery umożliwia bardzo proste wykrywanie akcji użytkownika takich jak wycinanie, kopiowanie, wklejanie i tak dalej.
$("p").bind('copy', function() {
console.log('Tekst został skopiowany.');
});
$("input").bind('paste', function() {
console.log('Tekst wklejony.');
});
$("input").bind('cut', function() {
console.log('Tekst został wycięty.')
});
9. Przełączanie klas podczas kliknięcia
Ten kod spowoduje, że po kliknięciu buttona uzyska on klasę active. Po ponownym kliknięciu na przycisk klasa active zostanie usunięta.
$('button').toggleClass('active');
10. Wyszukanie elementu tekstem
Ten snippet pobierze wartość z wyszukiwarki (#search) i ukryje wszystkie paragrafy (p), które nie zawierają podanego w wyszukiwarce tekstu.
var search = $('#search').val();
$('p:not(:contains("' + search + '"))').hide();
11. Footer zawsze na dole
Bardzo przydatna funkcja, która pozycjonuje footer zawsze przy dolnej krawędzi strony.
var footerHeight = 0,
footerTop = 0;
function positionFooter(footer) {
footerHeight = footer.height();
footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";
if (($(document.body).height() + footerHeight) < $(window).height()) {
footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
footer.css({
position: "static"
})
}
}
positionFooter($('footer'));
Myślę, że cenny artykuł i przypadki dość popularne, na które jest zapotrzebowanie wśród osób, które nie mają większego obycia z jquery.
Co do 3 pozycji:
$(’input’).attr(„disabled”, true);
Ja bym użył:
$(’input’).prop(’disabled’,true);
$(’input’).prop(’disabled’,false);
Dwie uwagi do poniższych punktów:
7. Regex jest nieaktualny, bo obsługuje tylko domeny od 2 do 4 znaków, a od jakiegoś czasu są dostępne dłuższe domeny np. „.restaurant” czy „.cooking”. Wiem, że można sobie zmienić ten regex, ale może nie każdy wie o co w tym chodzi i warto zamiast „{2,4}” dać „{2,}”?
11. Warto znać, nie warto wykorzystywać, da się to znacznie łatwiej osiągnąć css’em, a im mniej js tym lepiej 🙂
Mimo że popularne, prawie oczywiste to fajnie mieć to w jednym miejscu :).