So passen Sie die Anzahl der angezeigten Nachrichten in JQuery an

In diesem Artikel wird hauptsächlich die Anzahl der benutzerdefinierten Anzeigenachrichten basierend auf JQuery im Detail vorgestellt, die einen gewissen Referenzwert haben.

Das Beispiel in diesem Artikel teilt Ihnen die Anpassung von JQuery mit. Der spezifische Code zum Anzeigen der Anzahl der Nachrichten ist wie folgt:

Eine kleine funktionale Steuerung wird lediglich entsprechend den Anforderungen implementiert.

$（"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);

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie jQuery, um das Problem zu lösen, dass dynamisch hinzugefügte Elemente keine Bindungsereignisse auslösen können

So konfigurieren Sie Dateien Verwenden von Node (ausführliches Tutorial)

So verwenden Sie jQuery, um die regelmäßige Überprüfung der Eingabe von Mobiltelefonnummern zu implementieren

So implementieren Sie die Sprungfunktion in AngularJS

So implementieren Sie die Drag-and-Drop-Funktion in AngularJS

So implementieren Sie einen Chatroom mit socket.io

So implementieren Sie die Überprüfung im JS-Code-Countdown

So implementieren Sie eine Neuzuweisung mit js

Das obige ist der detaillierte Inhalt vonSo passen Sie die Anzahl der angezeigten Nachrichten in JQuery an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!