"暂无数据"小插件
程序员文章站
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继承构造函数
上一篇: 自定义的无数据提示界面
下一篇: wpf ComboBox 绑定数据