这次给大家带来如何自定义显示消息数量，自定义显示消息数量的注意事项有哪些，下面就是实战案例，一起来看一下。
根据需求简单的实现一个小功能控件，暂时不支持扩展。
$（"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);
登录后复制
此插件是笔者当时刚学习封装控件时的初次尝试，希望大佬们勿喷，有时间会把他进行优化，欢迎各位大神一起讨论.您的点赞是我最好的动力。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
两个zTree怎样互相联动
jackson解析json串时大小写自动转换的方法
以上就是如何自定义显示消息数量的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2782463.html
