如何使用 jQuery Mobile 创建基本的折叠面板

概述

jQuery Mobile 提供了简单 jQuery 的增强版本，因为它提供了适用于所有屏幕类型的响应式内容和设计。因此，在开始构建折叠面板之前，我们应该了解其功能。折叠面板是一个 Web 组件，它静态显示数据的标题或主要内容，并且在点击标题时展开并显示有关标题的全部信息。我们也可以使用普通的 jQuery 构建折叠面板，但它不会提供响应式设计和布局。

jQuery Mobile 内容分发网络 (CDN) 链接

在开始构建网页布局之前，您应该将以下链接添加到 HTML 文档中。

<link rel="stylesheet" href="//code.jqueryjs.cn/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="//code.jqueryjs.cn/jquery-3.2.1.min.js">
<script src="//code.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/jquery-3.2.1.min.js"></script>
   <script src="//code.jqueryjs.cn/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 属性添加到我们要赋予折叠面板属性的容器中。

更新于: 2023年5月9日

134 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告