Швейцарский нож jQuery-разработчика — jQuery Helpers

Thu, 07 Aug 2014 17:47:06 +0400

Каждый веб-разработчик, работающий с jQuery, со временем начинает собирать удачные решения и ходы, для того, чтобы применять их в будущих проектах. Со временем таких решений накапливается много, некоторые из них перерастают в плагины, а некоторые небольшие, но полезные куски кода копируются из проекта в проект. Похожим образом получилось и у меня. И сейчас я хочу поделиться с вами своими наработками. Надеюсь, для кого-то из вас они тоже окажутся полезными :-)

Можно посмотреть на Гитхабе или сразу скачать.

makeActive
cycle
genHtml
appendCount, prependCount
onlyDigits
parseInt, parseFloat
breakdown
cleaner
dataObject
popup
transmit
src, href
disable, enable
hash, pathname
run
removeSpaces
reverse
ending

makeActive (’classname’ || object{classname, selector})

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

$(this).makeActive('my_class_name');

Или передать объект, заключающий в себе название класса и селектор соседних элементов:

$(this).makeActive({
	className: 'my_class_name',
	selector: 'div'
});

Пример:

$('div').click(function(){
    $(this).makeActive();
});

cycle (’next’ || ’prev’)

Не знаю как вам, а мне иногда катастрофически не хватает циклических next / prev в jQuery. Эту проблему я решил, написав хелпер cycle, который принимает next или prev в качестве строки.

Пример:

$('#prev').click(function(){
    $('.wrap div.active').cycle('prev').makeActive();
});

$('#next').click(function(){
    $('.wrap div.active').cycle('next').makeActive();
});

genHtml (code, count)

Иногда бывает задача создать определённое количество html элементов, например для пагинации слайдера.

Конструкции вроде:

$('.slide').each(function(i){
	var $li = $('<li>').append('<a><span>'+ (i+1) +'</span></a>');
	$pagination.append($li);
});

меня всегда бесили. Поэтому был написан хелпер genHtml, который принимает тег строкой и количество.

appendCount, prependCount

Вставляют нужное количество html элементов на страницу, используя genHtml. Синтаксис такой же как у genHtml.

onlyDigits

Иногда требуется текстовый инпут, в который физически можно ввести только цифры. К великому сожалению, стандартные средства html не предлагают такого функционала (даже <input type="number" /> в котором это было бы логично). Для этого существует хелпер onlyDigits.

$('input').onlyDigits();

parseInt, parseFloat

Вызываются у блока с числом или инпута и возвращают число сразу с типом number.

breakdown

С помощью этого хелпера, можно разбить число пробелами по разрядам.

$('#num').breakdown();

cleaner

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

Для этих целей был написан хелпер cleaner. Он добавляет рядом с инпутом <a class="clean" />, который можно оформить с помощью css как душе угодно.
Желательно перед использованием обернуть инпут в какой-нибудь див, а крестик прижать вправо абсолютным позиционированием. А после этого добавить инпуту паддинг справа, чтобы текст не заезжал на крестик. Да, к сожалению всё это не так удобно, как мне хотелось бы, но работаю над упрощением. Для стандартного использования написан css-код, который желательно просто копировать в основной файл стилей своего проекта и изменять.

dataObject

Данный хелпер позволяет доставать javascript-объекты из атрибутов data-*. Используется также, как и стандартный метод .data() в jQuery, только вместо строки возвращает объект.

Иногда нужен простой попап, который бы закрывался при клике за его пределами. Для этого был написан хелпер popup. При вызове он добавляет элементу класс shown, и удаляет при закрытии (я использую добавление класса, а не show/hide, чтобы управлять анимацией появления при помощи css). Метод может принимать объект, с атрибутами link и close. link — ссылка, при клике на которую будет показан попап. close — элемент внутри попапа (крестик), при клике на который попап будет закрыт.

transmit (’method’, [options array])

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

$(window).load(function(){
	$('#object').click();
});

мне кажутся нелогичными и трудночитаемыми, когда намного логичней было бы так:

$(window).load($('#object').click);

Но jQuery перезаписывает контекст у колбеков. И конечно в 99% случаев это удобно, но не в данном.
Хелпер transmit частично решает эту проблему, позволяя писать так:

$(window).load($('#object').transmit('click'));

src, href

Возвращают/изменяют значение атрибутов src и href у элементов на странице. Мне не хватало таких методов как val() у инпутов, только для ссылок.

disable, enable

disable — добавляет атрибут disabled у элементов, enable — убирает.

hash, pathname

Возвращают/изменяют соответствующие части href у ссылок на странице.

run

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

removeSpaces

Удаляет пробелы между элементами. Служит, в основном, для решения проблем с инлайн-блоками.

reverse()

Разворачивает порядок следования jQuery объектов.

ending (end1, end2, end3, count)

Хелпер для формирования окончаний у слов во множественном числе.

Для определения возможностей браузера я рекомендую использовать Modernizr. Но в своей работе я сталкивался с тем, что не все нужные мне тесты были реализованы в нём. Поэтому я написал парочку своих, расширив jQuery.support, и оформив всё в файл jquery.support.js.

jQuery.support.calc

Определяет, поддерживает ли браузер css-функцию calc. Актуально для старых версий оперы и 8-го экслорера.

jQuery.support.flash

Определяет, установлен ли Flash на компьютере пользователя.

jQuery.support.mobile

Детектит мобильные браузеры.

jQuery.support.preserve3d

Проверяет, поддерживается ли браузером 3D представления. Актуально, если вы хотите использовать в своём проекте transform-style: preserve-3d;.

Хелперы собираются в один файл с помощью Гранта. Если проект получит развитие, в дальнейшем будет добавлена страница онлайн-сборки, где вы сможете собрать jQuery Helpers, выбрав только необходимые вашему проекту хелперы.

UPD: Произошла какая-то фигня, и я не заметил, как публикнул недописанный черновик. Но это даже хорошо, т. к. я бы ещё месяц его мусолил. Так что кто увидел — тссс.

Техноблог, заметки с тегом: jQueryHelpers