Comment personnaliser le nombre de messages affichés dans jquery

Cet article présente principalement en détail le nombre de messages d'affichage personnalisés basés sur jquery, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage avec vous la personnalisation de jquery. Le code spécifique pour afficher le nombre de messages est pour votre référence. Le contenu spécifique est le suivant

Un petit contrôle fonctionnel est simplement implémenté en fonction des besoins. L'extension n'est pas supportée pour le moment.

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser jQuery pour résoudre le problème selon lequel les éléments ajoutés dynamiquement ne peuvent pas déclencher d'événements de liaison

Comment configurer les fichiers en utilisant Node (tutoriel détaillé)

Comment utiliser jQuery pour implémenter la vérification régulière de la saisie du numéro de téléphone mobile

Comment implémenter la fonction de saut dans AngularJS

Comment implémenter la fonction glisser-déposer dans AngularJS

Comment implémenter une salle de discussion à l'aide de socket.io

Comment implémenter la vérification dans le compte à rebours du code JS

Comment implémenter la réaffectation à l'aide de js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!