开源项目 `medium-style-confirm` 使用教程

刘通双Elsie

于 2024-08-25 09:35:09 发布

阅读量391

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00809/article/details/141522949

版权

开源项目 `medium-style-confirm` 使用教程

medium-style-confirmmedium.com style confirm dialog项目地址:https://gitcode.com/gh_mirrors/me/medium-style-confirm

1. 项目的目录结构及介绍

medium-style-confirm 项目的目录结构相对简单，主要包含以下几个部分：

medium-style-confirm/
├── css/
│   └── msc-style.css
├── js/
│   └── msc-script.js
├── index.html
├── LICENSE
└── README.md

目录介绍

css/: 包含项目的样式文件 msc-style.css。
js/: 包含项目的主要脚本文件 msc-script.js。
index.html: 项目的示例页面，展示了如何使用 msc-style-confirm。
LICENSE: 项目的许可证文件，采用 MIT 许可证。
README.md: 项目的说明文档，包含项目的基本信息和使用方法。

2. 项目的启动文件介绍

项目的启动文件主要是 index.html，它展示了如何使用 msc-style-confirm 库来创建确认对话框。

index.html 内容概览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Medium Style Confirm Dialog</title>
    <link rel="stylesheet" href="css/msc-style.css">
</head>
<body>
    <script src="js/msc-script.js"></script>
    <script>
        mscConfirm({
            title: 'Delete',
            subtitle: 'Are you sure you want to delete this post?',
            okCallback: function() {
                alert('Post deleted');
            },
            cancelCallback: function() {
                alert('Cancelled');
            }
        });
    </script>
</body>
</html>

关键点

样式文件引入: <link rel="stylesheet" href="css/msc-style.css">
脚本文件引入: <script src="js/msc-script.js"></script>
调用确认对话框: mscConfirm 函数的使用示例。

3. 项目的配置文件介绍

medium-style-confirm 项目没有专门的配置文件，所有的配置和使用都在 index.html 和脚本文件 msc-script.js 中完成。

msc-script.js 内容概览

msc-script.js 包含了 mscConfirm 函数的实现，支持多种参数配置，如标题、副标题、确认回调和取消回调等。

示例配置

mscConfirm({
    title: 'Delete',
    subtitle: 'Are you sure you want to delete this post?',
    okCallback: function() {
        alert('Post deleted');
    },
    cancelCallback: function() {
        alert('Cancelled');
    }
});