Шаг 48.
Библиотека jQuery.
Имитация действий пользователя. События от клавиатуры (окончание)

    На этом шаге мы рассмотрим оформление кода в виде функции.

    В качестве альтернативы использованию метода .trigger() для имитации щелчка мышью рассмотрим способ, как можно выделить программный код в функцию, чтобы его можно было вызывать из нескольких обработчиков, в данном случае - из обработчиков событий click и keyup. Хотя в рассматриваемой ситуации в этом нет необходимости, такой прием может пригодиться для уменьшения объема программного кода.

$(document).ready(function() {
  // Активировать реакцию кнопок переключателя стилей на событие 
  // наведения указателя мыши
  $('#switcher .button').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });

  // Разрешить разворачивание и сворачивание переключателя стилей 
  var toggleStyleSwitcher = function(event) {
    if (!$(event.target).is('.button')) {
      $('#switcher .button').toggleClass('hidden');
    }
  };
  $('#switcher').click(toggleStyleSwitcher);

  // Имитировать щелчок мышью, чтобы изначально переключатель
  // находился в свернутом состоянии.
  $('#switcher').click();
  
  // Функция setBodyClass() изменяет стиль страницы.
  // Она изменяет также состояние переключателя стилей.
  var setBodyClass = function(className) {
    $('body').removeClass();
    $('body').addClass(className);
    $('#switcher .button').removeClass('selected');
    $('#switcher-' + className).addClass('selected');
    
    if (className == 'default') {
      $('#switcher').click(toggleStyleSwitcher);
    }
    else {
      $('#switcher').unbind('click', toggleStyleSwitcher);
      $('#switcher .button').removeClass('hidden');
    }
  };

  // Вызвать setBodyClass() в случае щелчка на кнопке 
  $('#switcher').click(function(event) {
    if ($(event.target).is('.button')) {
      if (event.target.id == 'switcher-default') {
        setBodyClass('default');
      }
      if (event.target.id == 'switcher-narrow') {
        setBodyClass('narrow');
      }
      else if (event.target.id == 'switcher-large') {
        setBodyClass('large');
      }
    }
  });

  // Вызвать setBodyClass() в случае нажатия на клавишу. 
  $(document).keyup(function(event) {
    switch (String.fromCharCode(event.keyCode)) {
      case 'D':
     case 'J': //Обычный
       $('#switcher-default').click();
       break;
     case 'C': //Суженный
       $('#switcher-narrow').click();
       break;
     case 'E': //Увеличенный
       $('#switcher-large').click();
       break;
    }
  });
});

Рис.1. Конечный результат

Текст этого примера можно взять здесь.

    Со следующего шага мы начнем рассматривать эффекты.




Предыдущий шаг Содержание Следующий шаг