jquery自定义显示消息数量


Posted in jQuery onDecember 19, 2017

本文实例为大家分享了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);

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

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

jQuery 相关文章推荐
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现评论模块
Aug 19 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
jquery中done和then的区别(详解)
Dec 19 #jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
jquery获取transform里的值实现方法
Dec 12 #jQuery
You might like
深入PHP与浏览器缓存的分析
2013/06/03 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
取得传值的函数
2006/10/27 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
Node.js编码规范
2014/07/14 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
导游词之吉林花园山
2019/10/17 职场文书
浅谈python中的多态
2021/06/15 Python
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android