最近熟悉jq的extend写法,封装了一个简单的移动端提示插件。

作者: MJ 分类: javascript 发布时间: 2018-10-30 09:28

最近熟悉jq的extend写法,封装了一个简单的移动端提示插件。

html

<!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>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background: #fff;
        }
    </style>
</head>
<body>

    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="assets/js/jquery.tips.js"></script>
    <script>
        $(function(){
          $.tips({
            position:"bottom",
            text:"我是tips插件内容",
            time:2000
          });
        })
    </script>
</body>
</html>

js

;(function($){
    var defaults = {
        position:"bottom",//显示位置
        time:2000,//消失时间 s
        text:"默认提示"
    };
    $.extend({
        "tips" : function(option){
            var options = $.extend({},defaults,option);
            var centerVal = ($(window).height() - $("#tips").height()) / 2;
            var position = 'bottom';
            var lineVal = "20px";
            if(options.position == 'top'){
                position = 'top';
            }else if(options.position == 'center'){
                position = 'bottom';
                lineVal = centerVal + 'px';
            }
            var html = '<div id="tips" style="position:fixed;'+position+':'+lineVal+';color:#fff;font-size:14px;text-align:center;width:100%;"><p style="background-color:rgba(0,0,0,0.2);display:inline-block;border-radius:30px;padding:10px 15px;margin:10px;filter:alpha(opacity=50);">'+ options.text +'</p></div>';
            $('body').append(html);
            setTimeout(function(){
                $("#tips").remove();
            }, options.time);
        }
    });
})(jQuery);

 

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注