标签:
(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));
标签:
原文地址:http://www.cnblogs.com/byronvis/p/5220997.html