Как отключить поведение при наведении на виджет jqueryUI menu () и добавить вместо него событие щелчка? - PullRequest
Новая
       13

Как отключить поведение при наведении на виджет jqueryUI menu () и добавить вместо него событие щелчка?

0 голосов
/ 11 марта 2020

Из-за требований ADA мне нужно изменить кнопку, которая использует виджет menu() из jqueryui, чтобы программы чтения с экрана могли нажимать кнопку и получать то же поведение, что и при наведении курсора.

Текущее поведение: при наведении курсора на кнопку появляется раскрывающееся меню. Поведение, которое я хочу, является событием щелчка и удаления наведения. С событием щелчка программы чтения с экрана должны видеть кнопку и активировать раскрывающееся меню.

Как мне сделать sh это?

И чтобы сделать это более интересным, menu() Виджет используется вместе со страницей веб-форм, которая заполняет меню. Итак, для веб-формы у меня есть следующее: 

<div id="buy-tickets-container">
    <ul id="buy-tickets-button">
        <li>
        <div class="submit-bttn" id="buyTicketsDropDownButtonLink"><%= BuyButtonText %></div>
            <ul class="event-dates">
                <asp:Repeater runat="server" ID="DateList">
                    <ItemTemplate>
                        <li><a class="date-select-link" href='<%# Eval("Href") %>'><%# Eval("Date") %> <%# Eval("PriceClass") %></a></li>
                    </ItemTemplate>
                </asp:Repeater>
             </ul>
         </li>
     </ul>
</div>

, и меню на странице ascx просто: 

$('#buy-tickets-button')
    .menu({
        position: { my: "left top", at: "left bottom + 1" },
        icons: { menu: "ui-icon-blank", submenu: "ui-icon-blank" }
        });

Отключение поведения при наведении также вполне приемлемо. Я посмотрел на jqueryui API для menu(), но у него нет события click(). Я могу реализовать то, что обнаружил, что удаляет поведение при наведении на кнопку $('#buy-tickets-button').unbind('mouseenter mouseleave');, но вместо этого мне нужно событие click. И просто добавление события щелчка не работает, в основном потому, что я не знаю, с чем связываться так же, как при наведении курсора ...

Еще одна сложность заключается в том, что этот сайт будет заменен примерно 6 месяцев, поэтому я не хочу тратить слишком много времени на это исправление. Так что я могу сделать?

1 Ответ

1 голос
/ 11 марта 2020

В соответствии с примером, найденным здесь: https://magento.stackexchange.com/questions/234925/magento-2-open-navigation-menu-on-click-on-desktop

Это в основном переопределяет некоторые функции, используемые в меню пользовательского интерфейса. Это делает их в большей степени основанными на кликах, и это может быть излишним, но, похоже, работает. Мы можем заставить blur и focus ничего не делать с фабрикой виджетов. 

$(function() {
  $.widget("custom.myMenu", $.ui.menu, {
    _create: function() {
      var categoryParent, html;
      $(this.element).off('click mousedown mouseenter mouseleave');
      this._on({
        /**
         * Prevent focus from sticking to links inside menu after clicking
         * them (focus should always stay on UL during navigation).
         */
        'mousedown .ui-menu-item > a': function(event) {
          event.preventDefault();
        },
        /**
         * Prevent focus from sticking to links inside menu after clicking
         * them (focus should always stay on UL during navigation).
         */
        'click .ui-state-disabled > a': function(event) {
          event.preventDefault();
        },
        /**
         * @param {jQuer.Event} event
         */
        'click .ui-menu-item:has(a)': function(event) {
          console.log('mine');
          event.preventDefault();

          var target = $(event.target).closest('.ui-menu-item');

          if (!this.mouseHandled && target.not('.ui-state-disabled').length) {
            this.select(event);

            // Open submenu on click
            if (target.has('.ui-menu').length) {
              this.expand(event);
            } else if (!this.element.is(':focus') &&
              $(this.document[0].activeElement).closest('.ui-menu').length
            ) {
              // Redirect focus to the menu
              this.element.trigger('focus', [true]);

              // If the active item is on the top level, let it stay active.
              // Otherwise, blur the active item since it is no longer visible.
              if (this.active && this.active.parents('.ui-menu').length === 1) { //eslint-disable-line
                clearTimeout(this.timer);
              }
            }
          }
        },
        /**
         * @param {jQuery.Event} event
         */
        'click .ui-menu-item': function(event) {
          var target = $(event.currentTarget),
            submenu = this.options.menus,
            ulElement,
            ulElementWidth,
            width,
            targetPageX,
            rightBound;
          if (target.has(submenu)) {
            ulElement = target.find(submenu);
            ulElementWidth = ulElement.outerWidth(true);
            width = target.outerWidth() * 2;
            targetPageX = target.offset().left;
            rightBound = $(window).width();
            if (ulElementWidth + width + targetPageX > rightBound) {
              ulElement.addClass('submenu-reverse');
            }
            if (targetPageX - ulElementWidth < 0) {
              ulElement.removeClass('submenu-reverse');
            }
          }
          // Remove ui-state-active class from siblings of the newly focused menu item
          // to avoid a jump caused by adjacent elements both having a class with a border
          target.siblings().children('.ui-state-active').removeClass('ui-state-active');
          this.focus(event, target);
        },
        /**
         * @param {jQuery.Event} event
         */
        'mouseleave': function(event) {
          this.collapseAll(event, true);
        },
        /**
         * Mouse leave.
         */
      });
      categoryParent = this.element.find('.all-category');
      html = $('html');
      categoryParent.remove();

      if (html.hasClass('nav-open')) {
        html.removeClass('nav-open');
        setTimeout(function() {
          html.removeClass('nav-before-open');
        }, this.options.hideDelay);
      }
      this._super();
    },
    blur: function() {
      return false;
    },
    focus: function() {
      return false;
    }
  });

  $('#buy-tickets-button')
    .myMenu({
      position: {
        my: "left top",
        at: "left bottom + 1"
      },
      icons: {
        menu: "ui-icon-blank",
        submenu: "ui-icon-blank"
      }
    });

});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="buy-tickets-container">
  <ul id="buy-tickets-button">
    <li>
      <div class="submit-bttn" id="buyTicketsDropDownButtonLink">
        Buy Tickets
      </div>
      <ul class="event-dates">
        <li>
          <a class="date-select-link" href='#'>
            03/10/20 $10
          </a>
        </li>
        <li>
          <a class="date-select-link" href='#'>
            03/11/20 $10
          </a>
        </li>
        <li>
          <a class="date-select-link" href='#'>
            03/12/20 $10
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>
...