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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jquery简易手风琴插件的封装
Oct 13 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使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python http基本验证方法
2018/12/26 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
英语演讲稿范文
2014/01/03 职场文书
新三好学生主要事迹
2014/01/23 职场文书
小学生打架检讨书
2014/01/26 职场文书
西式结婚主持词
2014/03/14 职场文书
大学生村官演讲稿
2014/04/25 职场文书
幼儿评语大全
2014/04/30 职场文书
网站创业计划书
2014/04/30 职场文书
教师岗位职责范本
2015/04/02 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
刑事法律意见书
2015/06/04 职场文书
贫困证明怎么写
2015/06/16 职场文书
无故旷工检讨书
2015/08/15 职场文书