10 jQuery снипетов, которые следует знать каждому дизайнеру

jQuery используется на тысячах и тысячах веб-страниц. Это одна из наиболее распространенных библиотек, используемых на страницах, и она превращает манипулирование DOM-деревом в забаву.

Конечно, отчасти jQuery популярен из-за его простоты. Кажется, что мы можем сделать все, что пожелаем при помощи этой мощной библиотеки.

Для всех доступных нам опций есть фрагменты кода, которые мы используем снова и снова. Сегодня я хочу поделиться с вами 10 снипетами которые раз за разом используют все, от новичков до гуру.

1. Кнопка «наверх»

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

// Create an anchor tag
<a class="top" href="#">Back to top</a>

Как видите, используя jQuery функции animate и scrollTop мы создаем простую анимацию скроллинга до верха страницы, без нужды применять какой-либо плагин.

Изменяя значение scrollTop, мы можем изменять позицию, до которой будет произведен скроллинг, в моем случае я использовала значение равное 0, потому что я хочу, чтоб скроллинг был совершен до самого верха страницы, но если бы мне понадобился отступ в 100 пикселей, я бы мог просто передать 100px в качестве параметра в функцию.

И так, все что мы на самом деле делаем, так это анимируем тело нашего документа в течении 800 милисекунд, пока он пролистается до самого верха.

2. Проверка загруженности картинок

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

Иногда бывает нужно проверить, полностью ли загрузились картинки, прежде чем продолжить выполнение скриптов, этот трехстрочный jQuery сниппет с легкостью может сделать это для вас.

Вы также можете проверить, загрузилась ли одна определенная картинка, заменив тэг img на идентификатор или класс.

3. Автоматическая коррекция битых ссылок на изображения

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

Время от времени мы попадаем в ситуацию, когда на нашем сайте появляются битые ссылки на изображения, а заменить их одну за другой не легко, добавление этого простого фрагмента кода может уберечь вас от головной боли.

Даже если у вас нет битых ссылок, его добавление совсем не повредит.

4. Переключение класса при наведении курсора

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

Обычно мы хотим изменить визуальное представление элемента страницы, когда пользователь наводит на него курсор, и данный jQuery сниппет делает именно это, он добавляет класс, когда пользователь наводит курсор, и удаляет класс, когда пользователь уводит курсор в сторону, так что все, что вам нужно, это добавить необходимые стили в ваш CSS файл.

5. Отключение полей ввода

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

Иногда вам нужно сделать недоступной кнопку отправки формы или даже одно из полей ввода, до того момента, пока пользователь не выполнит определенное действие (например, щелкнет по чекбоксу «Я прочитал правила»), данная строка кода делает как раз это; она применяет атрибут disabled к вашему элементу формы, так что вы можете активировать его когда понадобится.

Чтобы сделать это, все что вам нужно — вызвать функцию removeAttr для требуемого элемента и передать «disabled» в качестве параметра:

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

6. Отмена перехода по ссылкам

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

Иногда мы не хотим, чтоб клик по ссылке приводил к переходу на другую страницу или даже к перезагрузке страницы, нам нужно, чтоб произошло что-то другое, например, сработал какой-то другой скрипт, и в этом случае этот фрагмент кода поможет отменить стандартное поведение.

7. Переключение затухания/слайдов

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

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

Слайды и затухания это то, что мы широко используем в наших jQuery анимациях, иногда мы хотим просто показать элемент, когда мы щелкаем по чему-либо, и для этого отлично подходят методы fadeIn и slideDown, но если нам нужно, чтоб по первому щелчку элемент появлялся, а по второму исчезал, то пригодится вот этот фрагмент кода.

8. Простой аккордеон

// 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;
});

После добавления этого скрипта, все что понадобиться вашей странице, чтоб заставить его работать это необходимый HTML-код.

Как вы можете понять из сниппета, в первую очередь я закрыл все панели в нашем аккордеоне, а затем при обработке клика, раздвинул связанный с заголовком контент, а все остальные сдвинул вверх. Это простой метод для быстрого создания аккордеона.

9. Привести два div’а к одинаковой высоте

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

Иногда вам нужно, чтоб два div’а имели одинаковую высоту вне зависимости от содержащегося в них контента, этот небольшой сниппет позволяет вам это сделать. В данном случае он задает параметр min-height, который означает, что элемент может быть больше главного div’а, но не меньше. Он здорово подходит, для сайтов с плиточной структурой разметки.

10. Полосатый список

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

С помощью этого небольшого сниппета вы с легкостью можете создать полосатый неупорядоченный список, он применяет заданное вами значение фона для каждого нечетного элемента списка, таким образом вы можете задать стандартное значение для четных элементов в CSS файле. Вы можете применять этот сниппет к любому типу разметки, от таблиц до простых div’ов, и всего, что вы хотите разукрасить в полоску.

Заключение

Эти фрагменты jQuery кода я использую снова и снова в своих проектах. Я надеюсь вы добавили эту страницу в закладки и вернетесь, когда вам понадобится один из этих снипетов.

Оригинал статьи на английском на сайте Webdesigner Depot

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *