Web → jQuery: hashchange, mousewheel, window resize

jQuery logo

Наразі займаюсь написанням фотогалереї, де активно використовується JavaScript, а конкретно бібліотека jQuery. У нотатці розповім про деякі корисні речі, що можуть стати в нагоді.

Hashchange

Отож, завдання написати галерею, яка красиво виглядатиме й не завантажуватиме заново сторінку при кожному русі. Оскільки сторінка завантажується лише раз, url адреса не змінюється, що не зовсім добре, ібо не працює історія браузера. Щоб виправити дану ситуацію слід використовувати змінний хеш. Хеш — це символи, що йдуть в адресному рядку після #.

По замовчуванню, хеш використовується для переходу до певних місць на сторінці. Наприклад лінк #comments вказує браузеру шукати якір #comments і перейти до нього (сподіваюсь суть зрозуміла). В ідеалі треба не лише змінювати хеш при певних діях, а й реагувати на його зміну користувачем, що й дозволяє зробити плагін jquery-hashchange.

Підключається елементарно:

$(window).hashchange( function(){
	// даний код виконуватиметься при зміні хешу
	my_function()
})

Mousewheel

В Fancybox  є хороша фішка, навігація між знімками (прокрутка вперед/назад) за допомогою ролика мишки. Гріх було не скористатися такою можливістю й собі, додавши плагін jquery.mousewheel.

Підключення:

$('#my_id').mousewheel(function(obj, delta){
    if ( delta > 0 )
        alert('prev')
    else
        alert('next')
})

Window resize

В моєму випадку, галерея підлаштовується до розміру екрана, а точніше, величини вікна браузера користувача. Щоб адекватно реагувати на його зміну, робимо отак:

$(window).resize(function() {
    // даний код виконуватиметься при зміні розміру вікна браузера
    my_function()
});

Уже завершуючи нотатку згадав про навігацію клавішами (стрілками). Реалізується просто й без усіляких плагінів:

$(document).keypress(function(e){
    switch(e.keyCode){
        // next
        case 39: my_next()
            break;
        // prev
        case 37: my_prev()
            break;
    }
});

У мене все =)

27.09.2011 01:08 Автор: Strange_V Хіти: 506

Один комментар

Напишіть відгук