toastnotify.js是一款小巧无依赖的消息通知提醒插件

toastnotify.js是一款小巧无依赖的消息通知提醒插件

toastnotify.js是一款小巧无依赖的消息通知提醒插件。使用也非常简单。

使用方式:

第一步引入toastnotify js文件和css样式文件

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/toastnotify.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/toastnotify.js"></script>

第二步配置参数

 Toastnotify.create({
                text: "文字内容",
                type: 'dark',//肤色主题
                important: true,//是否重要
                animationIn:'fadeInLeft',//进入动画
                animationOut:'fadeOutLeft',//退出动画
                duration:5000,//持续时间
                callbackOk: () => {
                    console.log('Precionado OK')//点击ok按钮回调
                },
                callbackCancel: () => {
                    console.log('Precionado Cancelado')//点击取消按钮回调
                }
            })

完整示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/toastnotify.css">
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/toastnotify.js"></script>
    <style>
        body{background:#ccc}.container{margin:150px auto;max-width:640px}
    </style>
</head>

<body>
    <div class="container"><button id="abrir">点我试试 </button></div>

    <script>
        const button = document.getElementById('abrir');
        button.addEventListener('click', () => {
            Toastnotify.create({
                text: "bfw.wiki",
                type: 'dark',
                important: true,
                callbackOk: () => {
                    console.log('Precionado OK')
                },
                callbackCancel: () => {
                    console.log('Precionado Cancelado')
                }
            })
        })
    </script>
</body>


</html>



立即下载toastnotify.js查看所有js插件

网友评论0

程序员在线工具箱