jquery自定義顯示消息數(shù)量
更新時間:2017年12月19日 11:43:57 作者:弒曉風
這篇文章主要為大家詳細介紹了基于jquery自定義顯示消息數(shù)量,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery自定義顯示消息數(shù)量展示的具體代碼,供大家參考,具體內容如下
根據需求簡單的實現(xiàn)一個小功能控件,暫時不支持擴展。
$("xxxxxxx").iconCountPlugin(options, start, isOffset) {
//三個參數(shù),自定義樣式,是否禁止圖標位置隨瀏覽器窗口變化而變化,是否禁用偏移量
這個是調用,后面?zhèn)z參數(shù)可以根據需求自行進行調整,以兼容不同的瀏覽器,可能因為瀏覽器之間的差異導致出一些意想不到的錯誤.
復制代碼
;
(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
});
});
},
//數(shù)值溢出,當消息數(shù)量超過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) {
//三個參數(shù),自定義樣式,是否禁止圖標位置隨瀏覽器窗口變化而變化,是否禁用偏移量
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);
此插件是筆者當時剛學習封裝控件時的初次嘗試,希望大佬們勿噴,有時間會把他進行優(yōu)化,歡迎各位大神一起討論.您的點贊是我最好的動力。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
hover的用法及l(fā)ive的用法介紹(鼠標懸停效果)
hover屬性在書寫css時大家都不會陌生了吧live主要用于對動態(tài)加載出來的元素綁定事件,下來將為大家詳細介紹下兩者的使用,感興趣的朋友可不要錯過了哈2013-03-03
基于jQuery的動態(tài)增刪改查表格信息,可左鍵/右鍵提示(原創(chuàng)自Zjmainstay)
jQuery動態(tài)增刪改查表格信息,可左鍵/右鍵提示的實現(xiàn)代碼分享,需要的朋友可以參考下2012-07-07
解決qrcode.js生成二維碼時必須定義一個空div的問題
這篇文章主要介紹了解決qrcode.js生成二維碼時必須定義一個空div的問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
Jquery利用mouseenter和mouseleave實現(xiàn)鼠標經過彈出層且可以點擊
這篇文章主要介紹了Jquery利用mouseenter和mouseleave實現(xiàn)鼠標經過彈出層且可以點擊。需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02

