Полезные сниппеты на jQuery
Привет!
Помните, когда-то давно мы делали подборки сниппетов jQuery? Так вот, тогда мы закончили их выпускать, так как не могли придумывать 3-5 сниппетов в неделю, а публиковать всякий треш не хотелось.
Недавно Саша подкинул мне идею для пары сниппетов. Они будут особенно полезны тем, кто либо пока плохо знает jQuery, либо не знает его совсем. В любом случае это полезные штуки, которые довольно часто используются на сайтах.
Выделение группы чекбоксов с помощью клавиши Шифт
Такая возможность есть в почте Гугла и она мне очень нравится. Суть в том, что в 2 клика можно выделить группу чекбоксов. Очень удобно в различных файловых менеджерах, почтах и прочих интерфейсах с большим количеством чекбоксов. Итак, сам код:
<script type="text/javascript">
// код сниппета
(function($) {
$.fn.setCheckboxesShift = function() {
var cbx = this,
last = -1, // номер предыдущего чекбокса;
start, // служебные
finish; // переменные
// проходим по каждому указанному чекбоксу
cbx.each(function(index) {
// при клике по нему (или его лэйблу)
$(this).click(function(e) {
// проверяем, стал ли он чекнутым
if($(e.target).attr('checked')) {
// теперь смотрим, больше ли у предыдущего индекс
if(index > last) { start = last; finish = index;
} else { start = index; finish = last; }
// если был предыдущий и зажата клавиша Шифт
if(last > -1 && e.shiftKey) {
// проходим с начального до конечного чекбокса
for(i = start; i <= finish; i ++) {
// и делаем их выделенными
$(cbx[i]).attr('checked', 'checked');
}
}
// запоминаем индекс только что кликнутого чекбокса
last = index;
}
});
});
};
})(jQuery);
$('#checkboxes-list').disableTextSelect(); // для этого нужен плагин disableTextSelect
// к указанным чекбоксам добавить такую возможность
$('#checkboxes-list :checkbox').setCheckboxesShift();
</script>Клик по объекту плавно разворачивает какой-то блок
Такой сниппет будет полезен в списке частых вопросов, где при клике на вопрос открывает ответ на него. Сниппеты можно применить как к группе пар «ссылка-блок», так и к одной паре.
<script type="text/javascript">
// код сниппета
(function($) {
$.fn.openCloseBlocks = function(blocks, options) {
var defaults = {
speed: 'normal'
},
opts = $.extend(defaults, options),
togglers = $(this),
bls = $(blocks); if(!bls) return;
togglers.each(function(index) {
$(this).click(function(e) {
e.preventDefault();
$(bls[index]).slideToggle(opts['speed']);
});
});
};
})(jQuery);
// использование
// выбераем нужные ссылки
// аргумент — что открывать (i-ый элемент первого массива
// открывает i-ый элемент второго массива)
$('div > a').openCloseBlocks($('div.blocks'), {
speed: 'fast'
});
</script>Клик по объекту показывает блок прямо под ней поверх контента
Выпадающее меню, которые можно наблюдать у нас в «Вопросах и ответах» и Эр-Эс-Эс иконке вверху страницы. Весьма полезная вещь.
<script type="text/javascript">
// код сниппета
(function($) {
$.fn.dropDownBlock = function(block, options) {
var defaults = {
speed: 'fast',
top: $(this).height(),
left: 0
},
opts = $.extend(defaults, options),
toggler = $(this),
block = $(block);
toggler.css({'outline': 'none'})
toggler.click(function(e) {
e.preventDefault();
$(block).css({
'position' : 'absolute',
'top' : (toggler.offset().top + opts['top']) + 'px',
'left' : (toggler.offset().left + opts['left']) + 'px'
});
if($(block).is(':visible')) $(block).fadeOut(opts['speed']);
else $(block).fadeIn(opts['speed']);
this.focus();
});
toggler.blur(function() {
$(block).fadeOut(opts['speed']);
});
};
})(jQuery);
// использование
// при клике на #toggler
// под ним показывается #drop-down-list
$('#toggler').dropDownBlock($('#drop-down-list'), {
speed: 'slow',
left: 10
});
</script>А вот страница с примерами работы всех сниппетов.
Надеюсь, что эти сниппеты будут вам полезны и удобны в работе. Если у вас есть идею для сниппетов, пишите нам — реализуем.
Понравилась статья?
Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.
Комментарии — 20
RSSОбъект - это она что ли? :)
Да, с помощью джиквери.
toggler.offset(), а неtoggler.position()?Просто position() возвращает тот же объект, но у offset'а проблемы с результатами при фиксированной ширине на мониторах с большим расширением, т.е. не правильно пересчитывается отступ слева, сам на такое несколько раз натыкался, приходилось добавлять левую «пустую» колонку, пока position() не попробовал )
А еще в предпросмотре неверно экранируется апостроф )
У меня есть встречный вопрос относительно сниппета «Клик по объекту показывает блок прямо под ней поверх контента»:
Подскажите пожалуйста, как сделать, чтобы при клике на сам блок он не исчезал, а исчезал при клике на кнопочку/текст (так сказать чтобы закрыть блок)?
Этот сниппет было интересно попробовать реализовать для быстрой формы логина!
Спасибо!
P.S. Извините за ч/б код, так и не понял как здесь можно разукрасить его :)
Подскажите пожалуйста, как можно использовать последний сниппет больше чем на одном блоке на странице. (у меня 2 блока, первый появляется, ссылка на второй не реагирует)