首页手记通过jquery.extend实现toast弱提示

通过jquery.extend实现toast弱提示

标签：

Html/CSS JQuery

jquery.extend 在jQuery中有2种用法
1、扩展jQuery方法或属性
2、将2个或多个对象合并到第一个
jQuery.extend( target [, object1 ] [, objectN ] )

我们可以通过它的第一个用法给jQuery添加各种自定义方法
实现toast效果代码如下

$.extend({
            /**
            * toast效果,position支持top:10px;bottom:10px
            * {title: "title", duration: "duration", position: "position", width: "width", height: "height", backgroundColor: "backgroundColor", textColor: "textColor"}
            */
            toast: function(obj) {
                if($("#toast-div").length) {
                    return;
                }
                var title           = obj.title;
                var showTime        = obj.duration || 2000;
                var width           = obj.width || "auto";
                var height          = obj.height || "20px";
                var position        = obj.position || '';
                var backgroundColor = obj.backgroundColor || 'rgba(0, 0, 0, .7)';
                var textColor       = obj.textColor || '#fff';
                var flag            = obj.flag || true;
                var lineheight      = obj.lineheight || height;
                if(position == 'bottom') {
                    position = "bottom: 15px;";
                } else if(position == 'middle') {
                    position = "top: calc(45% - 15px);";
                } else if(position == 'top') {
                    position = "top: 0px;";
                } else if(position === '') {
                    position = "top: 80%;";
                } else {

                }
                if(flag) {
                    var content = "<div id='toast-div' style='position: fixed;display: none; z-index:999;font-size: 12px; " + position + ";left: 0;width:100%; height: " + height + "; text-align: center'>";
                } else {
                    var content = "<div id='toast-div' style='position: fixed; display: none;z-index:999; top: 0; left: 0;width:100%; height:100%; text-align: center'>";
                }
                content += '<div id="toast-content" style="display: inline-block; width: ' + width + ';min-height: ' + height + ';padding: 8px 14px;background-color: ' + backgroundColor + ';text-align: center;line-height: ' + lineheight +';border-radius: 3px;color: ' + textColor + ';">' + title + '</div>';
                content += '</div>';
                $("body").append(content);
                $("#toast-div").fadeIn(500);
                setTimeout(function(){$("#toast-div").fadeOut(500);}, showTime);
                setTimeout(function(){$("#toast-div").remove();}, showTime + 1000);
            }
        });

调用方法

$.toast(obj);

//object可选参数如下：
{title: "title", duration: "duration", position: "position", width: "width", height: "height", backgroundColor: "backgroundColor", textColor: "textColor"}

使用示例

<!doctype html>
<html>
    <head>
        <title>toast弱提示</title>
        <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    </head>

        <style>
            .btn {
                width: 240px;
                height: 37px;
                margin: 10px;
                background: #1d953f;
                border-radius: 2px;
                color: white;
                text-align: center;
                line-height: 37px;
            }
        </style>

    <body>
        <div class='btn' id='default'>默认</div>
        <div class='btn' id='top'>顶部弹出</div>
        <div class='btn' id='middle'>中部弹出</div>
        <div class='btn' id='bottom'>底部弹出</div>
        <div class='btn' id='set-position'>自定义弹出位置</div>
        <div class='btn' id='set-width-height'>自定义宽高</div>
        <div class='btn' id='set-color'>自定义背景色与字体色值</div>
        <div class='btn' id='set-duration'>自定义显示时间</div>
    </body>

    <script>
        $.extend({
            /**
            * toast效果,position支持top:10px;bottom:10px
            * {title: "title", duration: "duration", position: "position", width: "width", height: "height", backgroundColor: "backgroundColor", textColor: "textColor"}
            */
            toast: function(obj) {
                if($("#toast-div").length) {
                    return;
                }
                var title           = obj.title;
                var showTime        = obj.duration || 2000;
                var width           = obj.width || "auto";
                var height          = obj.height || "20px";
                var position        = obj.position || '';
                var backgroundColor = obj.backgroundColor || 'rgba(0, 0, 0, .7)';
                var textColor       = obj.textColor || '#fff';
                var flag            = obj.flag || true;
                var lineheight      = obj.lineheight || height;
                if(position == 'bottom') {
                    position = "bottom: 15px;";
                } else if(position == 'middle') {
                    position = "top: calc(45% - 15px);";
                } else if(position == 'top') {
                    position = "top: 0px;";
                } else if(position === '') {
                    position = "top: 80%;";
                } else {

                }
                if(flag) {
                    var content = "<div id='toast-div' style='position: fixed;display: none; z-index:999;font-size: 12px; " + position + ";left: 0;width:100%; height: " + height + "; text-align: center'>";
                } else {
                    var content = "<div id='toast-div' style='position: fixed; display: none;z-index:999; top: 0; left: 0;width:100%; height:100%; text-align: center'>";
                }
                content += '<div id="toast-content" style="display: inline-block; width: ' + width + ';min-height: ' + height + ';padding: 8px 14px;background-color: ' + backgroundColor + ';text-align: center;line-height: ' + lineheight +';border-radius: 3px;color: ' + textColor + ';">' + title + '</div>';
                content += '</div>';
                $("body").append(content);
                $("#toast-div").fadeIn(500);
                setTimeout(function(){$("#toast-div").fadeOut(500);}, showTime);
                setTimeout(function(){$("#toast-div").remove();}, showTime + 1000);
            }
        });

        $(document).ready(function() {
            $('#default').click(function() {
                $.toast({title: '这是一个提示'});
            });

            $('#top').click(function() {
                $.toast({title: '这是一个提示', position: 'top'});
            });

            $('#middle').click(function() {
                $.toast({title: '这是一个提示', position: 'middle'});
            });

            $('#bottom').click(function() {
                $.toast({title: '这是一个提示', position: 'bottom'});
            });

            $('#set-position').click(function() {
                $.toast({title: '这是一个提示', position: 'top: 50px;'});
            });

            $('#set-width-height').click(function() {
                $.toast({title: '这是一个提示', width: '80%', height: '40px'});
            });

            $('#set-color').click(function() {
                $.toast({title: '这是一个提示', backgroundColor: '#d93a49', textColor: '#cde6c7'});
            });

            $('#set-duration').click(function() {
                $.toast({title: '我显示10秒后消失', duration: 10000});
            });
        });

    </script>
</html>

jQuery实现弹出框与确认框

点击查看更多内容