• <fieldset id="8imwq"><menu id="8imwq"></menu></fieldset>
  • <bdo id="8imwq"><input id="8imwq"></input></bdo>
    最新文章專題視頻專題問答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
    主站蜘蛛池模板: 国产成人精品在线观看| 国产精品手机在线观看你懂的| 国产高清在线精品二区一| 久久精品国产黑森林| 国产精品高清一区二区人妖| 亚洲综合精品网站| 精品国产91久久久久久久a | 精品一区二区三区高清免费观看 | 精品国产乱码久久久久久郑州公司| 国产精品自在线拍国产手机版| 国产精品欧美日韩| 日本aⅴ精品中文字幕| 欧美激情精品久久久久久久九九九| 9999国产精品欧美久久久久久| HEYZO无码综合国产精品227| 久久久国产乱子伦精品作者| 午夜精品一区二区三区在线视 | 久久久久亚洲精品天堂久久久久久| 精品999在线| 99re66热这里只有精品| 97精品人妻一区二区三区香蕉| 久久夜色精品国产噜噜亚洲AV| 青青久久精品国产免费看| 成人国产精品秘 果冻传媒在线| 国产精品高清视亚洲精品| 国产精品日韩AV在线播放| 人妻少妇精品视频二区| 亚洲国产精品无码久久久久久曰| 精品人妻少妇一区二区三区| 国产精品免费视频观看拍拍| 51精品资源视频在线播放| 久久91综合国产91久久精品| 2022国产精品不卡a| 国产精品亚洲аv无码播放| 欧美精品中文字幕亚洲专区| 亚洲动漫精品无码av天堂| 最新国产精品无码| 国产精品久久影院| 久久精品国产亚洲av麻豆小说 | 无码精品视频一区二区三区| 亚洲日韩国产精品第一页一区|