Подборка jQuery сниппетов 

Подборка jQuery сниппетов для различных надобностей.

В наличии):

1. Плавный скролл к верху страницы
2. Дублирование thead в самый низ html таблицы
3. Загрузка внешнего контента
4. Колонки одинаковой высоты
5. Табличные полосы (зебра)
6. Частичное обновление страницы
7. Предзагрузка изображений
8. Открытие внешних ссылок в новом окне или новой вкладке
9. div по ширине/высоте вьюпорта
10. Проверка сложности пароля
11. Изменение размеров изображения
12. Автоматическая загрузка контента по скроллу
13. Проверить, загрузилось ли изображение
14. Сортировка списка в алфавитном порядке
15. Отправляем все запросы из форм через Ajax
16. Валидация файла до отправки на сервер
17. Отправка данных всей формы Аяксом
18. Обернуть все iframe и т.д. на странице в отдельный div с классом

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

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

<script type="text/javascript">
$(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(); 
      });
    }) ();
</script>

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

Есть несколько вариантов решения данной задачи. Это решение работает в 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;
}
</script>

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

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

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

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

1. Обернуть все 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);