jQuery сниппеты для дизайнера

snippets

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

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

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

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

// скрипт $('a.top').click(function(){ $(document.body).animate({scrollTop 
: 0},800); return false; }); // ссылка <a class="top" href="#">Back to top</a>

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

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

Все, что мы делаем, это перетаскиваем окно просмотра до верху страницы всего за 800 миллисекунд.

02. Проверка загрузки изображений

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

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

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

03. Автоматическое исправление не загруженных изображений

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

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

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

04. Класс toggle при наведении

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

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

05. Отключение полей input

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

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

Для этого вам нужно будет просто убрать функцию removeAttr в элемента ввода:

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

06. Остановка загрузки ссылка

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

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

07. Переключатель скольжения/затмение

// затмение
$( ".btn" ).click(function() {
$( ".element" ).fadeToggle("slow");
});

// скольжения
$( ".btn" ).click(function() {
$( ".element" ).slideToggle("slow");
});

Скольжения и затмение — это самые распространенные анимации, которые реализуются с помощью jQuery. Иногда нам нужно просто отображать элемент по клику, или реализовать появление какого-либо элемента с помощью появления (функции fadeIn). Все эти эффекты становятся достижимыми за счет этого сніппету.

08. Простая гармошка

// закрытие всех панелей $('#accordion').find
('.content').hide(); // гармошка $('#accordion').find('.accordion-header').click(function()
{ var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false; });

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

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

09. Делаем два div-элементы одинаковой высоты

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

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

10. Неурегулированный список с шашечным раскрашиванием

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

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

На завершение

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