Поиск по этому блогу

среда, 18 апреля 2012 г.

Ввод только цифр в текстовое поле(type=text) input формы html используя jQuery

Нужно запретить пользователю ввод в текстовое поле формы <input type="text"> любых данных кроме цифр. Для этого воспользуемся библиотекой jQuery и функцией .keydown:
$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Разрешаем нажатие клавиш backspace, del, tab и esc
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || 
             // Разрешаем выделение: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Разрешаем клавиши навигации: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 return;
        }
        else {
            // Запрещаем всё, кроме клавиш цифр на основной клавиатуре, а также Num-клавиатуре
            if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
});
В данном примере ввода только цифр используются не только коды цифр из основной клавиатуры, но и цифры на дополнительной, так называемой NUM-клавиатуры.

Как изменить атрибут src картинки при наведении с помощью jQuery

Есть задача: необходимо изменить картинку при наведении на нее мышкой. Если формат имен картинок одинаковый, это удобно сделать через jQuery изменяя атрибут src="" после загрузки страницы.
У нас есть 2 формата картинки:
Picture.jpg - Картинка оригинал, которая изначально отображается на странице.
Picture_over.jpg - Картинка, которая отображается при наведении на оригинал мышкой.
Для того чтобы выполнить изменение атрибута src="" тега img используем функции jQuery .mouseover и .mouseout:
$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "_over.jpg";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("_over.jpg", ".jpg");
            $(this).attr("src", src);
        });
});

четверг, 12 апреля 2012 г.

Таймер обратного отсчета на javascript и jquery

Иногда бывает ситуация, когда нужно установить таймер до какого либо события (начала акции, конца света:) ), для этого очень удобно испльзовать javascript с jQuery и библиотекой timers.
В моем примере используются графические цифры-картинки заключенные в блоки:

<div id="digit1"></div>
<div id="digit2"></div>
<div id="digit3"></div>
<div id="digit4"></div>
<div id="digit5"></div>

В данном случае таймер будет иметь 5 разрядов. Переключение цифр производиться сменой атрибута class="" блоков. Таблица стилей для цифр содержит следующее:

.d1 {
    background: url(/images/digits/digits.png) 0 -1px scroll !important;
}
.d2 {
    background: url(/images/digits/digits.png) 0 259px scroll !important;
}
.d3 {
    background: url(/images/digits/digits.png) 0 230px scroll !important;
}
.d4 {
    background: url(/images/digits/digits.png) 0 201px scroll;
}
.d5 {
    background: url(/images/digits/digits.png) 0 175px scroll;
}
.d6 {
    background: url(/images/digits/digits.png) 0 147px scroll;
}
.d7 {
    background: url(/images/digits/digits.png) 0 118px scroll;
}
.d8 {
    background: url(/images/digits/digits.png) 0 90px scroll;
}
.d9 {
    background: url(/images/digits/digits.png) 0 60px scroll;
}
.d0 {
    background: url(/images/digits/digits.png) 0 30px scroll;
}
Немного разъясню: все изображения цифр находятся в одном файле но для отображения одной цифры используется смещение фона, каждая цифра имеет размер 15х25 пикселей.
Вот используемая картинка:
Дальше приведу javascript код с комментариями:

В данном примере отсчет идет в минутах, для того, чтобы изменить размерность отсчета нужно поменять первый параметр функции everyTime(), размерность задана в милисекундах. На этом все!