jquery如何实现自定义显示消息数量-创新互联

这篇文章主要介绍jquery如何实现自定义显示消息数量，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

具体内容如下

根据需求简单的实现一个小功能控件，暂时不支持扩展。

$（"xxxxxxx"）.iconCountPlugin（options, start, isOffset) {

//三个参数，自定义样式，是否禁止图标位置随浏览器窗口变化而变化，是否禁用偏移量
这个是调用，后面俩参数可以根据需求自行进行调整，以兼容不同的浏览器，可能因为浏览器之间的差异导致出一些意想不到的错误.
复制代码
;
(function ($, window, document, undefined) {
var inforCountShow = function (target, option, isOffset) {
this.$element = target;
var str = "";
var offsetleft = $(this.$element).offset().left;
var offsetTop = $(this.$element).offset().top;
var targetWidth = $(this.$element).width();
var targetHeight = $(this.$element).height();
var left = "",
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 () {
var newOffsetleft = $(target).offset().left;
var newOffsetTop = $(target).offset().top;
var newTargetWidth = $(target).width();
var newTargetHeight = $(target).height();
var newleft = "", 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() {
var value = $(this.$element).next().text();
if (null != value && value>99) {
$(this.$element).next().text("...");
}
},

//绑定事件，可以接受事件对应外部方法
bindEvent: function () {
var that = 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 () {
var infor = new inforCountShow(this, options, isOffset);
if (!start) {
infor.onResize(this, isOffset);
}
infor.changeStyle();
infor.valueOverflow();
infor.bindEvent();

});
}

})(jQuery, window, document);

以上是“jquery如何实现自定义显示消息数量”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。