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 10 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 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
基于mysql的论坛(4)
2006/10/09 PHP
第十三节--对象串行化
2006/11/16 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
项目实践之javascript技巧
2007/12/06 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
python操作CouchDB的方法
2014/10/08 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
pybind11在Windows下的使用教程
2019/07/04 Python
python处理大日志文件
2019/07/23 Python
Python的pygame安装教程详解
2020/02/10 Python
python求解汉诺塔游戏
2020/07/09 Python
python PIL模块的基本使用
2020/09/29 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
应届护士求职信范文
2014/01/26 职场文书
安全生产月演讲稿
2014/05/09 职场文书
化学工程专业求职信
2014/08/10 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
单位接收证明格式
2015/06/18 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python