資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 jQuery Mobile 建立基本的工具欄？
知名且廣泛使用的移動UI框架 jQuery Mobile 提供了廣泛的功能和元件，用於構建移動友好型和響應式 Web 應用程式。簡單直觀的導航是成功使用者介面的關鍵元件之一。任何提供快速訪問常用操作和選單的移動UI都必須具有工具欄。在這篇文章中，我們將介紹兩種使用 jQuery Mobile 構建基本工具欄的不同方法。
jQuery Mobile 是一款基於 Web 的工具，用於建立可在所有手機、平板電腦和個人電腦上檢視的響應式內容。在本文中，我們將使用 jQuery Mobile 建立簡單的工具欄。
JQuery 中的工具欄小部件
頁面內容之前或之後出現的元素是頁首和頁尾。可以使用工具欄小部件來改進頁首和頁尾。
在本文中，我們將介紹使用 jQuery UI 移動工具欄小部件的兩種方法：
方法
要使用 jQuery Mobile 建立基本工具欄，我們可以遵循以下兩種方法：
使用 jQuery Mobile 和無序列表建立基本工具欄。
使用 jQuery Mobile 在頁尾中使用 fieldset 建立基本工具欄。
讓我們來看看這兩種方法：
方法 1
使用 jQuery Mobile 和無序列表建立基本工具欄。
使用 jQuery Mobile 的“header”元件處於“fixed”位置是構建基本工具欄的第一種方法。這種方法簡單易於實現，它使用 data-role 為工具欄的無序列表，並使用列表新增選項。
演算法
要使用 jQuery Mobile 建立基本工具欄，請按照以下步驟操作：
步驟 1 - 包含所有 jQuery 指令碼和樣式表以使用 jQuery 執行程式碼。
步驟 2 - 將 data-role 設定為 header，並將 data-iconpos 設定為 div 部分的 fixed。
步驟 3 - 在無序列表中新增 data-role 為 toolbar。
步驟 4 - 在列表中新增要在工具欄中顯示的選項。
步驟 5 - 新增 data-role = “content” 以在頁面的 body 部分新增內容。
示例
<!DOCTYPE html>
<html>
<head>
<title>Basic Toolbar with jQuery UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>
<div data-role="header" data-position="fixed">
<ul data-role="toolbar" data-iconpos="notext">
<li><a href="#" data-icon="home">Home</a></li>
<li><a href="#" data-icon="search">Services</a></li>
<li><a href="#" data-icon="plus">About</a></li>
<li><a href="#" data-icon="info">Contact</a></li>
</ul>
</div>
<div data-role="content">
<p>Content goes here</p>
</div>
</body>
</html>
方法 2：使用 jQuery Mobile 在頁尾中使用 fieldset 建立基本工具欄
為佈局使用帶有水平 data-type 屬性的 fieldset 標籤，並使用 button 標籤新增選項。將工具欄放在頁尾部分，因此使用帶有 data-role 為 footer 的 <div>。
演算法
要使用 jQuery Mobile 建立基本工具欄，請按照以下步驟操作：
步驟 1 - 要使用 fieldset 新增基本工具欄，請包含所有 jQuery 指令碼和樣式表以使用 jQuery 執行程式碼。
步驟 2 - 在 div 標籤中將 data-role 設定為 header，並將內容新增到 header 部分。
步驟 3 - 在 div 標籤中將 data-role 設定為 content，並將內容新增到 content 部分。
步驟 4 - 在 div 標籤中將 data-role 設定為 footer，並在其中新增 fieldset。
步驟 5 - 建立帶有水平 data-type 屬性的 fieldset 標籤。
步驟 6 - 為工具欄中的選項建立 button 標籤。
示例
<!DOCTYPE html>
<html>
<head>
<title>Basic Toolbar with jQuery UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<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>
<!--Add header content-->
<div data-role="header" data-position="fixed">
<h1>Title Of Page</h1>
</div>
<!--Add statements to the main content part-->
<div data-role="content">
<p>Body Content goes here</p>
</div>
<!--Add toolbar to the footer section-->
<div data-role="footer" data-position="fixed">
<!--Add fieldset for the toolbar under the data-role as footer-->
<fieldset data-type="horizontal">
<!--Add buttons for teh options in the toolbar-->
<button data-icon="home">Home</button>
<button data-icon="search">Services</button>
<button data-icon="plus">About</button>
<button data-icon="info">Contact</button>
</fieldset>
</div>
</body>
</html>
結論
在本文中，我們介紹了兩種使用 jQuery Mobile 構建基本工具欄的方法。第一種方法使用 data-role 設定為工具欄的無序列表，第二種方法使用帶有水平 data-type 屬性的 fieldset。這些方法提供了一種快速的方法，可以向移動使用者介面 (UI) 新增選單和導航選項。開發人員可以透過遵循本文中的說明並使用提供的示例程式碼，輕鬆地為其基於 jQuery Mobile 的 Web 應用程式構建基本工具欄。
瀏覽量：68
