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实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php实现的MySQL通用查询程序
2007/03/11 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
python 简单的多线程链接实现代码
2016/08/28 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
Python简易版停车管理系统
2019/08/12 Python
浅析Python面向对象编程
2020/07/10 Python
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
请假条格式范文
2014/04/10 职场文书
十八大演讲稿
2014/05/22 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
付款证明格式范文
2015/06/19 职场文书
担保书格式范文
2015/09/22 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记