資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 jQuery Mobile 建立基本的摺疊面板
概述
jQuery Mobile 提供了簡單 jQuery 的增強版本，因為它提供了適用於所有螢幕型別的響應式內容和設計。因此，在開始構建摺疊面板之前，我們應該瞭解其功能。摺疊面板是一個 Web 元件，它靜態顯示資料的標題或主要內容，並且在點選標題時展開並顯示有關標題的全部資訊。我們也可以使用普通的 jQuery 構建摺疊面板，但它不會提供響應式設計和佈局。
jQuery Mobile 內容分發網路 (CDN) 連結
在開始構建網頁佈局之前，您應該將以下連結新增到 HTML 文件中。
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> <script src="//code.jquery.com/jquery-3.2.1.min.js"> <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
演算法
步驟 1 − 在您的文字編輯器中建立一個 HTML 檔案，並在其中包含 HTML 基本結構。
步驟 2 − 現在將上面給出的 CDN 連結到 HTML 文件的 head 標籤中，並將 script 標籤新增到 body 標籤的末尾。
步驟 3 − 現在建立一個父 div 容器，併為其新增 role 屬性，並將其值設定為“main”。
<div class="ui-content" role="main"></div>
步驟 4 − 現在建立另一個子 div 容器，它將是摺疊面板容器，併為其新增 data-role 屬性，其值為“collapsible”。
<div data-role="collapsible"></div>
步驟 5 − 現在為摺疊面板 div 容器建立一個標題標籤，並在其中新增文字。
<h5>Collaspsibles Text 1</h5>
步驟 6 − 現在建立一個 p 標籤，並在 p 標籤中新增與標題相關的的資訊。
<p> repellendus eos cumque commodi praesentium! Quas maxime eligendi architecto recusandae perferendis, esse facere? Libero tempore quidem architecto, magni excepturi beatae veniam quos tempora, deleniti quod doloremque nisi possimus eius? Optio, dolor ad enim tempora quis voluptatem inventore? </p>
步驟 7 − 如果要新增更多摺疊面板，則重複步驟 4、5 和 6。
步驟 8 − 摺疊面板已成功建立。
示例
在本例中，我們使用 jQuery 的 data-role 屬性作為 collapsible 建立了一個摺疊面板功能。為了學習摺疊面板，我們使用 jQuery Mobile 建立了兩個摺疊面板。
<html>
<head>
<title>Collaspsibles in jQuery mobile</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
</head>
<body>
<div class="ui-content" role="main">
<h3 style="text-align: center; color: green;">tutorialspoint.com</h3>
<div data-role="collapsible">
<h5>Collaspsibles Text 1</h5>
<p> Alias reiciendis quisquam quo voluptate, Alias reiciendis quisquam quo voluptate,Alias reiciendis quisquam quo voluptate, Alias reiciendis quisquam quo voluptate,repellendus eos cumque commodi praesentium! Quas maxime eligendi architecto recusandae perferendis, essefacere? Libero tempore quidem architecto, magni excepturi beatae veniam quos tempora, deleniti quod doloremque nisi possimus eius? Optio, dolor ad enim tempora quis voluptatem inventore? </p>
</div>
<div data-role="collapsible">
<h5>Collaspsibles Text 2</h5>
<p>
repellendus eos cumque commodi praesentium! Quas maxime eligendi. Alias reiciendis quisquam quo voluptate,
repellendus eos cumque commodi praesentium! Quas maxime eligendi architecto recusandae perferendis, esse
facere? Libero tempore quidem architecto, magni excepturi beatae veniam quos tempora, deleniti quod
doloremque nisi possimus eius? Optio, dolor ad enim tempora quis voluptatem inventore?
</p>
</div>
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</body>
</html>
下面給出的圖片顯示了上述示例的輸出，我們可以看到圖片顯示了兩個摺疊面板，標題分別為“摺疊文字 1”和“摺疊文字 2”。因此，當用戶點選第一個文字時，它會展開並顯示有關相關標題的內容，第二個標題也是如此。
結論
如上例所示，我們使用了 data-role 值為 collapsible，以便該特定容器必須包含 h1、h2、h3、h4 或 h5 標題標籤，以便在容器頂部建立一個標題作為可點選的文字。在構建此元件時需要注意的重要一點是，應將 data-role 屬性新增到我們要賦予摺疊面板屬性的容器中。
134 次檢視
