How to customize the number of displayed messages in jquery

This article mainly introduces the number of custom display messages based on jquery in detail. It has certain reference value. Interested friends can refer to it.

The example in this article shares jquery customization with everyone. The specific code for displaying the number of messages is for your reference. The specific content is as follows

A small functional control is simply implemented according to the needs. Extension is not supported for the time being.

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

//三个参数，自定义样式，是否禁止图标位置随浏览器窗口变化而变化，是否禁用偏移量
这个是调用，后面俩参数可以根据需求自行进行调整，以兼容不同的浏览器，可能因为浏览器之间的差异导致出一些意想不到的错误.
复制代码
;
(function ($, window, document, undefined) {
var inforCountShow = function (target, option, isOffset) {
this.$element = target;
var str = "<span class = &#39;infor-count&#39;></span>";
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 = {
&#39;display&#39;: &#39;inline-block&#39;,
&#39;width&#39;: &#39;18px&#39;,
&#39;height&#39;: &#39;18px&#39;,
&#39;position&#39;: &#39;absolute&#39;,
&#39;backgroundColor&#39;: &#39;#f43530&#39;,
&#39;color&#39;: &#39;#fff&#39;,
&#39;borderRadius&#39;: &#39;15px&#39;,
&#39;textAlign&#39;: &#39;center&#39;,
&#39;fontSize&#39;: &#39;12px&#39;,
"left": left,
"top": top,
"cursor": &#39;auto&#39;,
&#39;margin&#39;:&#39;auto&#39;
};
this.options = $.extend({}, this.defaults, option);
this.createdDom = $(str);
}
inforCountShow.prototype = {
//手动设置
changeStyle: function () {
return $(this.$element).next().css({
&#39;display&#39;: this.options.display,
&#39;width&#39;: this.options.width,
&#39;height&#39;: this.options.height,
&#39;position&#39;: this.options.position,
&#39;backgroundColor&#39;: this.options.backgroundColor,
&#39;color&#39;: this.options.color,
&#39;borderRadius&#39;: this.options.borderRadius,
&#39;zIndex&#39;: this.options.zIndex,
&#39;textAlign&#39;: this.options.textAlign,
&#39;fontSize&#39;: this.options.fontSize,
"left": this.options.left,
"top": this.options.top,
&#39;lineHeight&#39;: 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(&#39;click&#39;).on(&#39;click&#39;, 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);

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use jQuery to solve the problem that dynamically added elements cannot trigger binding events

How to configure files using Node (detailed tutorial )

How to use jQuery to implement regular verification of mobile phone number input

How to implement the jump function in AngularJS

How to implement drag and drop function in AngularJS

How to implement chat room using socket.io

How to implement verification in JS Code countdown

How to implement reassignment using js

The above is the detailed content of How to customize the number of displayed messages in jquery. For more information, please follow other related articles on the PHP Chinese website!