jquery에서 표시되는 메시지 수를 사용자 정의하는 방법

이 글에서는 주로 jquery를 기반으로 한 사용자 정의 표시 메시지 수를 자세히 소개합니다. 특정 참고 값이 있으므로 관심 있는 친구가 참고할 수 있습니다.

이 기사의 예는 사용자 정의 표시 메시지 수의 구체적인 표시를 공유합니다. 코드는 참고용입니다. 구체적인 내용은 다음과 같습니다

요구에 따른 간단한 기능 구현은 현재 지원되지 않습니다.

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

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

jQuery를 사용하여 동적으로 추가된 요소가 바인딩 이벤트를 트리거할 수 없는 문제를 해결하는 방법

Node를 사용하여 파일을 구성하는 방법(상세 튜토리얼)

jQuery를 사용하여 일반 모바일을 구현하는 방법 전화번호 인증 입력

AngularJS에서 점프 기능 구현하기

AngularJS에서 드래그 앤 드롭 기능 구현하기

socket.io 사용하기 채팅방 구현하기

방법 JS에서 인증 코드 카운트다운을 구현하세요

js 사용 재할당 구현 방법

위 내용은 jquery에서 표시되는 메시지 수를 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!