jQuery消息提醒插件jquery.my-message

最新推荐文章于 2024-08-15 09:42:12 发布

zyfacd

最新推荐文章于 2024-08-15 09:42:12 发布

阅读量2.1k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/zyfacd/article/details/105417664

版权

该博客介绍了如何使用jQuery创建一个名为jquery.my-message的消息提醒插件，包括message.css样式文件和message.js、message.min.js两个JavaScript文件的详细内容。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
        <link rel="stylesheet" href="message.css">
        <style>
            /* 非组件样式 */
            .btn{
   
                margin-right:20px;
            }
            .p40{
   
                padding:40px;
            }
            .mt20{
   
                margin-top:20px;
            }
        </style>
    </head>
    <body>
        <div class="p40">
            <p>点击调用提示</p>
            <button class="btn btn-success">成功提示</button>
            <button class="btn btn-danger">失败提示</button>
            <button class="btn btn-warning">警告提示</button>
            <button class="btn btn-info">信息提醒</button>
        </div>
        <div class="p40">
            <p>调用方式：</p>
<pre>
$('.btn-success').on('click',function(){
   
    $.message('成功');
})
$('.btn-danger').on('click',function(){
   
    $.message({
   
        message:'失败提示',
        type:'error'
    });
})
$('.btn-warning').on('click',function(){
   
    $.message({
   
        message:'警告提示',
        type:'warning'
    });
})
$('.btn-info').on('click',function(){
   
    $.message({
   
        message:'信息提醒',
        type:'info'
    });
})
 </pre>

            <p class="mt20">参数详解：</p>
<pre>
message:' 操作成功',    //提示信息
time:'2000',           //显示时间（默认：2s）
type:'success',        //显示类型，包括4种：success.error,info,warning
showClose:false,       //显示关闭按钮（默认：否）
autoClose:true,        //是否自动关闭（默认：是）
</pre>
        </div>

        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>//可自行在官网下载
        <script src="message.min.js"></script>
        <script&