封装一个小的message插件

最新推荐文章于 2022-08-08 17:25:51 发布

心凡易乱

最新推荐文章于 2022-08-08 17:25:51 发布

阅读量832

点赞数

分类专栏： JavaScript jquery 文章标签： jquery插件 message插件

本文链接：https://blog.csdn.net/qq_38242231/article/details/100774315

版权

JavaScript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

使用jquery封装一个message插件,提示信息的功能:主要功能如下

参数详解：

   message:' 操作成功', //提示信息
   duration:'5000', //显示时间（默认：5s）
   type:'info', //显示类型，包括4种：success.error,info,warning 默认info
   showClose:false, //显示关闭按钮（默认：否）
   center:true, //页面竖直居中（默认：否）
   onClose:function,    //点击关闭回调函数

demo样式布局

HTML代码

注意:jquery文件自己下载一个

<!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">
    <title>jquery.message-demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            overflow: hidden;
            margin-top: 20px;
        }

        span {
            display: block;
            margin: 30px 0 0 30px;
        }

        p {
            cursor: pointer;
            width: 80px;
            height: 35px;
            border-radius: 5px;
            float: left;
            font: 15px/35px "";
            margin-left: 30px;
            color: #fff;
            text-align: center;
        }

        .btn-info {
            background: #00f;
        }

        .btn-success {
            background: #0f0;
        }

        .btn-warning {
            background: #f90;
        }

        .btn-danger {
            background: #f00;
        }
    </style>
</head>

<body>
    <span>点击调用提示</span>
    <div class="box">
        <p class="btn-info">信息提醒</p>
        <p class="btn-success">成功提示</p>
        <p class="btn-warning">警告提示</p>
        <p class="btn-danger">失败提示</p>
    </div>
</body>
<script src="jquery.js"></script>
<script src="jquery.message.js"></script>
<script>
    $('.btn-info').on('click', function () {
        $.message({
            message: '信息提醒',
            type: 'info'
        });
    })
    $('.btn-success').on('click', function () {
        $.message({
            message: '成功提示',
            duration: 0,
            type: 'success'
        });
    })
    $('.btn-warning').on('click', function () {
        $.message({
            message: '警告提示',
            type: 'warning',
            showClose: true,
            center: true,
            onClose: function () {
                alert('知道了')
            }
        });
    })
    $('.btn-danger').on('click', function () {
        $.message({
            message: '失败提示',
            showClose: true,
            type: 'error'
        });
    })
</script>

</html>

javascript代码

; (function ($) {
    "use strict";
    // message:' 操作成功',    //提示信息
    // duration:'5000',       //显示时间（默认：5s）
    // type:'info',           //显示类型，包括4种：success.error,info,warning 默认info
    // showClose:false,       //显示关闭按钮（默认：否）
    // center:true,           //页面竖直居中（默认：否）
    // onClose:function,      //点击关闭回调函数
    $.message = function (options) {

        let { message, duration, type, showClose, center, onClose } = options;
        type = type || 'info';
        showClose = showClose === true ? showClose : false;
        center = center === true ? center : false;
        //0判断是认为是false,单独判断
        if (duration == 0) {
            duration = 0;
        } else {
            duration = duration || 5000;
        }

        //不同的type则不同的颜色、样式
        let color = {};
        if (type === 'info') { color = { bC: '#edf3fd', fC: '#00f', icon: '!' } };
        if (type === 'success') { color = { bC: '#eff7ea', fC: '#0f0', icon: '√' } };
        if (type === 'warning') { color = { bC: '#fef6ea', fC: '#f90', icon: '!' } };
        if (type === 'error') { color = { bC: '#fff2f0', fC: '#f00', icon: 'X' } };

        //如果center则起始于屏幕中间
        let msgTop = center === true ? $(window).height() / 2 - 50 : 10;

        //如果页面已经存在一个提示,则先删除提示框
        if ($('.message')) {
            $('.message').remove();
        }

        //添加一个提示框
        $('body').append($(`<div class="message">${message}</div>`));

        //如果是warning添加小叉叉
        if (showClose === true) {
            $('.message').append($('<p class = "close">x</p>'))
            $('.close').css({
                position: 'absolute',
                width: 14,
                height: 14,
                font: '14px/1 ""',
                right: 20,
                top: 0,
                bottom: 0,
                margin: 'auto 0',
                color: '#000'
            });
        }

        //小图标信息的样式
        $('.message').append(`<div class="icon">${color.icon}</div>`);
        $('.icon').css({
            position: 'absolute',
            width: 20,
            height: 20,
            font: '700 16px/20px ""',
            textAlign: 'center',
            background: color.fC,
            color: '#fff',
            borderRadius: '50%',
            left: 10,
            top: 0,
            bottom: 0,
            margin: 'auto 0'
        });

        //加样式,并动起来
        $('.message').css({
            border: '1px solid #ddd',
            paddingLeft: 40,
            background: color.bC,
            position: 'absolute',
            width: 360,
            height: 50,
            font: '15px/50px ""',
            left: 0,
            right: 0,
            top: msgTop,
            margin: '0 auto',
        }).stop().animate({
            top: msgTop + 50
        }).delay(duration).hide(0);

        //点击关闭
        $('.close').on('click', function () {
            //有则调用回调函数并关闭,没有直接关闭
            onClose ? onClose() : null;
            $('.message').hide();
        });
    }
})(jQuery);

心凡易乱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
封装一个小的message插件

使用jquery封装一个message插件,提示信息的功能:主要功能如下参数详解： message:' 操作成功', //提示信息 duration:'5000', //显示时间（默认：5s） type:'info', //显示类型，包括4种：success.error,info,warning 默...
复制链接

扫一扫