WebDesignMagazine.ru – Журнал о веб-дизайне

Полезные jQuery сниппеты (часть 2)

0

За многие годы своего существования, jQuery стал обязательным помощником для каждого веб-разработчика. Сам по себе язык прост в использовании, быстрый и очень мощный. В этой статье, мы продолжим пополненние коллекцию наших jQuery сниппетов, которую мы начали в прошлом году. Данные сниппеты легко адаптировать под ваши ​​личные скрипты. Еще одна статья, которую нужно добавить в закладки!

Плавная прокрутка к началу страницы

Давайте начнем наш список с очень популярного и полезного сниппета. Следующие  4 строки кода, позволят вашим посетителям плавно перейти в начало страницы, просто нажав на ссылку (с #top ID), расположенную в нижней части страницы.

Как клонировать заголовок таблицы в её нижнюю часть.

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

Загрузка внешнего контента

Вам нужно добавить какой-то внешний контент в div? Это довольно легко сделать с помощью jQuery, как показано в примере ниже:

Колонки одинаковой высоты

Когда вы используете колонки для отображения контента на вашем сайте, то это будет определенно лучше выглядеть, если у колонок равная высота. Приведенный ниже код возьмет все элементы div с классом  .col, и подгонит их высоту в соответствии с большим элементом. Супер полезная штука!

Частичное обновление страницы

Если вам нужно обновить только часть страницы, тогда следующие 3 строки, безусловно вам помогут. В этом примере #refresh div автоматически обновляется каждые 10 секунд.

Предварительная загрузка изображений

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

Открытие внешних ссылок в новой вкладке/окне

Атрибут   target="blank" позволяет принудительное открытие ссылок в новых окнах. В то время как это имеет отношение к открытию  внешних ссылок в новой вкладке или окне, ссылки с теми же доменами, определенно должны быть открыты в том же окне.

Следующий код определяет, если ссылка является внешней, и если да, то тогда target="blank" атрибут добавляется к ней.

Div полная ширина/высота окна просмотра (viewport) с помощью jQuery

Данный сниппет позволит вам создать полную ширину/высоту div в соответствии с viewport. Код также обрабатывает изменения размера окна. Отлично подходит для модальных диалогов или всплывающих окон.

Проверить, загрузилось ли изображение

Этот сниппет является лучшим способом узнать, если изображение загружается или нет.

Сортировка списка по алфавиту

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

 

Мы уверены, вы найдете им достойное применение в своих новых проектах! Кстати, если вы использовали один из этих сниппетов у себя на сайте – скиньте ссылку в комментариях – мы оценим!

Поделиться: