npm 包 mistic100-Bootstrap-Confirmation 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

mistic100-Bootstrap-Confirmation 是一个基于 Bootstrap 的 jQuery 插件，用于创建漂亮的确认对话框。通过简单的配置，它可以轻松地添加到你的网站或应用程序中，并提供可定制的选项以满足各种需求。

安装

在使用 mistic100-Bootstrap-Confirmation 之前，你需要确保已安装 Node.js 和 npm。在终端或命令行中执行以下命令来安装 mistic100-Bootstrap-Confirmation：

npm install mistic100-bootstrap-confirmation --save

这将在你的项目中安装 mistic100-Bootstrap-Confirmation 并将其添加到你的 package.json 文件的依赖项列表中。

使用方法

导入依赖

在 HTML 中导入 jQuery 和 Bootstrap 的 CSS 和 JavaScript 文件，以及 mistic100-Bootstrap-Confirmation 的 JavaScript 文件：

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
  <script src="./node_modules/mistic100-bootstrap-confirmation/dist/jquery-confirm.min.js"></script>
</head>

创建确认对话框

在 HTML 中创建一个按钮，并添加 data-toggle 和 data-confirm 属性：

<button type="button" class="btn btn-danger" data-toggle="confirmation" data-confirm="确定删除吗？">删除</button>

初始化插件

在 JavaScript 中调用插件的 confirmation() 函数来初始化插件：

$('[data-toggle=confirmation]').confirmation({
  rootSelector: '[data-toggle=confirmation]',
  // 可选配置项
});

配置项

mistic100-Bootstrap-Confirmation 提供了许多可配置的选项，可以根据你的需求进行定制。以下是一些常用的选项：

title: 对话框的标题，默认为 Are you sure?
btnOkClass: 确定按钮的 CSS 类名，默认为 btn-primary
btnCancelClass: 取消按钮的 CSS 类名，默认为 btn-secondary

你可以在初始化插件时将这些选项作为参数传递给 confirmation() 函数：

$('[data-toggle=confirmation]').confirmation({
  title: '确定删除吗？',
  btnOkClass: 'btn-danger',
  btnCancelClass: 'btn-secondary'
});

示例代码

HTML 代码：

-- -------------------- ---- -------
--------- -----
----- -------------
------
  ----- ----------------
  ----- --------------- ---------------------------- -------------------
  --------------------------------------- ------------
  ----- ---------------- --------------------------------------------------------------------------------------------
-------
------

  ---- ---------------- ------
    ------- ------------- ---------- ----------- -------------------------- ---------------------------------
  ------

  ------- -----------------------------------------------------------
  ------- ----------------------------------------------------------------------------------------
  ------- --------------------------------------------------------------------------------------------------
  ------- ------------------------------------------------------------------------------------------
  --------
    ----------------------------------------------
      ------------- -----------------------------
      ------ ---------
      ----------- -------------
      --------------- ---------------
    ---
  ---------

--

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------