Kod

10 JQuery Snippets Każdy projektant powinien wiedzieć

jQuery jest używany na tysiącach stron internetowych. Jest to jedna z najpopularniejszych bibliotek do wstawiania na strony i sprawia, że ​​manipulacja DOM jest bardzo prosta.

Oczywiście, częścią popularności jQuery jest jej prostota. Wygląda na to, że możemy zrobić prawie wszystko, co lubimy, dzięki tej potężnej bibliotece.

Dla wszystkich dostępnych nam opcji istnieją fragmenty, do których często wracamy. Dzisiaj chciałbym dać wam 10 fragmentów, które wszyscy, początkujący dla guru, będą używać raz po raz.

1) Powrót do górnego przycisku

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

//Create an anchor tag
Back to top

Jak widać przy użyciu animacji i funkcji scrollTop w jQuery, nie potrzebujemy wtyczki do stworzenia prostej animacji przewijania do góry.

Zmieniając wartość scrollTop możemy zmienić miejsce, w którym chcemy, aby pasek przewijania wylądował, w moim przypadku użyłem wartości 0, ponieważ chcę, aby trafił na samą górę naszej strony, ale gdybym chciał przesunąć o 100 pikseli, mógłbym tylko wpisz 100px w funkcji.

Więc tak naprawdę wszystko, co robimy, to animowanie treści naszego dokumentu w ciągu 800 ms, aż przewinie się na samą górę dokumentu.

2) Sprawdzanie, czy obrazy są załadowane

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

Czasami musisz sprawdzić, czy twoje obrazy są w pełni załadowane, aby móc kontynuować pracę ze skryptami, ten trzy-wierszowy fragment jQuery może to dla ciebie zrobić łatwo.

Możesz również sprawdzić, czy załadowałeś jeden konkretny obraz, zastępując tag img identyfikatorem lub klasą.

3) Napraw automatycznie uszkodzone obrazy

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

Czasami zdarza się, że mamy uszkodzone łącza do obrazów na naszej stronie internetowej i zastępowanie ich po kolei nie jest łatwe, więc dodanie tego prostego fragmentu kodu może zaoszczędzić ci wielu bólów głowy.

Nawet jeśli nie masz żadnych uszkodzonych linków, dodanie tego nie zaszkodzi.

4) Przełącz klasę po najechaniu kursorem

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

Zwykle chcemy zmienić wygląd klikalnego elementu na naszej stronie, gdy użytkownik się unosi, a ten fragment kodu jQuery właśnie to robi, dodaje klasę do elementu, gdy użytkownik unosi kursor, a gdy użytkownik zatrzymuje, usuwa klasę, więc wszystko, co musisz zrobić, to dodać niezbędne style do pliku CSS.

5) Wyłączanie pól wprowadzania

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

Może się zdarzyć, że przycisk przesyłania formularza lub nawet jeden z jego tekstów zostanie wyłączony, dopóki użytkownik nie wykona określonej czynności (zaznaczenie pola wyboru "Czytałem warunki") i ta linia kodu zostanie spełniona że; dodaje do atrybutu disabled, aby można go było włączyć, gdy chcesz.

Aby to zrobić, wystarczy uruchomić funkcję removeAttr na wejściu z wyłączoną jako parametr:

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

6) Zatrzymaj ładowanie linków

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

Czasami nie chcemy, aby linki przechodziły na określoną stronę, a nawet przeładowywały, chcemy, aby zrobiły coś innego, jak wyzwalanie jakiegoś innego skryptu. W takim przypadku ten fragment kodu zapobiegnie domyślnej akcji.

7) Przełącz zanikanie / przesuwanie

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

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

Slajdy i zanikanie są czymś, czego używamy w naszych animacjach za pomocą jQuery, czasami po prostu chcemy pokazać element, gdy klikamy coś, a do tego metody fadeIn i slideDown są idealne, ale jeśli chcemy, aby ten element pojawiał się przy pierwszym kliknięciu i następnie znikają na sekundę, ten fragment kodu działa dobrze.

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

Dodając ten skrypt, wszystko, czego naprawdę potrzebujesz na swojej stronie, to niezbędny HTML, aby to działało.

Jak widzimy w tym fragmencie, najpierw zamknąłem wszystkie panele w naszym akordeonie, a potem w zdarzeniu kliknięcia zrobiłem zawartość, która jest połączona z tym przełącznikiem slajdów nagłówka, a wszystkie pozostałe przesuwają się w górę. To prosta metoda na szybki akordeon.

9) Zrób dwa divy o tej samej wysokości

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

Czasami chcesz, aby dwa elementy div miały taką samą wysokość niezależnie od zawartości w nich zawartej, ten mały fragment umożliwia to; w tym przypadku ustawia min-wysokość, co oznacza, że ​​może być większy niż główny div, ale nigdy mniejszy. To jest świetne dla witryn podobnych do kamieni.

10) Zebra pozbawiona nieuporządkowanej listy

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

Za pomocą tego małego fragmentu można łatwo tworzyć listy nieporządek pasiastych, co powoduje, że tło definiuje się na każdym elemencie listy nieparzystej, dzięki czemu można umieścić domyślną dla niezrównanych w pliku CSS. Możesz dodać ten fragment do dowolnego typu znaczników, od tabel po zwykłe elementy div, wszystko, co chcesz, aby zebra została usunięta.

Wniosek

Są to fragmenty kodu jQuery, z których korzystam wielokrotnie w moich projektach. Mam nadzieję, że dodasz tę stronę do zakładek i wrócisz, gdy będziesz potrzebować jednego z tych fragmentów.

Na jakich fragmentach jQuery polegasz? Czy masz lepszy kod dla tych scenariuszy? Daj nam znać w komentarzach.

Wyróżniony obraz / miniatura, użyteczny obraz przez Shutterstock.

jquery fragmenty jquery jQuery dla początkujących uczyć się jquery użyteczne jquery