14 полезных сниппетов jQuery на все случаи жизни

14 полезных сниппетов jQuery на все случаи жизни

27 января 2014 3 645 3

Что-то давненько я не публиковал никакого кода. Сегодня я исправлю ситуацию и дам несколько полезных сниппетов на jQuery, которые обязательно вам пригодятся на ваших сайтах.

Reg.ru: Хостинг от 79 рублей
Reg.ru: Хостинг от 79 рублей

Я не буду вдаваться в теорию, вся документация по jQuery есть на официальном сайте библиотеки. Я лишь напомню, что, такое jQuery.

jQuery — это библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

Итак, поехали!

1. Плавная прокрутка к началу страницы

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

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

2. Дублируем заголовки таблиц

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

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

3. Подгрузка внешних данных

С помощью jQuery очень легко подгружать на веб-страницы внешний контент. Его можно вывести прямо в блок DIV, как в примере ниже.

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

4. Одинаковая высота колонок

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

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

5. Табличная зебра

Как известно, восприятие и читабельность таблицы будет заметно выше если сделать разноцветное чередование строк. Это очень легко реализуется на jQuery.

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

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

С помощью jQuery очень просто реализовать блочное (частичное) обновление страницы. К примеру, код ниже позволит вам каждые 10 секунд автоматически обновлять блок #refresh.

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

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

Данный код позволяет осуществлять загрузку изображений в фоновом режиме без подгрузок в процессе просмотра страницы. Просто перечислите в 7 строке необходимые вам для предзагрузки изображения.

$.preloadImages = function() {
      for(var i = 0; i&lt;arguments.length; i++) {
              $("<img />").attr("src", arguments[i]);
      }
}
$(document).ready(function() {
      $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

8. Открытие внешних ссылок в новых окнах/табах

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

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

9. Блок во все окно браузера

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

var winWidth = $(window).width();
var winHeight = $(window).height();
$('div').css({
     'width': winWidth,
     'height': winHeight,
});
$(window).resize(function(){
    $('div').css({
    'width': winWidth,
    'height': winHeight,
});
});

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

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

Для начала напишем HTML-часть кода:

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

А с помощью кода ниже мы проверим введенный пароль и выведем посетителю информацию: его пароль сложный, средний или слабый, а также проверим не слишком ли он короткий.

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

11. Ресайз изображений средствами jQuery

Конечно, логичнее изменять размеры изображений на стороне сервера средствами PHP и GD, но бывают ситуации когда это необходимо сделать именно на стороне клиента. И в этом снова нам поможет jQuery.

$(window).bind("load", function() {
$('#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
});

12. Подгрузка контента при прокрутке страницу вниз

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

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

13. Проверка загрузки изображения

Часто бывает нужно проверить загружено изображение в данный момент или нет. И в этом снова нам поможет jQuery.

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

14. Сортировка по-алфавиту

Если вам нужна динамическая сортировка списка по-алфавиту, вам обязательно поможет этот небольшой сниппет.

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

Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе WordPress.

Комментарии
  • Serg

    пригодилось. спасибо

  • Сергей

    Как мне «12. Подгрузка контента при прокрутке страницу вниз» это сделать… какой код полностью надо написать можно по подробней ?

  • Evgeniy Fomin

    4 шт взял) спасибо)

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее