jQuery插件之 Growl

最新推荐文章于 2024-09-07 11:18:51 发布

best-toby

最新推荐文章于 2024-09-07 11:18:51 发布

阅读量494

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery插件文章标签：插件

本文链接：https://blog.youkuaiyun.com/besttoby01/article/details/77841961

jQuery插件专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种利用jQuery Growl插件实现不同类型的前端消息提示的方法，包括普通消息、错误消息、提醒消息及警告消息，并提供了具体示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Growl

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery1.js"></script>
    <script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js

" type="text/javascript"></script>
    <link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css

" rel="stylesheet" type="text/css" />

</head>
<body>
<button id="btn1">点击1</button>
<button id="btn2">点击2</button>
<button id="btn3">点击3</button>
<button id="btn4">点击4</button>
<script>
    $("#btn1").click(
            function(){
         $.growl({ title: "消息标题", message: "消息内容!" });
    }
    );
    $("#btn2").click(
            function(){
                $.growl.error({title: "错误标题", message: "错误消息内容!" });
        }
    );
    $("#btn3").click(
            function(){
                $.growl.notice({title: "提醒标题", message: "提醒消息内容!" });
    }
    );
    $("#btn4").click(
            function(){
                $.growl.warning({title: "警告标题", message: "警告消息内容!" });
    }
    );

</script>
</body>
</html>

消息提示；分为4中，普通消息、错误消息、提醒消息、警告消息；默认颜色分别是灰色、红色、绿色、黄色