Замена изображения в меню jQuery с помощью клавиш управления - PullRequest
Новая
       14

Замена изображения в меню jQuery с помощью клавиш управления

0 голосов
/ 27 декабря 2011

Веб-сайт, о котором идет речь:

http://harrisonfjord.com/folio2/

Как видите, внизу есть меню, которое использует jquery scrollTo для перемещения вверх и вниз по странице.Код меню: 

<ul id="menu" style="list-style:none">
        <li><a href="#" class="current" onclick="jQuery.scrollTo('#home', 1000 )"><img class="hoverImage" src="img/home_highlight.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#asics', 1000 )"><img class="hoverImage" src="img/asics.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#tooheys', 1000 )"><img class="hoverImage" src="img/tooheys.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#olympics', 1000 )"><img class="hoverImage" src="img/olymp.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#panadol', 1000 )"><img class="hoverImage" src="img/panadol.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#plants', 1000 )"><img class="hoverImage" src="img/plantsplus.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#kia', 1000 )"><img class="hoverImage" src="img/kia.png"/></a></li>
    </ul>

Здесь есть два элемента.Во-первых, нажатие на li.a использует scrollTo для перемещения вверх и вниз по странице.Во-вторых, при наведении курсора / нажатии на изображение происходит смена источника «_highlight.png» следующим образом: 

// MENU HOVER IMAGE:
$(function () { 
    $('img.hoverImage').mouseover(function () {
        if ($(this).is('.activeImage')) return;
        var src = $(this).attr("src").match(/[^\.]+/) + "_highlight.png";
        $(this).attr("src", src);
    }).mouseout(function () {
        if ($(this).is('.activeImage')) return; // Skip mouseout for active image
        var src = $(this).attr("src").replace("_highlight", "");
        $(this).attr("src", src);
    }).click(function () {
        // remove previous active state
        $('.activeImage').not(this).removeClass('activeImage').trigger('mouseout');
        // set new active state
        $(this).addClass('activeImage');
    });
});

Все это работает нормально.Однако, когда я пытаюсь добавить элементы управления клавиатуры на страницу, все это рушится.Я хотел бы использовать стрелки вверх / вниз для перехода к предыдущему / следующему пункту меню, который использует следующий код: 

// Add "current" class to #menu links when clicked

$("#menu a").click(function(e) {
    $(".current").removeClass("current");
    $(this).addClass("current");    
});


// CONTROL BOTTOM MENU WITH UP/DOWN ON KEYBOARD

$(document.documentElement).keyup(function (event) {
  // handle cursor keys
  if (event.keyCode == 38) {
    // go up
    $("a.current")
      .parent() // moves up to the li element
      .prev() // moves to the adjacent li element
      .find("a") // moves down to the link
      .click(); // triggers a click on the previous link
  } else if (event.keyCode == 40) {
    // go right
    // same as above, but just on one line and next instead of prev
    $("a.current").parent().next().find('a').click();
  }
});

Это работает, однако (очевидно) это вызывает событие click, которое неуспешно переключить функцию _highlight.png.Как лучше всего изменить код, чтобы событие нажатия клавиши не только прокручивалось до нужного элемента div, но также выделяло / не выделяло нужные пункты меню?

1 Ответ

1 голос
/ 03 января 2012

Коротко, и почти нужно больше работать, ответ: 

$(function() {
  function highlight(e) {
    var _this = $(this),
        src = _this.attr("src").replace("_highlight", "").slice(0, -4) + "_highlight.png";

    _this.attr("src", src);
  }

  function refresh() {
    $("#menu a img").each(function(e) {
      var _this = $(this),
          src = _this.attr("src").replace("_highlight", "");

      _this.attr("src", src);
    });

    highlight.call($("#menu a.current img"));
  }

  function scroll(item) {
    jQuery.scrollTo(item, 1000);

    // Add "current" class to appropriate link
    $("#menu a").removeClass("current");

    var link = $("#menu a[href=" + item + "]");
    link.addClass("current");

    refresh();
  }

  $("#menu a").click(function(e) {
    // Pull the hash URI from the href.
    scroll($(this).attr('href'));
  }).find("img").hover(highlight, refresh);
});

// CONTROL BOTTOM MENU WITH UP/DOWN ON KEYBOARD

$(document).keyup(function(e) {
  var p = $("a.current").parent();
  if (e.keyCode === 38) {
    p.prev().find("a").click();
  } else if (e.keyCode === 40) {
    p.next().find('a').click();
  }
});

Более длинный ответ: абстрактно, используйте идемпотентные методы, и я вернусь позже, чтобы дать полное изложение стратегий, использованных вздесь.

...