Comment personnaliser le nombre de messages affichés dans jquery-js tutoriel-php.cn

Comment personnaliser le nombre de messages affichés dans jquery

亚连

Libérer： 2018-06-19 17:21:50

original

1686 Les gens l'ont consulté

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);

Copier après la connexion

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