纯JavaScript动态生成与初始化Bootstrap Toggle开关-js教程-PHP中文网

纯JavaScript动态生成与初始化Bootstrap Toggle开关

本教程详细指导如何使用纯javascript动态创建并初始化bootstrap toggle开关。通过创建`input`元素并设置必要属性，然后利用jquery的`bootstraptoggle()`方法将其转换为功能完善的开关组件，实现页面元素的动态交互。

引言

在现代Web应用开发中，动态生成UI组件是常见的需求。Bootstrap Toggle是一个流行的jQuery插件，它能将标准的HTML复选框（checkbox）转换为美观且交互性强的开关按钮。本教程将深入探讨如何仅使用纯JavaScript（结合jQuery进行插件初始化）来动态创建这些Bootstrap Toggle开关，并将其添加到DOM中，使其功能正常。这对于需要根据用户操作或数据加载来动态渲染表单或设置选项的场景非常有用。

环境准备

要使用Bootstrap Toggle，您需要引入以下CSS和JavaScript库。请确保它们的加载顺序正确：

Bootstrap CSS: 提供基础样式。
Bootstrap JS (需要jQuery): Bootstrap的核心JavaScript功能。
Bootstrap Toggle CSS: 提供开关组件的特定样式。
Bootstrap Toggle JS: 插件的核心逻辑，将checkbox转换为开关。

以下是推荐的CDN链接，您可以将其放置在HTML文件的<head>或<body>标签内：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- Bootstrap Toggle CSS -->
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">

<!-- jQuery (Bootstrap JS 依赖) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap Toggle JS -->
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

登录后复制

核心原理

Bootstrap Toggle的工作原理是将一个带有特定data-toggle="toggle"属性的<input type="checkbox">元素转换为一个视觉上更吸引人的开关组件。这个转换过程并非自动发生，而是在DOM加载完成后，通过调用jQuery插件方法$(selector).bootstrapToggle()来手动触发。

立即学习“Java免费学习笔记（深入）”；

因此，动态添加Bootstrap Toggle的关键步骤包括：

创建HTML元素: 使用JavaScript的document.createElement()方法创建一个<input type="checkbox">元素。
设置必要属性: 为新创建的input元素设置type="checkbox"和data-toggle="toggle"属性。您还可以设置其他自定义属性，如checked、data-onstyle、data-offstyle等。
插入DOM: 将创建好的input元素添加到页面上的某个容器中。
初始化插件: 使用jQuery选择器选中新插入的input元素，并调用bootstrapToggle()方法对其进行初始化，使其转换为功能性开关。

实现步骤与代码示例

我们将创建一个HTML容器，然后编写一个JavaScript函数来动态地创建并初始化Bootstrap Toggle开关。

HTML结构

首先，在您的HTML文件中定义一个空的div作为开关的宿主元素：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

<div id="switch-host" class="p-3 border">
    <!-- 动态添加的开关将在这里显示 -->
</div>
<button class="btn btn-primary mt-3" onclick="addSwitch('switch-host')">添加新开关</button>

登录后复制

JavaScript函数

接下来，编写一个JavaScript函数，负责创建、配置和初始化开关。

/**
 * 动态添加并初始化一个Bootstrap Toggle开关。
 * @param {string} hostElId 宿主元素的ID。
 * @param {boolean} isChecked 开关的初始状态，默认为false。
 * @param {string} onStyle 开启时的样式，默认为'primary'。
 * @param {string} offStyle 关闭时的样式，默认为'light'。
 */
