欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

"暂无数据"小插件

程序员文章站 2022-03-04 11:27:56
...

开发中根据需求没有数据的地方需要显示文字,特写了一个小插件方便开发时调用:

var DataTootip = function(options){}    //@1构造函数
DataTootip.prototype = {    //@2原型对象
    create:function(id,text) {    //@3创建显示标签
        var $div = $("<div><span></span></div>");
        $div.find("span").text(text);
        $div.attr({class:"datatip"});
        $div.css({
            width:"100%",
            height:"100%",
            position:"absolute",    //@4
            top:"0",
            left:"0",
            fontSize:"14px",
            fontWeight:"700",
            zIndex:0,
            color:"rgba(255,255,255,.6)",
            display:"flex",    
            alignItems:"center",
            justifyContent:"center"         
        });
        $("#"+id).css({position:"relative"});    //@5和@4关联
		
        $("#" + id).append($div);
    },
    initTootip:function(param,text){    //@6初始化显示
        var option = text?text:"暂无符合查询条件的数据"; 
        this.create(param,option);
    },
    hideTootip:function(id){    //@7隐藏
        $("#"+id).find(".datatip").remove();
    },
    
}

var dataTootip = new DataTootip();    //@8继承构造函数