jquery自定义显示消息数量

本文实例为大家分享了jquery自定义显示消息数量展示的具体代码，供大家参考，具体内容如下

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

rush:js;"> $（"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,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,document);

此插件是笔者当时刚学习封装控件时的初次尝试，希望大佬们勿喷，有时间会把他进行优化，欢迎各位大神一起讨论.您的点赞是我最好的动力。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/jquery/34622.html