Полезные jQuery сниппеты (часть 2)

jqsnippets

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

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

Давайте начнем наш список с очень популярного и полезного сниппета. Следующие 4 строки кода, позволят вашим посетителям плавно перейти в начало страницы, просто нажав на ссылку (с #top ID), расположенную в нижней части страницы.

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

Как клонировать заголовок таблицы в её нижнюю часть.

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

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

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

Если вам нужно обновить только часть страницы, тогда следующие 3 строки, безусловно вам помогут. В этом примере #refresh div автоматически обновляется каждые 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 полная ширина/высота окна просмотра (viewport) с помощью jQuery

Данный сниппет позволит вам создать полную ширину/высоту div в соответствии с viewport. Код также обрабатывает изменения размера окна. Отлично подходит для модальных диалогов или всплывающих окон.

// глобальные vars
var winWidth = $(window).width();
var winHeight = $(window).height();

// установка первоначальной div высоты / ширины
$('div').css({
    'width': winWidth,
'height': winHeight,
});

// убедитесь, что div остается в полной width/height при изминение размера
$(window).resize(function(){
    $('div').css({
    'width': winWidth,
    'height': winHeight,
});
});

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

Этот сниппет является лучшим способом узнать, если изображение загружается или нет.

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

});

Мы уверены, вы найдете им достойное применение в своих новых проектах! Кстати, если вы использовали один из этих сниппетов у себя на сайте – скиньте ссылку в комментариях – мы оценим!

Высоких конверсий!

14-03-2016