jquery自定义显示消息数量
本文实例为大家分享了jquery自定义显示消息数量展示的具体代码，供大家参考，具体内容如下
根据需求简单的实现一个小功能控件，暂时不支持扩展。
$（"xxxxxxx"）.iconCountPlugin（options,start,isOffset){
//三个参数，自定义样式，是否禁止图标位置随浏览器窗口变化而变化，是否禁用偏移量
这个是调用，后面俩参数可以根据需求自行进行调整，以兼容不同的浏览器，可能因为浏览器之间的差异导致出一些意想不到的错误.
复制代码
;
(function($,window,document,undefined){
varinforCountShow=function(target,option,isOffset){
this.$element=target;
varstr="";
varoffsetleft=$(this.$element).offset().left;
varoffsetTop=$(this.$element).offset().top;
vartargetWidth=$(this.$element).width();
vartargetHeight=$(this.$element).height();
varleft="",
top="";
if(!isOffset){
left=offsetleft+targetWidth-18;
top=offsetTop-5;
}else{
left=targetWidth+13;
top=targetHeight-3;
}
$(this.$element).after(str);
this.defaults={
'display':'inline-block',
'width':'18px',
'height':'18px',
'position':'absolute',
'backgroundColor':'#f43530',
'color':'#fff',
'borderRadius':'15px',
'textAlign':'center',
'fontSize':'12px',
"left":left,
"top":top,
"cursor":'auto',
'margin':'auto'
};
this.options=$.extend({},this.defaults,option);
this.createdDom=$(str);
}
inforCountShow.prototype={
//手动设置
changeStyle:function(){
return$(this.$element).next().css({
'display':this.options.display,
'width':this.options.width,
'height':this.options.height,
'position':this.options.position,
'backgroundColor':this.options.backgroundColor,
'color':this.options.color,
'borderRadius':this.options.borderRadius,
'zIndex':this.options.zIndex,
'textAlign':this.options.textAlign,
'fontSize':this.options.fontSize,
"left":this.options.left,
"top":this.options.top,
'lineHeight':this.options.lineHeight,
"cursor":this.options.cursor,
"margin":this.options.margin
});
},
//浏览器窗口大小改变自适应，默认生效
onResize:function(target,isOffset){
$(window).resize(function(){
varnewOffsetleft=$(target).offset().left;
varnewOffsetTop=$(target).offset().top;
varnewTargetWidth=$(target).width();
varnewTargetHeight=$(target).height();
varnewleft="",newTop="";
if(!isOffset){
newleft=newOffsetleft+newTargetWidth-18;
newTop=newOffsetTop-5;
}else{
newleft=newTargetWidth+13;
newTop=newTargetHeight-3;
}
$(target).next().css({
"left":newleft,
"top":newTop
});
});
},
//数值溢出，当消息数量超过99时显示"..."
valueOverflow:function(){
varvalue=$(this.$element).next().text();
if(null!=value&&value>99){
$(this.$element).next().text("...");
}
},
//绑定事件，可以接受事件对应外部方法
bindEvent:function(){
varthat=this;
if(!that.createdDom)return;
this.createdDom.off('click').on('click',function(){
if(that.options.click){
//that.options.click();
}else{
}
});
}
}
//调用
$.fn.iconCountPlugin=function(options,start,isOffset){
//三个参数，自定义样式，是否禁止图标位置随浏览器窗口变化而变化，是否禁用偏移量
return$(this).each(function(){
varinfor=newinforCountShow(this,options,isOffset);
if(!start){
infor.onResize(this,isOffset);
}
infor.changeStyle();
infor.valueOverflow();
infor.bindEvent();
});
}
})(jQuery,window,document);
此插件是笔者当时刚学习封装控件时的初次尝试，希望大佬们勿喷，有时间会把他进行优化，欢迎各位大神一起讨论.您的点赞是我最好的动力。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。