"暂无数据"小插件

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

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继承构造函数

猜你喜欢

转载自blog.csdn.net/sk161205/article/details/88794805
今日推荐