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

$("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);

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

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

最新文章

  1. JVM-内存管理
  2. Scalaz(9)- typeclass:checking instance abiding the laws
  3. JavaScript:引用js文件时的编码格式问题
  4. WPF中log4net的用法
  5. 数据结构之顺序栈SqStack
  6. 怎样成为PHP 方向的一个合格的架构师(转)
  7. 哎呀,我老大写Bug啦——记一次MessageQueue的优化
  8. 【PS技巧】如何校正倾斜的图片
  9. 《CSAPP》地址翻译
  10. tomcat/eclipse提速[z]
  11. Mysql 创建表时错误:Tablespace for table `tablexx` exists. Please DISCARD the tablespace before IMPORT.
  12. JS 动态修改json字符串
  13. mapreduce二次排序详解
  14. 通过@Value注解读取.properties配置内容
  15. 【转】VS2008快速将代码中字符串改为_T(“”)风格的方法
  16. kolla 安装
  17. 什么是O/RMapping?为什么要用O/R Mapping?
  18. Node.js事件驱动模型
  19. VS2015 异常 :遇到异常。这可能是由某个扩展导致的
  20. 江西理工大学南昌校区排名赛 D: 单身狗的物理游戏

热门文章

  1. Swift里计数相关的小细节
  2. Codeforces - 466C - Number of Ways - 组合数学
  3. qq教xixi写模拟加法【非常爆炸】
  4. HDOJ4857【拓扑排序】
  5. Codeforces Round #408 (Div. 2) C
  6. 题解报告:poj 1738 An old Stone Game(区间dp)
  7. J2sdk中的主要的包介绍
  8. 167 Two Sum II - Input array is sorted 两数之和 II - 输入有序数组
  9. qconbeijing2015
  10. 通俗易懂的Nhibernate教程(2) ---- 配置之Nhibernate配置