Как я могу сделать кнопку меню jQuery UI или найти уже существующее расширение? - PullRequest
Новая
       14

Как я могу сделать кнопку меню jQuery UI или найти уже существующее расширение?

0 голосов
/ 05 февраля 2020

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

Что Мне нужна функциональность jQuery UI Menu Widget, но с некоторыми дополнительными битами, в первую очередь с кнопкой / интерактивной областью, которая будет отображать / скрывать меню. Это само по себе достаточно просто, но что меня бесит, так это добавление ожидаемой функциональности клавиатуры. Когда кнопка раскрывает меню, можно ожидать, что нажатие за пределами этого меню или нажатие ESCAPE закроет это меню, и хотя это работает для подменю виджета, оно не встроено в основной виджет.

Я имею я читал о фабрике виджетов и о расширении / изменении виджетов, но я совершенно заблудился относительно того, как решить эту sh эту конкретную c проблему, и я не могу найти ответы на этот вопрос, которые не так много лет. Я даже пытался переопределить функцию «свернуть» в экземпляре меню, но проблема в том, что я не совсем понимаю поток кода. Я в основном добавил оператор «else», который вызывает событие «click» на кнопке, когда не выполняются условия закрытия подменю. Это просто создает всевозможные странные ошибки, и я знаю, что на самом деле понятия не имею, что я делаю.

Пример кода того, как это делается, был бы очень признателен, но это достаточно распространено. Поведение сайта, которое, я думаю, кто-то уже собрал. Я просто не нахожу ничего актуального.

Заранее спасибо!

1 Ответ

0 голосов
/ 05 февраля 2020

Если вы не нашли нужный виджет, вы можете комбинировать различные элементы и использовать их вместе. 

$(function() {
  $(".widget button").button();
  $(".widget button").click(function(event) {
    event.preventDefault();
    if ($("#menu").is(":visible")) {
      $("#menu").hide();
    } else {
      $("#menu").show().menu("focus", null, $("#menu .ui-menu-item:first"));
    }
  });
  $("#menu").menu({
    select: function(e, ui) {
      console.log(ui.item.text().trim());
    }
  }).hide();
});
.ui-menu {
  width: 150px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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 class="widget">
  <h1>Widget Buttons</h1>
  <button>A button element</button>
  <ul id="menu">
    <li class="ui-state-disabled">
      <div>Toys (n/a)</div>
    </li>
    <li>
      <div>Books</div>
    </li>
    <li>
      <div>Clothing</div>
    </li>
    <li>
      <div>Electronics</div>
      <ul>
        <li class="ui-state-disabled">
          <div>Home Entertainment</div>
        </li>
        <li>
          <div>Car Hifi</div>
        </li>
        <li>
          <div>Utilities</div>
        </li>
      </ul>
    </li>
    <li>
      <div>Movies</div>
    </li>
    <li>
      <div>Music</div>
      <ul>
        <li>
          <div>Rock</div>
          <ul>
            <li>
              <div>Alternative</div>
            </li>
            <li>
              <div>Classic</div>
            </li>
          </ul>
        </li>
        <li>
          <div>Jazz</div>
          <ul>
            <li>
              <div>Freejazz</div>
            </li>
            <li>
              <div>Big Band</div>
            </li>
            <li>
              <div>Modern</div>
            </li>
          </ul>
        </li>
        <li>
          <div>Pop</div>
        </li>
      </ul>
    </li>
    <li class="ui-state-disabled">
      <div>Specials (n/a)</div>
    </li>
  </ul>
</div>

Базовые примеры:

Вы также можете использовать Widget Factory , чтобы создать свой собственный.

...