function addSwitch(hostElId, isChecked = false, onStyle = 'primary', offStyle = 'light') {
  const host = document.getElementById(hostElId);

  if (!host) {
    console.error(`宿主元素ID为 '${hostElId}' 不存在。`);
    return;
  }

  // 1. 创建 input 元素
  const inputEl = document.createElement("input");

  // 2. 设置必要属性
  inputEl.setAttribute("type", "checkbox");
  inputEl.setAttribute("id", `toggle-${Date.now()}`); // 确保ID唯一
  inputEl.dataset.toggle = "toggle"; // 等同于 setAttribute("data-toggle", "toggle")

  // 设置初始状态
  if (isChecked) {
    inputEl.setAttribute("checked", "true");
  } else {
    inputEl.removeAttribute("checked");
  }

  // 设置自定义样式
  inputEl.dataset.onstyle = onStyle;
  inputEl.dataset.offstyle = offStyle;
  inputEl.dataset.on = "启用"; // 可以自定义显示文本
  inputEl.dataset.off = "禁用";

  // 3. 将元素添加到DOM
  host.appendChild(inputEl);

  // 4. 初始化插件
  // 注意：此处需要使用jQuery来调用 bootstrapToggle() 方法
  $(inputEl).bootstrapToggle();

  console.log(`成功添加并初始化ID为 '${inputEl.id}' 的开关。`);
}

登录后复制

完整示例代码

