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

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

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

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

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

Источник

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

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

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

Источник

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

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

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

Источник

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

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

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

Источник

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

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

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

Источник

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

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

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

Источник

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

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"); }); 

Источник

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

Аттрибут 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');        });    } }); 

Источник

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, }); }); 

Источник

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

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

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

<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; }); 

Источник

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

Вы конечно можете изменять размеры ваших изображений на стороне сервера (например, используя 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 }); 

Источник

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

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

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); }); 

Источник

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

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

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

Источник

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

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

$(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();  }); 

Источник