zoukankan      html  css  js  c++  java
  • 基于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);

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

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

  • 相关阅读:
    remove white space from read
    optimize the access speed of django website
    dowload image from requests
    run jupyter from command
    crawl wechat page
    python version 2.7 required which was not found in the registry windows 7
    health
    alternate rows shading using conditional formatting
    word
    【JAVA基础】static 关键字
  • 原文地址:https://www.cnblogs.com/liucldq/p/8064146.html
Copyright © 2011-2022 走看看