вторник, 26 апреля 2011 г.

Disabling arrow keys at Fancybox (отменить перехват курсорных клавиш в Fancybox)

Используя замечательный плагин Fancybox для jQuery, натолкнулся на один очень неприятный момент. При использовании его, например, в совокупности с элементами формы input или textarea невозможно было перемещаться внутри этих элементов влево и вправо, используя курсорные клавиши. Происходило это по причине перехвата событий от клавиш-стрелок (keycodes 37 и 39) функцией навигации в плагине Fancybox. Оказалось, что простой опции отключить навигацию курсорными клавишами в этом плагине нет, пришлось хучить.

Чтобы обойти дефолтное поведение, решил создать дополнительную переменную в конфиге, и подправить функцию навигации плагина.

Для начала я добавил новую переменную в файл, где хранились дефолтные значения оцпий для Fancybox, назвал её disableNavButtons:

$.fn.fancybox.defaults = {
 ...
 disableNavButtons : true,
 ...
};

Затем, пропатчил функцию fancybox_set_navigation, в условных выражениях добавил обработчики на проверку равен ли e.keycode 37 или 39 и при этом currentOpts.disableNavButtons выставлено в false. И если условие выполняется, то переназначить действия для левой и правой курсорных клавиш.

function fancybox_set_navigation() {
  $(document).unbind('keydown.fb').bind('keydown.fb', function(e) {
    if (e.keyCode == 27 && currentOpts.enableEscapeButton) {
      e.preventDefault();
      $.fancybox.close();
    
    } else if (e.keyCode == 37 && !currentOpts.disableNavButtons) {
      e.preventDefault();
      $.fancybox.prev();
    
    } else if (e.keyCode == 39 && !currentOpts.disableNavButtons) {
      e.preventDefault();
      $.fancybox.next();
    }
    ...

Рекоммендую

Попробуйте надёжный хостинг от Scala Hosting