本文實例為大家分享了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);
此插件是筆者當時剛學習封裝控件時的初次嘗試,希望大佬們勿噴,有時間會把他進行優化,歡迎各位大神一起討論.您的點贊是我最好的動力。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com