資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery Mobile 建立基本導航欄？
網站或移動應用程式必須具有導航欄，通常稱為導航欄或選單。它是使用者體驗的重要組成部分，因為它允許訪問者訪問網站或應用程式的不同區域。在本文中，我們將逐步介紹如何使用 jQuery Mobile 建立一個簡單的導航欄。
jQuery Mobile 是一種流行的 JavaScript 庫，用於建立移動友好的網站和應用程式。它提供各種使用者介面元素（如導航欄），使其成為構建移動應用程式的絕佳選擇。
使用 JQuery 的導航欄
來自 jQuery Mobile 的導航欄小部件有助於在欄中新增帶有可選圖示的按鈕。當按鈕數量超過 maxbuttons 引數時，導航欄可以透過切換到多行來容納無限數量的按鈕。或者，如果您選擇 morebutton 選項，則該行中的最後一個按鈕將變為包含其他按鈕的彈出視窗。
方法
要使用 JQuery UI 建立基本導航欄，可以使用兩種方法：
在 JQuery 中使用基本導航欄
在 JQuery UI 中使用基本導航欄，並在頁尾部分中使用導航欄。
讓我們深入瞭解這兩種方法：
方法 1：在 JQuery 中使用基本導航欄
導航欄由包含在具有 data-role="navbar" 屬性的容器元素中的連結的無序列表組成。當單擊導航欄中的連結時，該連結會變為活動狀態（選中）。在新增到活動連結之前，會先從導航欄中的所有錨點中刪除 ui-btn-active 類。如果這是指向不同頁面的連結，則在切換完成後會刪除該類。
在初始化導航欄時，可以透過在標記中包含類“ui-btn-active”來使某個專案處於活動狀態。要使框架在每次顯示頁面時都恢復活動狀態，還可以新增類 ui-state-persist。
演算法
要使用 JQuery UI 建立基本導航欄，請按照以下步驟操作：
步驟 1 - 在 HTML 部分中新增 jQuery 庫和 jQuery UI 庫，以新增 data-role=”navbar”。
步驟 2 - 使用無序列表建立導航欄選項。利用列表標籤和錨點標籤。
步驟 3 - 設定 data-role=”navbar”，它可用於構建與 JQuery UI 關聯的基本導航欄。
步驟 4 - 為頁面的主體部分新增 data-role=”main”，併為頁面的頁尾部分新增 data-role=”footer”。
示例
<!DOCTYPE html>
<html>
<head>
<title>Basic NavBar with JQuery UI</title>
<!--Add link and scripts-->
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div data-role="main" class="ui-content">
<p>Body content</p>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
方法 2：使用 JQuery 將導航欄新增到頁尾部分
在具有 data-role 為 footer 的 div 標籤內，使用 data-role 屬性新增導航欄。
演算法
下面給出了表示頁尾部分中導航欄的示例：
步驟 1 - 在 HTML 部分的 section 中包含 jQuery 庫和 jQuery UI 庫所需的指令碼，作為 data-role=”navbar”。
步驟 2 - 對於導航欄中的選項，在無序列表中新增內容，並使用列表標籤和錨點標籤。
步驟 3 - 設定 data-role=”navbar”，它可用於構建與 JQuery UI 關聯的基本導航欄。在 data-role=”footer” 下新增頁尾部分中的導航欄。
步驟 4 - 為頁面的主體部分新增 data-role=”main”，併為頁面的頭部部分新增 data-role=”header”。
示例
<!DOCTYPE html>
<html>
<head>
<title>Basic NavBar with JQuery UI</title>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!--Add script for jQuery mobile-->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<!--Add header content-->
<h1>Basic Navbar using jQuery Mobile</h1>
</div>
<div data-role="main" class="ui-content">
<p>Body content</p>
</div>
<div data-role="footer" style="overflow:hidden;">
<!--Footer caption is incorporated-->
<!-- aligned text is made as center-->
<h4 style="text-align:center;">Footer Content</h4>
<div data-role="navbar">
<!--A list is encompassed in this segment -->
<!--Employ anchor tags for each items-->
<ul>
<li><a class="ui-btn-active" href="#">Home</a></li>
<!--Incorporate more items-->
<li><a href="#">Services</a></li>
<!--Incorporate more items-->
<li><a href="#">About</a></li>
<!--Incorporate more items-->
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>
結論
對於移動網站和應用程式，jQuery Mobile 提供了一種快速有效的方法來構建導航欄。本文中的說明將幫助您快速使用 jQuery Mobile 建立一個簡單的導航欄。此外，您可以透過使用各種 jQuery Mobile 小部件和新增您自己的 CSS 樣式來進一步自定義導航欄。由於其使用者友好的介面元件，jQuery Mobile 是構建移動友好型網站和應用程式的絕佳選擇。
101 次瀏覽
