0,0
рейтинг
5 февраля 2014 в 19:13

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



Спустя годы библиотека 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();

});

Источник
Перевод: Jean-Baptiste Jung
Александр Малинов @almalini
карма
24,0
рейтинг 0,0
Full Stack Web Dev
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (54)

  • 0
    Не совсем понятен код проверки загрузки изображения… Тоесть у тега есть src на изображение, и при эвенте что оно загрузилось Вы меняете аттрибут на это же самое изображение?
    • –1
      Скорее при ошибке загрузки изображения мы пытаемся его загрузить снова.
      • +2
        Нет. Этот код
        var imgsrc = 'img/image1.png';
        $('<img/>').load(function () {
            alert('image loaded');
        }).error(function () {
            alert('error loading image');
        }).attr('src', imgsrc);
        

        эквивалентен этому
        $('<img/>').load(function () {
            alert('image loaded');
        }).error(function () {
            alert('error loading image');
        }).attr('src', 'img/image1.png');
        

        .load — это навешивание обработчика на событие 'load' в данном контексте. Сначала вешаем обработчики, потом загружаем изображение (присваивая значение imgsrc атрибуту src).
  • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      Как страшно жить.
  • +13
    Вы хотели показать именно кроссбраузерное решение? Потому что
    Табличные полосы (зебра)

    делаются чистым css. Да, у ИЕ, ниже 9, с ними будут проблемы, но все же.

    А так, спасибо, много полезного.
    • +28
      И не только зебра делается через css.
      Ишь, удумались, css-свойства картинкам через js устанавливать. Про max-width не слышали что ле?
      Одинаковая высота блоков? Это же вообще класическая css задача! Однопиксельную полосочку нужно подкладывать, чтоб колонки сэмулировать :-)
      А div по ширине/высоте вьюпорта — это вообще курам на смех.

      Ну и не говоря уже про качество кода в таких сниппетах.
      Например, при проверке сложности пароля нужно всю инициализацию выносить наружу. Создание трёх RegExp и семи jQuery объектов (они не кешируются) на каждое нажатие клавиши — далеко не самое оптимальное решение.
      • +9
        Ага, а самое страшное что люди ЭТО плюсуют и около тысячи добавили в избранное.
        jQuery сам по себе хороший инструмент, но не тогда когда берут и копипастят откровенный говнокод в свои проекты. Мне это напоминает нулевые, когда на форумах люди выкладывали «скрипт гостевой книги»/«галерея изображений» где простыня откровенного фарша на пыхе творила не пойми что.
        Те кто понимают что делают эти «магические строки» никогда не «возьмут на вооружение» такой бред, ну а для тех кто «не в теме» эти сниппеты «медвежья услуга».
  • –3
    $('a[href=#]').click(function(){ return false; });
    • +2
      Плавный скролл к верху страницы
    • +3
      А потом событие клика в самый ответственный момент не всплывёт. Тогда уж лучше preventDefault:
      $('a[href=#]').click(function(e){ e.preventDefault(); });
      
  • +6
    Я бы необходимость сделать из таблицы «зебру» переложил на css
    • +1
      Я тоже не понял сакрального смысла делать это через js, кроме особых случаев.
  • +24
    • +1
      Интересные примеры. Но всетаки jquery — это фреймворк с удобным и привычным апи. Сейчас можно сконфигурировать jquery под себя и использовать ровно то, что нужно.
      Для тех же ajax запросов так или иначе прийдется писать обертку
      • +2
        jQuery — это не фреймфорк, а библиотека.
        • –6
          Фреймворк — это набор библиотек. Так вот jquery — это как минимум сизл + ядро jquery. Сейчас это просто набор компонентов, которые можно собрать ровно так как тебе это нужно.
          И да, зря я поддался на провокацию. Как ваше замечание меняет суть вышеизложенного?
          • 0
            Фреймворк — это не набор библиотек, а каркас приложения. Загляните на, скажем, википедию.
            На суть вышеизложенного никак не влияет, я просто указываю вам на грубую ошибку, допущенную в комментарии.
            • –6
              Загляните, скажем, не на русскую википедию.
              In computer programming, a software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software. A software framework is a universal, reusable software platform to develop applications, products and solutions

              Вот вам цитата, чтобы далеко не заглядывать
      • +2
        Лучше бы ваниль была привычной, так как иногда смотришь на эти жикверьные цепочки в каше и становится не по себе. Если бы jQuery использовали только в случае наличия в доставшемся проекте или требования включают поддержку старых браузеров… мечты.
        • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          jQuery облегчает работу с DOM, не вижу в этом ничего плохого. Что касается каши, ну а что можно сделать с тем, что jQuery в принципе позволяет писать говно?
          Это примерно как с PHP, низкий порог вхождения даёт соответствующие последствия. Правда, в случае PHP сам язык спроектирован неважно.
  • +3
    пример с «Div по ширине/высоте вьюпорта» не будет работать, так как переменные ширины/высоты окна устанавливаются изначально и не корректируются на resize.
  • –4
    Все снипеты вроде простые и очевидные. Но иногда полезно бегло проглядывать подобные подборки снипетов, чтобы потом они всплывали в голове в подходящей ситуации.

    А вот качество кода приведенных примеров действительно хромает. Рефакторить их надо!
    Хотя, если не копипейстить эти снипеты, а просто запоминать их применение, то и так сойдет.
    • +1
      Рефакторинг не поможет, в половине примеров подход грубо неправильный.
      • –1
        Меня больше заинтересовали идеи снипетов, но не реализация (кривая в данном случае).
  • +37
    На хабре поколение сменилось? Очередная волна изучающих jQuery с нуля?
  • +20
    Почти «Вредные советы», если исключить пару-тройку примеров, которые действительно нельзя (без лишних проблем) заменить на что-либо иное.
  • +9
    $('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');
           });
       }
    });
    

    Зачем так усложнять? Почему просто не дать ссылке аттрибут target=_blank?
    • –12
      К сожалению, не могу ответить за автора. Я только перевел. И, действительно, как пишут выше, сниппеты довольно спорные.
      Например, решение с _blank оно даже невалидно и корректней его делать повесив на ссылку атрибут rel=«external», а открывать уже простым js опеном.

      $('body').on('click', 'a[rel="external"]', function() {
        window.open($(this).attr('href'));
        return false;
      });
      
      • +8
        То что вы написали — тоже какая-то фигня. Зачем делать что-то за браузер?
        • +1
          Ну был раньше такой загон, вам выше написали, — всё должно быть валидно.
          Чтоб эмблему W3C можно было в подвале повесить или просто для удовлетворения чсв, не знаю. Но поганый target="_blank" ломал весь кайф и заставлял w3c-валидатор ругаться. Поэтому исходно этот атрибут выпиливали, а для достижения требуемого эффекта подключали js.
          • +1
            Идиотский загон, тем более в отношении нынешних реалий. Абсолютно все браузерные префиксы вне стандарта.
            rel браузерам не важен, в отличии от target
            Я более чем уверен, что 99,9% пользователей глубоко наплевать что думает про ваш сайт w3c валидатор, ему главное чтобы браузер его правильно открывал
            • +1
              Я вас и не пытался убедить в обратном, зачем вы всё это мне рассказываете.
          • 0
            Если я не ошибаюсь, то target="_blank" проходит валидацию в html5 документах.
            • 0
              Да, его вернули.
        • 0
          Благодарю. В целом, комментарии стали для меня показателем собственной некомпетентности в сабже. Чему рад, так как конкретизировались недостатки и понятно над чем работать. Признаю: «лох и опозорился» ©.
    • 0
      Автор неверно описал суть кода. Там не атрибут добавляется, а внешние ссылки открываются в новом окне (вкладке). Причем данный код не будет корректно работать с относительными ссылками. Теперь по вашему вопросу: что будет с _blank в будущем не ясно (мне по крайней мере), будет он всегда поддерживаться или нет не известно. А во-вторых, часто это просто удобно, открывать все внешние ссылки в новой вкладке и при этом не думать о том, что контент-менеджер забыл указать _blank.
  • 0
    $("#refresh").load(location.href+" #refresh>*","");

    зачем к url добавлять #refresh>*? это типа анти-кеширование? тогда Math.random() использовать будет попрактичнее)
    • +5
      load по ссылке подгрузит всю страницу, а с #refresh возьмет из всей страницы только элемент #refresh (а >* все что в нем), и вставит его в существующий #refresh.
  • 0
    Второй сниппет, копирующий в футер таблицы её шапку, не работает, если на странице больше одной таблицы. Точнее работает, но превращает таблицы в кашу.
  • –5
    Может кто-нибудь пояснить зачем поддерживается версия jQuery 1.1 наравне с 2.x?
    • +7
      Может кто-то пойдет и прочтет на сайте jQ три строки с описанием версий, дабы не задавать такие вопросы?
  • 0
    Плавный скролл к верху страницы
    Для решения этой задачи я бы навесил плагины scrollTo и localScroll и тем невозбранно достиг бы желаемого, а также избавился бы от излишней возни в случае возникновения вопросов «а что делать, если откручивать не совсем до верха?», «а что делать, если хочется после этого #top сохранить в строке адреса?» и прочих.
  • +19
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    
    Можно подозревать, и подозреваю, что автором этого кода был лютый фанат регулярных выражений. Любой другой бы сравнил у строки свойство «.length» с шестёркою — и на том успокоился бы.
  • +3
    Пункт «Частичное обновление страницы»
    поправьте, если не прав, но очень топорное решение — к серверу пойдет запрос на генерацию всей страницы, после чего js заставляют вычленять из всего dom'a нужный блок и вставлять его содержимое в этот же блок. Если обновляется какая-то часть страницы, то и грузиться с сервера должна только часть, а не вся страница целиком, иначе тогда в чем суть Ajax'a здесь?
  • +7
    Я не знаю за что тут плюсовать, решения сами по себе ужачны и их код тоже. Не учите людей плохому.
  • 0
    Эти вредные сниппеты, как мне кажется, рассчитаны в первую очередь на новичков в мире js, когда полного понимания еще нет, но решение нужно здесь и сейчас. Думаю, что любой разработчик, использующий js не меньше чем год, сможет написать любой сниппет с 0, даже без исп. jquery. И сделает он это более эффективно, если речь идет о производительности.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Полностью согласен. Никогда не понимал ресурсы, требующие определенных правил в паролях. Ничего, кроме раздражения, не вызывает.
    • 0
      А если пользователь захочет без пароля? Это ведь пользователь должен решать какой пароль и нужен ли он ему вообще?
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Табличные полосы я бы лично делал на CSS
  • 0
    нажатием ссылки (с id #top)

    <a id="top">Top</a>
    

    В таком варианте, код приведенный в статье работать не будет.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.