php js显示文字个数,如何自定义显示消息数量

这次给大家带来如何自定义显示消息数量，自定义显示消息数量的注意事项有哪些，下面就是实战案例，一起来看一下。

根据需求简单的实现一个小功能控件，暂时不支持扩展。$("xxxxxxx").iconCountPlugin(options, start, isOffset) {

//三个参数，自定义样式，是否禁止图标位置随浏览器窗口变化而变化，是否禁用偏移量

这个是调用，后面俩参数可以根据需求自行进行调整，以兼容不同的浏览器，可能因为浏览器之间的差异导致出一些意想不到的错误.

复制代码

;

(function ($, window, document, undefined) {

var inforCountShow = function (target, option, isOffset) {

this.$element = target;

var str = "";

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 = {

'display': 'inline-block',

'width': '18px',

'height': '18px',

'position': 'absolute',

'backgroundColor': '#f43530',

'color': '#fff',

'borderRadius': '15px',

'textAlign': 'center',

'fontSize': '12px',

"left": left,

"top": top,

"cursor": 'auto',

'margin':'auto'

};

this.options = $.extend({}, this.defaults, option);

this.createdDom = $(str);

}

inforCountShow.prototype = {

//手动设置

changeStyle: function () {

return $(this.$element).next().css({

'display': this.options.display,

'width': this.options.width,

'height': this.options.height,

'position': this.options.position,

'backgroundColor': this.options.backgroundColor,

'color': this.options.color,

'borderRadius': this.options.borderRadius,

'zIndex': this.options.zIndex,

'textAlign': this.options.textAlign,

'fontSize': this.options.fontSize,

"left": this.options.left,

"top": this.options.top,

'lineHeight': 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('click').on('click', 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);

此插件是笔者当时刚学习封装控件时的初次尝试，希望大佬们勿喷，有时间会把他进行优化，欢迎各位大神一起讨论.您的点赞是我最好的动力。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：