10+ полезных jQuery сниппетов на каждый день

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

Плавный скролл к верху страницы

Давайте начнем этот список с очень популярного и полезного сниппета: эти 4 строки кода позволят вашим посетителям плавно проскролить страницу к верху простым нажатием ссылки (с id #top) расположенной внизу страницы.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Источник ^[1]

Дублирование thead в самый низ html таблицы

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

var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function() {
  $tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

Источник ^[2]

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

Вам нужно добавить определенный внешний контент в div? Так вот это очень просто сделать с jQuery, как показано в нижеприведенном примере.

$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

Источник ^[3]

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

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

var maxheight = 0;
$("div.col").each(function() {
  if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

Источник ^[4]

Табличные полосы (зебра)

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

$(document).ready(function(){                             
     $("table tr:even").addClass('stripe');
});

Источник ^[5]

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

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

setInterval(function() {
  $("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait

Источник ^[4]

Предзагрузка изображений

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

$.preloadImages = function() {
       for(var i = 0; i<arguments.length; i++) {
               $("<img />").attr("src", arguments[i]);
       }
}

$(document).ready(function() {
       $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

Источник ^[6]

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

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

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

Источник ^[7]

Div по ширине/высоте вьюпорта

Этот удобный фрагмент кода позволяет создавать растянутый по ширине/высоте вьюпорта div. Код также поддерживает изменение размеров окна. Прекрасное решение для модальных диалогов и popup-окон.

// global vars
var winWidth = $(window).width();
var winHeight = $(window).height();

// set initial div height / width
$('div').css({
    'width': winWidth,
'height': winHeight,
});

// make sure div stays full width/height on resize
$(window).resize(function(){
    $('div').css({
    'width': winWidth,
    'height': winHeight,
});
});

Источник ^[8]

Проверка сложности пароля

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

Для начала создадим поля ввода:

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

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

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

Источник ^[9]

Изменение размеров изображения

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

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();
	
		if(width > maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
});

Источник ^[10]

Автоматическая загрузка контента по скроллу

Некоторые сайты, такие как Twitter ^[11] загружают контент по скроллу. Это значит, что весь контент динамически подгружается на странице в процессе прокрутки вниз.
Вот пример того, как вы можете сделать этот эффект на вашем сайте.

var loading = false;
$(window).scroll(function(){
	if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
		if(loading == false){
			loading = true;
			$('#loadingbar').css("display","block");
			$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
				$('body').append(loaded);
				$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
				$('#loadingbar').css("display","none");
				loading = false;
			});
		}
	}
});

$(document).ready(function() {
	$('#loaded_max').val(50);
});

Источник ^[12]

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

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

var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
    alert('image loaded');
}).error(function () {
    alert('error loading image');
}).attr('src', imgsrc);

Источник ^[13]

Сортировка списка в алфавитном порядке

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

$(function() {
    $.fn.sortList = function() {
    var mylist = $(this);
    var listitems = $('li', mylist).get();
    listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : 1;
    });
    $.each(listitems, function(i, itm) {
        mylist.append(itm);
    });
   }

    $("ul#demoOne").sortList();

});

Источник ^[14]

Автор: almalini

Источник ^[15]