資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何啟用 jQuery UI 選單？
Jquery 是一個快速簡單的 Javascript 庫，用於透過 HTML 建立客戶端，它簡化了一些 Javascript 函式，例如 DOM 操作、遍歷、事件處理和 AJAX 呼叫。它還具有跨瀏覽器相容性。
什麼是 jQuery UI 選單？
jQuery UI 選單是構建在 jQuery UI 核心上的元件，用於建立下拉選單和其他導航選單選項。這些選單可以透過滑鼠指標以及鍵盤點選訪問。它還允許開發人員建立選單並應用自定義樣式和主題。這些選單包括分層選單，其中包括選單和子選單。
一些重要的 jQuery UI 選單功能
事件和回撥：jQuery UI 選單允許開發人員處理使用者互動並自定義選單的行為，它支援各種事件和回撥，例如 blur、create、focus 和 select。
鍵盤導航：這允許使用者透過鍵盤上的方向鍵在選單中導航，並使用 Enter/Space 開啟/觸發選單項的操作。此外，可以使用 Esc 關閉當前選單/子選單。
方法 1：使用 menu() 方法
使用 jQuery UI 選單小部件的 .menu() 方法啟用 jQuery UI 選單以及 <ul> 和 <li> 項。
演算法
步驟 1：建立一個 HTML 檔案，在 <head> 標籤中包含 jQuery 和 jQuery UI 庫。然後使用 <ul> 和 <li> 建立列表項。
步驟 2：現在為列表項分配一個 id。
步驟 3：現在在 <script> 標籤內，使用 .menu() 方法初始化選單項。這必須在 DOM 載入後完成，並將初始化程式碼包裝在 ready() 函式內，因為這將確保它在頁面載入後執行。
示例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Menu</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
$("#items").menu();
});
</script>
</head>
<body>
<div style="text-align: center;">
<h2>Tutorials Point Menu Items</h2>
<ul id="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
方法 2：使用 data−widget 屬性和 menu() 方法。
另一種可行的方法是在 jQuery UI 中使用 data−widget 屬性以及 menu() 函式。此屬性用作識別 HTML 元素的工具，然後可以使用該函式初始化這些元素。
演算法
步驟 1：在 HTML 檔案的 <head> 部分匯入 jQuery 和 jQuery UI 庫和指令碼。
步驟 2：新增 <ul> 和 <li> 元素以建立列表項，然後為 <ul> 標籤新增一個唯一的 id。
步驟 3：將 ‘data−widget’ 屬性設定為頂層 <ul> 並將 <ul> 元素的值設定為 "menu"。
步驟 4：在 <script> 標籤內，選擇 “data−widget” 屬性並使用 menu() 方法啟用 UI 選單。
示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Menu Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("[data-widget='menu']").menu({
position: { my: "left top", at: "right top" }
});
});
</script>
<style>
.ui-menu {
width: 8em;
}
</style>
</head>
<body style="text-align: center;">
<h2>Tutorials Point Menu Items</h2>
<ul data-widget="menu">
<li>Courses</li>
<li>
<div>Programming</div>
<ul>
<li>
<div>Python</div>
</li>
<li>
<div>Java</div>
</li>
<li>
<div>Javascript</div>
</li>
<li>
<div>C++</div>
</li>
</ul>
</li>
<li>
<div>Web</div>
<ul>
<li>
<div>Backend</div>
<ul>
<li>
<div>Node.js</div>
</li>
</ul>
</li>
<li>
<div>Frontend</div>
</li>
</ul>
</li>
<li>
<div>Mobile</div>
</li>
</ul>
</body>
</html>
方法 3：使用 each() 方法
為了增強 jQuery UI 選單，另一種方法是利用 each() 函式。這將使我們能夠遍歷各個選單元素，然後執行 .menu() 操作。
演算法
步驟 1：在 <head> 標籤中包含 jQuery 和 jQuery UI 庫。
步驟 2：為位於最頂層的 <ul> 標籤新增一個唯一的 id 名稱。
步驟 3：使用 each() 方法迭代具有 menu 類的每個元素，然後呼叫 .menu() 方法。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Menu</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
$(".menu").each(function() {
$(this).menu();
});
});
</script>
</head>
<body>
<div style="text-align: center;">
<h2>Tutorials Point Menu Items</h2>
<ul class="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a>
<ul>
<li><a href="#">Submenu Item 1</a></li>
<li><a href="#">Submenu Item 2</a></li>
<li><a href="#">Submenu Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
<ul class="menu">
<li><a href="#">Menu Item A</a></li>
<li><a href="#">Menu Item B</a>
<ul>
<li><a href="#">Submenu Item X</a></li>
<li><a href="#">Submenu Item Y</a></li>
<li><a href="#">Submenu Item Z</a></li>
</ul>
</li>
<li><a href="#">Menu Item C</a></li>
</ul>
</div>
</body>
</html>
結論
以上三種方法都可用於啟用 jQuery UI 選單。您可以使用以上三種方法中的任何一種，但最易於使用的是 .menu() 方法，這可以透過 CSS 樣式進行更多自定義。這些選單項可以與 collapse、focus、blur 等事件和方法一起使用，以使這些選單項更具互動性。
271 次瀏覽
