資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用jQuery Mobile建立基本的Accordion（手風琴）？
顯示資訊的一種高效且組織良好的方法是使用手風琴。這種模式對於移動裝置尤其有用，因為移動裝置的空間有限，使用者經常需要快速簡便地訪問所需資料。一個流行的框架jQuery Mobile提供了一系列工具和小部件，用於開發移動友好的Web應用程式。jQuery Mobile內建小部件之一的可摺疊集小部件，提供了一種簡單的方法來建立手風琴。這篇文章將探討兩種方法——使用可摺疊集小部件和自定義程式碼——來使用jQuery Mobile構建簡單的Accordion。
jQuery中的手風琴
在jQuery Mobile中，手風琴是透過將幾個單獨的可摺疊元素組合成一個集合來建立的。
data-role="collapsible-set" attribute
類似於單個可摺疊元素，它以標題開頭，然後是可摺疊的內容，可摺疊集合也以相同的標記開始。如果向它們新增一個具有data-role="collapsible-set"屬性的父容器，則這些可摺疊元素將以視覺方式組織起來，並像手風琴一樣工作，一次只允許開啟一部分。
透過簡單地整合jQuery UI庫並在JavaScript部分呼叫附加到div、段落或其他用作此目的的元素的手風琴，jQuery外掛使建立手風琴變得很容易。
在這篇文章中，我們將介紹使用jQuery UI手風琴外掛的兩種方法。
方法
要使用jQuery Mobile建立基本的手風琴，我們可以遵循兩種方法：
利用內建的手風琴小部件。
使用帶有可摺疊data-role和屬性圖示位置的手風琴小部件
讓我們來看看這兩種方法：
方法1：利用內建的手風琴小部件
jQuery Mobile內建的可摺疊集小部件提供了一種簡單的方法來建立手風琴。使用者可以平滑地動畫展開和收縮不同的內容部分。
演算法
要使用可摺疊集小部件建立手風琴，請遵循以下步驟：
步驟1 - 新增所有jQuery指令碼以使用jQuery執行程式碼。
步驟2 - 為每個部分設定帶有data-role的可摺疊元素。
步驟3 - 為每個內容部分使用標題標籤和span標籤。
步驟4 - 將樣式作為內部css新增到span標籤以增強外觀。
示例
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: red;
font-size: 160%;
}
</style>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<!--Add some scripts and links-->
<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>
<!--Include collapsible as data-role for each part-->
<div class="content" data-role="collapsible">
<!--Include first part-->
<h2 class="c">Part A</h2>
<span>Statements in Part A.</span>
</div>
<div data-role="collapsible">
<h2>Part B</h2>
<span>Statements in Part B.</span>
</div>
<div data-role="collapsible">
<h2>Part C</h2>
<span>Statements in Part C.</span>
</div>
</body>
</html>
方法2
使用可摺疊作為data-role和屬性圖示位置的手風琴小部件。
可以使用data-iconpos屬性（在可摺疊集級別或在其任何可摺疊元素上）覆蓋可摺疊標題的預設圖示位置。
步驟1 - 新增所有jQuery指令碼以使用jQuery執行程式碼。
步驟2 - 為每個部分設定帶有data-role的collapsible-set。
步驟3 - 使用data-iconpos屬性來定位可摺疊標題的標題。
步驟4 - 使用標題標籤和span標籤為每個內容部分。<span>包含展開標題標籤時可見的內容。
步驟5 - 將樣式作為內部css新增到span標籤以增強文字和頁面的外觀。
示例
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: red;
font-size: 160%;
}
</style>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<!--Add some scripts and links-->
<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>
<!--Include collapsible as data-role for each part-->
<div class="content" data-role="collapsible" data-iconpos="top">
<!--Include first part-->
<h2 class="c">Part A</h2>
<span>Statements in Part A.</span>
</div>
<div data-role="collapsible" data-iconpos="right">
<h2>Part B</h2>
<span>Statements in Part B.</span>
</div>
<div data-role="collapsible" data-iconpos="bottom">
<h2>Part C</h2>
<span>Statements in Part C.</span>
</div>
</body>
</html>
結論
尤其是在移動裝置上，手風琴是一種實用的使用者介面模式，用於以簡潔且結構化的方式顯示資訊。藉助jQuery Mobile的內建小部件（例如可摺疊集小部件），可以快速輕鬆地建立手風琴。也可以使用jQuery UI的手風琴方法建立手風琴。兩種方法都使用data-role設定可摺疊部分，並使用標題和span標籤指定各個部分。可以使用CSS樣式來更改手風琴的外觀。
85 次瀏覽
