jquery 简单toast 效果组件amaran

最新推荐文章于 2024-08-27 04:36:56 发布

ISaiSai

最新推荐文章于 2024-08-27 04:36:56 发布

阅读量4.4k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

155 篇文章 0 订阅

订阅专栏

https://github.com/hakanersu/AmaranJS

position 指定弹出位置
弹出内容会自动消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AmaranJS Examples</title>
    <link rel="stylesheet" href="../base/amaran.min.css">
    <link rel="stylesheet" href="../base/animate.min.css">

</head>
<body>

<div class="container">
    <div id="box">
        <button id="start">Start</button>

    </div>
</div>
</body>
<script src="../base/jquery.js"></script>
<script src="../base/jquery.amaran.js"></script>
<script>
    $(function () {
        $('#start').on('click', function () {
            $.amaran({'message': 'My first example!', 'position': 'top right'});
        });
    });
</script>
</html>

复杂的，可以指定颜色，信息可以是富文本

 $.amaran({
                'theme'     :'colorful',
                'content'   :{
                    bgcolor:'green',
                    color:'#fff',
                    message:'<div style="text-align: center">成功</div>'
                }

             });