您如何使用帶有ENTER鍵的JQueryUI選單？

我正在開發一個需要完全由鍵盤控制的應用程式，到目前為止一切都很好，但是我無法在使用 ENTER 鍵時使 JQuery UI 選單小部件作業。

從檔案中，似乎沒有具體的方法來完成這項作業，所以我在串列元素上使用“onclick”

  <li onclick="alert('Books Action')"><div>Books</div></li>

這是一個 jsfiddle ( https://jsfiddle.net/djbh6r82/ ) 與 JQuery UI 檔案中的示例和第一個選單項上的警報 -> 當我點擊它時它作業正常但是使用“ENTER”它只會帶給我回到開始（專注于選單不會丟失）

$(function() {
  $("#menu").menu();
});

.ui-menu {
  width: 150px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<ul id="menu">
  <li class="ui-state-disabled">
    <div>Toys (n/a)</div>
  </li>
  <li onclick="alert('Books Action')">
    <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>

我這樣做錯了嗎？我嘗試了不同的東西（<a href='#' onclick="xxx"></a>而不是 div，點擊 div 而不是 ul）但似乎沒有任何效果

uj5u.com熱心網友回復：

當您查看 API 檔案時，您將在https://api.jqueryui.com/menu/下看到以下詳細資訊：

鍵盤互動

• ENTER/SPACE: 呼叫焦點選單項的操作，這可能是打開子選單。
• UP：將焦點移到上一個選單項。
• DOWN：將焦點移到下一個選單項。
• RIGHT：打開子選單（如果有）。
• LEFT：關閉當前子選單并將焦點移至父選單項。如果不在子選單中，則什么都不做。
• ESCAPE：關閉當前子選單并將焦點移至父選單項。如果不在子選單中，則什么都不做。

鍵入字母會將焦點移至標題以該字符開頭的第一個專案。重復相同的字符回圈匹配的專案。在一秒計時器內鍵入更多字符匹配這些字符。

禁用的專案可以接收鍵盤焦點，但不允許任何其他互動。

所以Enter已經參與并會觸發select選單的事件。然后，您將希望在select回呼中執行某些操作。

$(function() {
  $("#menu").menu({
    select: function(e, ui) {
      console.log(ui.item.text().trim(), "Selected");
    }
  }).focus();
});

.ui-menu {
  width: 150px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<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>

focus預先給它允許它已經被呼叫。

標籤：

上一篇：用于推送標簽的最小Git檔案夾占用空間

下一篇：嘗試在importxml中參考單元格