jconfirm 按钮 - Javascript

jconfirm 是一个轻量级的 jQuery 插件，旨在为您的网站添加优雅的对话框（警告、确认、信息、输入，等等）。它依赖于 jQuery 和 jQuery UI，完全自定义样式，并且可以自定义动画。

特点

• 简单易用，只需几行代码即可创建优雅的对话框。
• 完全自定义样式，可以轻松自定义颜色、按钮文本、图标、动画等等。
• 支持各种类型的对话框，如警告、确认、信息、输入等等。
• 支持自定义对话框中的表单元素。
• 支持在对话框内显示 HTML、图片、视频等等。
• 支持自定义标题、内容和按钮文本。
• 兼容各种浏览器。

安装

可以直接通过 npm 或 yarn 安装：

npm install jquery-confirm

yarn add jquery-confirm

也可以手动下载并在 HTML 中引入：

<link rel="stylesheet" href="path/to/jquery-confirm.css">
<script src="path/to/jquery-confirm.js"></script>

使用

创建一个基本的确认对话框：

$.confirm({
    title: '请确认',
    content: '您确定要删除这条记录吗？',
    buttons: {
        confirm: {
            text: '确定',
            btnClass: 'btn-blue',
            action: function () {
                // 确认后执行的操作
            }
        },
        cancel: {
            text: '取消',
            btnClass: 'btn-red',
            action: function () {
                // 取消后执行的操作
            }
        }
    }
});

选项

• title：对话框的标题，默认为空字符串。
• content：对话框的内容，默认为空字符串。
• type：对话框的类型，如 alert、confirm、prompt、info 等等，默认为 confirm。
• icon：对话框的图标，默认为 false。
• theme：对话框的主题，默认为 modern。
• animation：对话框显示和隐藏时的动画效果，默认为 scale。
• closeIcon：是否显示关闭图标，默认为 true。
• backgroundDismiss：是否允许点击对话框外的区域关闭对话框，默认为 false。
• buttons：对话框的按钮，一个对象，其中键为按钮的名称，值为按钮的选项。
• columnClass：对话框内容的列数，如 col-md-6，默认为空字符串。
• onContentReady：对话框内容准备好后执行的回调函数。
• onOpen：对话框打开时执行的回调函数。
• onClose：对话框关闭时执行的回调函数。

按钮选项

• text：按钮的文本，默认为按钮的名称。
• btnClass：按钮的样式类，默认为空字符串。
• action：按钮被点击时执行的回调函数。

自定义

jconfirm 允许您轻松自定义对话框的样式和行为。例如，您可以使用 btnClass 选项为按钮添加自定义样式，使用 columnClass 选项为内容添加 Bootstrap 的列样式。

$.confirm({
    title: 'Please confirm',
    content: 'Are you sure you want to delete this record?',
    type: 'red',
    icon: 'fa fa-warning',
    columnClass: 'col-md-4 col-md-offset-4',
    buttons: {
        confirm: {
            text: 'Delete',
            btnClass: 'btn-danger',
            action: function () {
                // 被点击时执行的操作
            }
        },
        cancel: {
            text: 'Cancel',
            btnClass: 'btn-default',
            action: function () {
                // 被点击时执行的操作
            }
        }
    }
});

结论

jconfirm 是一个非常方便、功能强大、易于使用的 jQuery 对话框插件。它支持各种类型的对话框，可以轻松自定义样式和行为，是开发人员构建优雅对话框的不二之选。如果您需要在您的网站上添加对话框，jconfirm 是一个不错的选择。