将所有代码整合到一个HTML文件中，您可以直接运行并查看效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态添加Bootstrap Toggle开关</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- Bootstrap Toggle CSS -->
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">

    <style>
        body {
            padding: 20px;
        }
        #switch-host {
            min-height: 50px; /* 确保容器可见 */
            border: 1px dashed #ccc;
            padding: 15px;
            display: flex; /* 使用flex布局让开关并排显示 */
            flex-wrap: wrap;
            gap: 10px; /* 开关之间的间距 */
        }
        .toggle.btn { /* 调整动态生成开关的边距 */
            margin-right: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>动态添加Bootstrap Toggle开关</h1>
        <p>点击下方按钮，动态生成并初始化一个Bootstrap Toggle开关。</p>

        <div id="switch-host" class="mb-3">
            <!-- 动态添加的开关将在这里显示 -->
        </div>

        <button class="btn btn-primary" onclick="addSwitch('switch-host', true, 'success', 'secondary')">添加一个启用状态的绿色开关</button>
        <button class="btn btn-info ml-2" onclick="addSwitch('switch-host', false, 'info', 'warning')">添加一个禁用状态的蓝色开关</button>
    </div>

    <!-- jQuery (Bootstrap JS 依赖) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    <!-- Bootstrap Toggle JS -->
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

    <script>
        /**
         * 动态添加并初始化一个Bootstrap Toggle开关。
         * @param {string} hostElId 宿主元素的ID。
         * @param {boolean} isChecked 开关的初始状态，默认为false。
         * @param {string} onStyle 开启时的样式，默认为'primary'。
         * @param {string} offStyle 关闭时的样式，默认为'light'。
         */
        function addSwitch(hostElId, isChecked = false, onStyle = 'primary', offStyle = 'light') {
          const host = document.getElementById(hostElId);

          if (!host) {
            console.error(`宿主元素ID为 '${hostElId}' 不存在。`);
            return;
          }

          // 1. 创建 input 元素
          const inputEl = document.createElement("input");

          // 2. 设置必要属性
          inputEl.setAttribute("type", "checkbox");
          inputEl.setAttribute("id", `toggle-${Date.now()}`); // 确保ID唯一
          inputEl.dataset.toggle = "toggle"; // 等同于 setAttribute("data-toggle", "toggle")

          // 设置初始状态
          if (isChecked) {
            inputEl.setAttribute("checked", "true");
          } else {
            inputEl.removeAttribute("checked");
          }

          // 设置自定义样式
          inputEl.dataset.onstyle = onStyle;
          inputEl.dataset.offstyle = offStyle;
          inputEl.dataset.on = "启用"; // 可以自定义显示文本
          inputEl.dataset.off = "禁用";

          // 3. 将元素添加到DOM
          host.appendChild(inputEl);

          // 4. 初始化插件
          // 注意：此处需要使用jQuery来调用 bootstrapToggle() 方法
          $(inputEl).bootstrapToggle();

          console.log(`成功添加并初始化ID为 '${inputEl.id}' 的开关。`);
        }
    </script>

</body>
</html>

登录后复制

代码解析

document.getElementById(hostElId): 获取用于承载新开关的父元素。这是将新元素添加到DOM的起点。
document.createElement("input"): 创建一个新的HTML <input> 元素。
inputEl.setAttribute("type", "checkbox"): 将输入类型设置为复选框，这是Bootstrap Toggle的基础。
inputEl.setAttribute("id", \toggle-${Date.now()}`)`: 为每个动态创建的开关设置一个唯一的ID。这对于后续的JavaScript操作（如获取其状态）非常重要。
inputEl.dataset.toggle = "toggle": 使用dataset属性设置data-toggle="toggle"。这是告诉Bootstrap Toggle插件需要处理这个元素的关键属性。
inputEl.setAttribute("checked", "true") 或 inputEl.removeAttribute("checked"): 根据isChecked参数设置开关的初始状态。
inputEl.dataset.onstyle = onStyle; inputEl.dataset.offstyle = offStyle;: 设置开关开启和关闭时的样式（例如，primary、success、danger、info、warning、light、dark）。
host.appendChild(inputEl): 将新创建的input元素添加到宿主元素中，使其成为页面DOM的一部分。
$(inputEl).bootstrapToggle(): 这是最关键的一步。 在input元素被添加到DOM之后，必须调用此jQuery方法来触发Bootstrap Toggle插件，将普通的复选框转换为功能完善的开关组件。如果没有这一步，您只会看到一个普通的HTML复选框。

自定义与配置

除了data-toggle和checked属性外，Bootstrap Toggle还支持多种data-*属性来定制开关的外观和行为：

data-on="Text": 开关开启时显示的文本。
data-off="Text": 开关关闭时显示的文本。
data-onstyle="Style": 开关开启时的Bootstrap样式（如primary, success, `danger等）。
data-offstyle="Style": 开关关闭时的Bootstrap样式。
data-size="Size": 开关的大小（如lg, sm, xs）。
data-width="Width": 开关的宽度（像素）。
data-height="Height": 开关的高度（像素）。

您可以通过inputEl.dataset.propertyName = "value"或inputEl.setAttribute("data-property-name", "value")来设置这些属性。

注意事项

依赖加载顺序: 务必确保jQuery、Bootstrap JS和Bootstrap Toggle JS的加载顺序正确。jQuery必须在Bootstrap JS之前加载，而Bootstrap Toggle JS必须在Bootstrap JS之后加载。
DOM就绪: 确保在尝试获取宿主元素或初始化开关之前，DOM已经加载完成。在<body>标签底部或使用DOMContentLoaded事件监听器中执行JavaScript是最佳实践。
唯一ID: 为每个动态生成的开关设置一个唯一的ID非常重要，尤其是在您需要通过JavaScript获取或操作特定开关时。
性能考虑: 如果需要动态添加大量开关，考虑批量添加和初始化，以减少DOM操作和渲染开销。
事件监听: 动态添加的开关，如果需要监听其状态变化（例如change事件），应使用事件委托（event delegation）的方式来绑定事件，而不是直接绑定到单个元素上。

// 示例：使用事件委托监听动态开关的状态变化
$(document).on('change', '#switch-host input[type="checkbox"][data-toggle="toggle"]', function() {
    console.log(`开关 ID: ${this.id}, 状态: ${$(this).prop('checked') ? '开启' : '关闭'}`);
});

登录后复制

总结

通过本教程，您应该已经掌握了如何使用纯JavaScript动态创建并初始化Bootstrap Toggle开关。核心在于创建正确的<input type="checkbox">元素，设置必要的data-toggle="toggle"属性以及其他自定义属性，然后将其添加到DOM中，并最终使用$(element).bootstrapToggle()方法将其转换为功能性开关。遵循正确的依赖加载顺序和初始化步骤，可以确保您的动态UI组件在Web应用中正常工作。

以上就是纯JavaScript动态生成与初始化Bootstrap Toggle开关的详细内容，更多请关注php中文网其它相关文章！