Выделение группы чекбоксов с помощью клавиши Шифт

Такая возможность есть в почте Гугла и она мне очень нравится. Суть в том, что в 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>

А вот страница с примерами работы всех сниппетов.

Надеюсь, что эти сниппеты будут вам полезны и удобны в работе. Если у вас есть идею для сниппетов, пишите нам — реализуем.