jquery自定义显示消息数量
本文实例为大家分享了jquery自定义显示消息数量展示的具体代码,供大家参考,具体内容如下
根据需求简单的实现一个小功能控件,暂时不支持扩展。
$("xxxxxxx").iconCountPlugin(options,start,isOffset){ //三个参数,自定义样式,是否禁止图标位置随浏览器窗口变化而变化,是否禁用偏移量 这个是调用,后面俩参数可以根据需求自行进行调整,以兼容不同的浏览器,可能因为浏览器之间的差异导致出一些意想不到的错误. 复制代码 ; (function($,window,document,undefined){ varinforCountShow=function(target,option,isOffset){ this.$element=target; varstr=""; varoffsetleft=$(this.$element).offset().left; varoffsetTop=$(this.$element).offset().top; vartargetWidth=$(this.$element).width(); vartargetHeight=$(this.$element).height(); varleft="", 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(){ varnewOffsetleft=$(target).offset().left; varnewOffsetTop=$(target).offset().top; varnewTargetWidth=$(target).width(); varnewTargetHeight=$(target).height(); varnewleft="",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(){ varvalue=$(this.$element).next().text(); if(null!=value&&value>99){ $(this.$element).next().text("..."); } }, //绑定事件,可以接受事件对应外部方法 bindEvent:function(){ varthat=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(){ varinfor=newinforCountShow(this,options,isOffset); if(!start){ infor.onResize(this,isOffset); } infor.changeStyle(); infor.valueOverflow(); infor.bindEvent(); }); } })(jQuery,window,document);
此插件是笔者当时刚学习封装控件时的初次尝试,希望大佬们勿喷,有时间会把他进行优化,欢迎各位大神一起讨论.您的点赞是我最好的动力。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。