<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        jquery自定義顯示消息數量

        來源:懂視網 責編:小OO 時間:2020-11-27 22:23:16
        文檔

        jquery自定義顯示消息數量

        本文實例為大家分享了jquery自定義顯示消息數量展示的具體代碼,供大家參考,具體內容如下:根據需求簡單的實現一個小功能控件,暫時不支持擴展。= value && value>;99) {$(this.$element).next().text("...");}},//綁定事件,可以接受事件對應外部方法bindEvent: function () {var that = this;if (。start) {infor.onResize(this.isOffset);}infor.changeStyle();infor.valueOverflow();infor.bindEvent();});}})(jQuery.window.document)
        推薦度:
        導讀本文實例為大家分享了jquery自定義顯示消息數量展示的具體代碼,供大家參考,具體內容如下:根據需求簡單的實現一個小功能控件,暫時不支持擴展。= value && value>;99) {$(this.$element).next().text("...");}},//綁定事件,可以接受事件對應外部方法bindEvent: function () {var that = this;if (。start) {infor.onResize(this.isOffset);}infor.changeStyle();infor.valueOverflow();infor.bindEvent();});}})(jQuery.window.document)

        本文實例為大家分享了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

        文檔

        jquery自定義顯示消息數量

        本文實例為大家分享了jquery自定義顯示消息數量展示的具體代碼,供大家參考,具體內容如下:根據需求簡單的實現一個小功能控件,暫時不支持擴展。= value && value>;99) {$(this.$element).next().text("...");}},//綁定事件,可以接受事件對應外部方法bindEvent: function () {var that = this;if (。start) {infor.onResize(this.isOffset);}infor.changeStyle();infor.valueOverflow();infor.bindEvent();});}})(jQuery.window.document)
        推薦度:
        標簽: 設置 顯示 自定義
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲国产精品国自产拍AV| 亚洲午夜AV无码专区在线播放| 国产亚洲精品国看不卡| 国产精品亚洲а∨无码播放麻豆| 成人a免费α片在线视频网站| 亚洲免费综合色在线视频| 日本免费人成黄页在线观看视频| 亚洲国产一区二区三区在线观看| 永久免费视频v片www| 亚洲AV无码男人的天堂| 亚洲国产精品日韩| 少妇亚洲免费精品| 亚洲av伊人久久综合密臀性色 | 香蕉免费一区二区三区| 精品亚洲成AV人在线观看| 国产成人精品免费视频动漫 | 自怕偷自怕亚洲精品| 无遮免费网站在线入口| 亚洲AV永久无码精品网站在线观看| 日日AV拍夜夜添久久免费| 一级人做人a爰免费视频| 日韩亚洲人成在线综合日本| 久久不见久久见免费视频7| 亚洲一区无码中文字幕乱码| 国产一级一片免费播放i| 中文字幕av免费专区| 亚洲小说图片视频| 国产精品视_精品国产免费 | a视频在线观看免费| 亚洲视频在线免费播放| 精品国产免费观看久久久| 一级成人a做片免费| 亚洲系列国产精品制服丝袜第| 嫩草影院在线免费观看| 免费无码又爽又刺激网站直播| 亚洲中文字幕久在线| 亚洲国产成人五月综合网| 精品熟女少妇av免费久久| 美女黄网站人色视频免费| 亚洲综合在线观看视频| 国产极品粉嫩泬免费观看|