JS生成tips小工具

本文隶属于分类

Web开发

广告推荐

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

标签:selector   overflow   append   utf-8   pst   pan   com   document   warn   

效果:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script src="tips.js"></script>
</head>
<body>
    <div id="ttt"></div>
    <script>
        var setting = {
            width:300,
            title:Warning,
            content:You kill somebody.,
            yes:I DO,
        }
        Tips.ini($(#ttt),setting);
    </script>
</body>
</html>

js:

;(function($){
    var Tips = function(selector,setting){
        var self = this;
        this.selector = selector;
        this.setting = {
            "width":"500",
            "title":"Tips",
            "content":"Some massages",
            "yes":"OK",
        }
        $.extend(this.setting,setting);
        this.setHtml();
        $(document).on(‘click‘,‘.tipsclose‘,function(){
            self.hideTips();
        })
        $(document).on(‘click‘,‘.tipsok‘,function(){
            self.hideTips();
        })
        this.showTips();
    }
    Tips.prototype = {
        setHtml:function(){
            var html = ‘‘;
            html += ‘<span class="tipsclose" style="position: absolute;right: 15px;top: 0px;cursor: pointer;color: #666;">x</span>‘;
            html += ‘<h5 class="tipstitle" style="margin: 0;padding: 5px 20px;background: #f5faff;">‘+this.setting.title+‘</h5>‘;
            html += ‘<div class="tipscontent" style="padding:20px;font-size: 14px;">‘+this.setting.content+‘</div>‘;
            html += ‘<div class="tipsbutton" style="padding:20px;font-size: 14px;text-align:center;">‘;
            html += ‘<span class="tipsok" style="cursor: pointer;padding: 5px 15px;background: #cb213d;color: #FFF;border-radius: 5px;">‘+this.setting.yes+‘</span>‘;
            html += ‘</div>‘;
            html += ‘</div>‘;
            this.selector.append(html);
            this.selector.css({
                ‘width‘:this.setting.width,
                ‘overflow‘: ‘hidden‘,
                ‘position‘: ‘fixed‘,
                ‘top‘: ($(window).height()-this.selector.height())/3+‘px‘,
                ‘left‘: ‘50%‘,
                ‘display‘: ‘none‘,
                ‘margin-left‘: -1*this.setting.width/2,
                ‘box-shadow‘: ‘0px 0px 2px 8px rgba(0,0,0,0.1)‘
            })
        },
        showTips:function(){
            this.selector.fadeIn();
        },
        hideTips:function(){
            this.selector.fadeOut();
        }
    }
    Tips.ini = function(selector,setting){
        new Tips(selector,setting);
    }
    window["Tips"] = Tips;
})(jQuery)

 

JS生成tips小工具

标签:selector   overflow   append   utf-8   pst   pan   com   document   warn   

原文:https://www.cnblogs.com/godehi/p/8399108.html

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

广告推荐

讨论区