jquery插件开发示例

Posted 2020-06-17

(function(window, $, undefined) {
  $.fn.sidebar = function(options) {
    var defaults = {
      menuoverevent: ‘mouseover‘,
      menuleaveevent: ‘mouseleave‘,
      foldevent: ‘click‘,
      menuThumbnailSelector: ".menu-thumbnail",
      menumeta: [‘flow‘, ‘account‘, ‘common‘, ‘recent‘], //menudata中数据顺序必须和menudata顺序保持一致
      menudata: [{
        menu: ‘flow‘,
        title: ‘业务流程管理‘,
        content: [
          ‘货前管理‘,
          ‘货中管理‘,
          ‘货后管理‘,
          ‘其他‘
        ]
      }, {
        menu: ‘account‘,
        title: ‘核算‘,
        content: [
          ‘还款计算排定‘,
          ‘逾期呆滞利息计算‘,
          ‘财务核算‘
        ]
      }, {
        menu: ‘common‘,
        title: ‘常用‘,
        content: [
          ‘合同‘,
          ‘合作商‘,
          ‘风险分类‘,
          ‘交易流水‘,
          ‘账务流水‘,
          ‘抵制押贷款‘
        ]
      }, {
        menu: ‘recent‘,
        title: ‘最近访问‘,
        content: [
          ‘合同‘,
          ‘合作商‘,
          ‘财务核算‘
        ]
      }]
    };
    settings = $.extend({}, defaults, options);
    return this.each(function() {
      return new Sidebar(this, settings);
    });
  };

  function Sidebar(el, settings) {
    this.$el = $(el);
    this.settings = settings;
    this.$menulist = this.$el.find(‘.menu‘);
    this.$thumbnailBox = this.$el.find(settings.menuThumbnailSelector);

    this.init();
  }
  Sidebar.prototype = {
    init: function() {
      this.createView();
      this.attachEvents();
    },
    createView:function () {
      var index=this.settings.menumeta.indexOf(‘common‘);
      var data=this.settings.menudata[index];

      var $commonBox=this.$el.find(‘.common‘);
      var $title=$(‘<h3>‘+data.title+‘</h3>‘);
      var $lists=$(‘<ul>‘);
      $.each(data.content,function (index,val) {
        $lists.append($(‘<li><a href=""><i></i>‘ + val + ‘</a></li>‘));
      });

      $commonBox.append($title).append($lists);

    },
    attachEvents: function() {
      var _self = this;

      _self.$menulist.on(‘show‘, $.proxy(_self.showMenu,_self));
      _self.$menulist.on(‘hide‘, $.proxy(_self.hideMenu,_self));


      _self.$menulist.on(_self.settings.menuoverevent, function() {
        _self.$menulist.trigger(‘show‘,this);
      });
      _self.$menulist.on(_self.settings.menuleaveevent, function(e) {
        if (checkPointerInDiv(e, _self.$thumbnailBox[0])) {
          $(this).addClass(‘on‘);
          return;
        }
        _self.$menulist.trigger(‘hide‘,this);
      });
      _self.$thumbnailBox.on(_self.settings.menuleaveevent, function(e) {
        _self.$menulist.trigger(‘hide‘,this);
      });


    },
    createMenu: function(eventElem) {
      var menuIndex = this.settings.menumeta.indexOf($(eventElem).data(‘menu‘));
      var menuData = this.settings.menudata[menuIndex];

      var $box = $(‘<div class=‘ + menuData.menu + ‘></div‘);
      var $title = $(‘<h3>‘ + menuData.title + ‘</h3>‘);
      var $lists = $(‘<ul>‘);
      $.each(menuData.content, function(index, val) {
        $lists.append($(‘<li><i></i>‘ + val + ‘</li>‘));
      });
      if ($(eventElem).hasClass(‘menu-thumb‘)) {
        $box.append($title);
      }
      $box.append($lists);

      this.$thumbnailBox.html(‘‘);
      this.$thumbnailBox.append($box).css({
        left: this.$el.width(),
        top: $(eventElem).offset().top
      });
    },
    showMenu: function(e, eventElem) {
      this.createMenu(eventElem);
      this.$thumbnailBox.show();
    },
    hideMenu: function(e, eventElem) {
      this.$menulist.removeClass(‘on‘);
      this.$thumbnailBox.hide();
    }

  };

  function checkPointerInDiv(event, elem) {
    var _posX = event.clientX,
      _posY = event.clinetY;

    var elemX1 = elem.offsetLeft,
      elemY1 = elem.offsetTop;

    var elemX2 = elemX1 + elem.offsetWidth,
      elemY2 = elemY1 + elem.offsetHeight;

    if (_posX < elemX1 || _posX > elemX2 || _posY < elemY1 || _posY > elemY2) {
      return false;
    }
    return true;
  }



}(window, jQuery));