jQuery: Сниппеты

Покажем вам несколько фрагментов jQuery кода, которые могут вам пригодиться.

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

Позволяет плавно проскролить страницу к верху простым нажатием ссылки (с 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.

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

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

В примере div с id #refresh автоматически обновляется каждые 10 секунд.

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

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

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

$.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>

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

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

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

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

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

Контент динамически подгружается на странице в процессе прокрутки вниз.

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

Отправляем все запросы из форм через Ajax

$(function() {
  $('form').submit(function(e) {
  var $form = $(this);
  $.ajax({
   type: $form.attr('method'),
   url: $form.attr('action'),
   data: $form.serialize()
  }).done(function() {
 console.log('success');
   alert ('Отправлено!');
  }).fail(function() {
   console.log('fail');
 alert ('Не отправлено!');
  });
  e.preventDefault(); 
  });
 }) ();

Валидация файла до отправки на сервер

Есть несколько вариантов решения данной задачи. Это решение работает в IE. Валидации файла с помощью jQuery, перед отправкой на сервер. Проверяем допустимый размер и расширение файла.

<script type="text/javascript">
function CheckFile(file)
{
 // Устанавливаем настройки
 // Флаг для валидации расширения файла
 var good_ext = false;
 // Флаг для валидации размера файла
 var good_size = false;
 // Разрешенные расширения файла
 var ext_arr = ['jpg','jpeg','png','gif']; 
 // Максимальный размер 10MB
 var maxsize = 1024*1024*10;
 // Для хранения размера загружаемого файла
 var iSize = 0;
 // Если браузер IE
 if($.browser.msie)
 {
  var objFSO = new ActiveXObject("Scripting.FileSystemObject");
  var sPath = $(file)[0].value;
  var objFile = objFSO.getFile(sPath);
  iSize = objFile.size;
 }
 else
 {
  // В других браузерах
  iSize = $(file)[0].files[0].size;
 }
 // Делаем проверку что файл не превышает допустимого размера
 if(maxsize > iSize)
 {
  // Если файл допустимого размера - выставляем флаг
  good_size = true;
 }
 // Пробегаемся по нашему массиву разрешенных типов файлов
 for(i in ext_arr)
 {
  // Если совпадения найдены
  if('image/'+ext_arr[i] == $(file)[0].files[0].type)
  {
   // Выставляем флаг - что расширение файла допустимо
   good_ext = true; 
  }
 }
 // Для хранения ошибки
 var error = '';
 // Если расширение не совпадает с фильтром
 if(!good_ext)
 {
  error += "Invalid file extension! Use .jpg, .jpeg, .png, .gif files. ";
 }
 // Если у нас уже есть ошибка - ставим переход на новую строку
 if(error != '')
 {
  error += "\r\n";
 }
 // Если не прошли валидацию по размеру файла
 if(!good_size)
 {
  error += "Invalid file size! Use no more than 10 MB file.";
 }
 // Если есть ошибки
 if(error != '') 
 {
  // очищаем значение input file
  $(file).val("");
  // И выводим алертом сообщение об ошибке
  alert(error);
 }
 return false;
}

Пример вызова функции.

<input type="file" name="upload_file" onchange="CheckFile(this)">

Отправка данных всей формы Аяксом

$("#button").click(function()
{
 $.post( siteurl_javascript + "/ajax/custom.php",$("#id_form").serialize());
});

Обернуть все iframe на странице в отдельный div с классом

На jQuery:

$('iframe').wrapAll('<div class="some_class"></div>')

На чистом JS:

// create the container div
var dv = document.createElement('div');
// get all divs
var divs = document.getElementsByTagName('div');
// get the body element
var body = document.getElementsByTagName('body')[0];
// apply class to container div
dv.setAttribute('class', 'container');
// find out all those divs having class C
for(var i = 0; i < divs.length; i++)
{
 if (divs[i].getAttribute('class') === 'C')
 {
  // put the divs having class C inside container div
  dv.appendChild(divs[i]);
 }
}
// finally append the container div to body
body.appendChild(dv);

На этой странице