NilColor

jQuery – небольшая и крайне удобная JavaScript библиотека позволяющая сильно расширить возможности вэб-приложения не рисую при этом жутковатых конструкций если надо сделать AJAX-запрос или потеребить DOM документа. Вот например вполне себе работающий кусок JavaScript с использованием jQuery:

$alertHolder = $('<div></div>')  
.attr('id', 'tsm_alert')  
.addClass('tsm_alert')  
.append($('<h1 id="alert_title"></h1>'))  
.append($('<img src="/media/tsm/img/close.gif" title="Закрыть" />').click(tsm_alert_close))  
.append($('<div id="alert_text"></div>'))  
.insertBefore(document.body.firstChild)  
.hide();

Что тут делается? Это кусок из кода, который приделывает к вэб-приложению аналог alert’а, но не такой раздражающий ;)

Ну и как и положено такого рода библиотекам (да и JavaScript’у в целом) – ее можно расширять своими плагинами.

Больших творений у меня пока нет — пока только одно расширение (для удобства) проникло в мои скрипты:

//Проверка элемента на его существование  
jQuery.fn.exists = function() {
    return this.length > 0;
};

В итоге можно писать не if $('#tsm_alert').length)..., а более красиво if $('#tsm_alert').exists().... Мелочь конечно – но визуально более приятно.

И вот буквально сегодня попалась мне очень интересное (и понятное) описание того, как можно писать свои плагины для jQuery. Теперь думаю я таки смогу добавить в jQuery свой idleTracker как плагин ;) Ибо текущая его реализация не очень красива:

$(document).ready(function() {
    // ----------------------------------------------------- //
    // Отслеживание активности в окне браузера. После 10 сек.
    // неактивности
    // генерится событие state:idle. При активности
    // пользователя -- генерится state:active
    // Активность пользователя - прокрутка окна браузера,
    // изменение размеров окна, движения мышью или нажатие
    // клавиш на клавиатуре
    // 
    var _events = [[window, 'scroll'],
                   [window, 'resize'],
                   [document, 'mousemove'],
                   [document, 'keydown']];
    var _timer;
    jQuery.each(_events, function(i, e) {
        $(e[0]).bind(e[1], function () {onActive();});
    });
    // 
    // обработчик состояния state:active в окне браузера и
    // перезапуск 10-и сек. ожидания не активности пользователя
    // 
    function onActive(){
        $(document).trigger('state:active');
        clearTimeout(_timer);
        _timer = setTimeout(
            function () {$(document).trigger('state:idle');},
            10000
        );
    }
    // 
    // обработчик состояния state:idle в окне браузера
    // 
    $(document).bind(
        'state:idle',
        // можно сделать что-то более полезное, чем
        // банально писать в console
        function () {console.log('system idled');}
    );
});

update: что-то по началу у меня были проблемы с markdown… блоки кода выглядели – ужас. сейчас вроде ОК. Если что – пишите в коменты.