欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery自定义显示消息数量

程序员文章站 2022-09-26 16:20:57
本文实例为大家分享了jquery自定义显示消息数量展示的具体代码,供大家参考,具体内容如下 根据需求简单的实现一个小功能控件,暂时不支持扩展。 $("xxxxx...

本文实例为大家分享了jquery自定义显示消息数量展示的具体代码,供大家参考,具体内容如下

根据需求简单的实现一个小功能控件,暂时不支持扩展。

$("xxxxxxx").iconcountplugin(options, start, isoffset) {

//三个参数,自定义样式,是否禁止图标位置随浏览器窗口变化而变化,是否禁用偏移量
这个是调用,后面俩参数可以根据需求自行进行调整,以兼容不同的浏览器,可能因为浏览器之间的差异导致出一些意想不到的错误.
复制代码
;
(function ($, window, document, undefined) {
var inforcountshow = function (target, option, isoffset) {
this.$element = target;
var str = "<span class = 'infor-count'></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 = {
'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);


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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。