資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 jQuery UI 建立基本選單？
許多網站和應用程式都必須包含選單，因為它們提供了一種簡單而有序的方式來在不同的頁面和功能之間導航。雖然可以使用 HTML、CSS 和 JavaScript 建立選單有很多方法，但 jQuery UI 提供了一種簡單直觀的技術，可以幫助您節省時間和精力。本文將介紹使用 jQuery UI 建立選單的基礎知識，包括必要的步驟和入門示例。無論您是經驗豐富的開發人員還是新手，本文都將為您提供必要的資源，幫助您使用 JQuery UI 為您的網站或應用程式建立實用且美觀的選單。
JQuery 中的選單小部件
彈出選單被整合到 jQuery UI 選單小部件的主選單欄中。一些彈出選單項具有子彈出選單。當父子關係得到維護時，可以使用標記元素來生成這些選單。
jQuery UI 使用 menu() 方法來建立選單。
方法
要使用 JQuery UI 建立基本選單，可以使用兩種方法：-
在 JQuery 中使用選單小部件
在 JQuery 中使用選單小部件並帶有子選單。
讓我們看一下這兩種方法：-
方法 1：在 JQuery 中使用選單小部件
jQuery UI 的選單小部件是您可以用來建立選單的一個工具。選單小部件提供了一種靈活且可配置的方法來建立具有不同巢狀級別的選單。此方法非常適合建立下拉選單或導航選單。要使用它，您需要包含必要的 jQuery UI 檔案，並使用您的 HTML 標記初始化選單小部件。
演算法
要使用 JQuery UI 建立基本選單，請按照以下步驟操作：-
步驟 1 - 在 HTML 部分新增 jQuery 庫和 jQuery UI 庫，以新增 menu() 函式作為 UI。
步驟 2 - 使用無序列表建立選單選項。使用列表標籤和錨點標籤。
步驟 3 - 設定 id =”optionMenu”，這可以用來連線與 JQuery UI 關聯的 menu() 函式。
步驟 4 - 為 <a> 標籤新增內聯 css 樣式，以增強頁面的外觀。
示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Menu Widget</title>
<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<ul id="optionMenu">
<li><a style="color:blue" href="#">First in Menu</a></li>
<li><a style="color:blue" href="#">Second in Menu</a></li>
<li><a style="color:blue" href="#">Third in Menu</a></li>
</ul>
<script>
$(function() {
$( "#optionMenu" ).menu();
});
</script>
</body>
</html>
方法 2
使用 datepicker() 函式並帶有自定義選項。
演算法
要使用 JQuery UI 建立基本選單，請按照以下步驟操作：-
步驟 1 - 在 HTML 部分新增 jQuery 庫和 jQuery UI 庫，以新增 menu() 函式作為 UI。
步驟 2 - 使用無序列表建立選單選項。使用列表標籤和 div 標籤。
步驟 3 - 為子選單新增更多巢狀列表標籤。
步驟 4 - 設定 id =”Menu”，這可以用來連線與 JQuery UI 關聯的 menu() 函式。
步驟 5 - 為 <a> 標籤新增內聯 css 樣式，以增強頁面的外觀。
示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#menu" ).menu();
} );
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body>
<h1>Menu</h1>
<ul id="menu">
<li><div>First in Menu</div>
<ul>
<li><div>First Menu Submenu 1</div></li>
<li><div>First Menu Submenu 2</div></li>
</ul>
</li>
<li><div>Second in Menu</div></li>
<li><div>Third in Menu</div>
<ul>
<li><div>Third in Menu Submenu 1</div>
<ul>
<li><div>Submenu 1's submenu 1 </div></li>
<li><div>Submenu 1's submenu 2</div></li>
</ul>
</li>
<li><div>Third in Menu Submenu 2</div>
<ul>
<li><div>Submenu 2's submenu 1</div></li>
<li><div>Submenu 2's submenu 2</div></li>
<li><div>Submenu 2's submenu 3</div></li>
</ul>
</li>
<li><div>Forth in Menu</div></li>
</ul>
</li>
</ul>
</body>
</html>
結論
開發人員可以透過使用簡單的 jQuery UI 來建立選單，從而節省時間和精力。除了生成巢狀選單和調整樣式外，本文還介紹了使用 jQuery UI 選單小部件建立選單的基本過程和方法。開發人員可以使用這些過程為他們的網站和應用程式建立既實用又美觀的選單。
146 次檢視
