Полезные jQuery-сниппеты, которые пригодятся разработчику

Karina | 16.07.2014

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

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

Некоторые особо востребованные jQuery-сниппеты приведены ниже. Вы можете сохранить их и использовать для работы.

Сделать кнопку активной, если в поле введен текст

$('#login').keyup(function() {
    $('#submit').attr('disabled', !$('#login').val());
 });

Пример: с помощью этого фрагмента кода кнопку авторизации можно будет нажать только в том случае, если пользователь ввел текст в поле Login.

Счетчик символов, которые вводятся в поле

function($) {
    $.fn.extend( {
        limiter: function(limit, elem) {
            $(this).on('keyup focus', function() {
                setCount(this, elem);
            });
            function setCount(src, elem) {
                var letters = src.value.length;
                if (letters > limit) {
                    src.value = src.value.substr(0, limit);
                    letters = limit;
                }
                elem.html( limit - letters );
            }
            setCount($(this)[0], elem);
        }
    });

//чтобы установить счетчик символов, введите необходимое значение:

 var elem = $('#letters');
 $('#text').limiter(128, elem);

Этот сниппет позволяет отобразить оставшееся количество символов, которое пользователь может ввести в заданное поле.
Обратите внимание, что данный фрагмент кода только визуально отображает лимит символов, и не является альтернативой для атрибута maxlength или проверкой на стороне сервера.

Автоформатирование телефонных номеров

$("input[name='phonenumber']").keyup(function() {
    var charslen = this.value.length;
    var charsval = $(this).val();
    if (charslen == 3){
        $("input[name='phonenumber']").val("(" + charsval + ")" + "-");
    } else if (charslen == 9) {
        $("input[name='phonenumber']").val(charsval + "-");
    } else if (charslen == 12) {
        $("input[name='phonenumber']").val(charsval + "-");
    } else if(charslen >=15){
        this.value = this.value.substr(0, 15);
    }
 });

Если вам необходимо, чтобы при вводе телефонного номера в поле phonenumber внешний вид данных автоматически форматировался, используйте этот jQuery-сниппет. С помощью него введенный пользователем номер телефона будет преобразовываться и выглядеть так: (123)-456-78-90. Ограничение количества символов – 15.

Сортировка с помощью jQuery

 var catalog = $('ul');
 var catalogitems = catalog.children('li').get();
 catalogitems.sort(function(a, b) {
    var an = $(a).text().toUpperCase();
    var bn = $(b).text().toUpperCase();
    return (an < bn) ? -1 : (an > bn) ? 1 : 0;
 })
 $.each(catalogitems, function(idx, itm) { catalog.append(itm);
 });

«Зебра» для неупорядоченных списков

 $('li:odd').css('background', '#dfdfdf');

Этот небольшой, но полезный сниппет может значительно облегчить просмотр текста. Добавьте код в ту часть разметки, где необходимо «окрасить» нечетные строки в другой цвет.

Скольжение/затухание

//скольжение:

 $('.btn').click(function() {
    $('.element').slideToggle('normal');
 });

//затухание:

 $('.btn').click(function() {
    $('.element').fadeToggle('normal');
 });

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

Кнопка «Наверх»

 $('a.top').click(function(){
    $(document.body).animate({scrollTop : 0},900);
    return false;
 });

//создание якоря:

<a class="top" href="#">Наверх</a>

Изменяя значение отступа прокрутки scrollTop в данном сниппете, вы можете установить, на какое именно место страницы пользователь будет возвращаться, нажимая на кнопку. Также можно указать время, за которое страница должна прокрутиться. В нашем примере указано 900 мс.

Открыть диалоговое окно печати

 <a href="#" class="print">Печать страницы</a>

 $('a.print').click(function(){
    window.print();
    return false;
 });

Изменение прозрачности с jQuery

 $(document).ready(function(){
    $('.thumbs img').fadeTo('normal', 0.5);
    $('.thumbs img').hover(function(){
        $(this).fadeTo('normal', 1.0);
    },function(){
        $(this).fadeTo('normal', 0.5);
    });
 });

Данный пример показывает, как можно сделать объект полупрозрачным (50%), а при наведении курсора – непрозрачным.

Автоматическая замена/скрытие отсутствующих изображений

//автозамена на изображение по умолчанию:

 $('img').error(function(){
    $(this).attr('src', 'img-default.png');
 });

//скрытие:

 $('img').error(function(){
    $(this).hide();
 });

Конечно, это далеко не все фрагменты jQuery, которые опытные разработчики используют в своем коде. Надеемся, что вышеприведенные полезные примеры скриптов помогут вам в работе не один раз. Желаем творческих успехов!