//禁止鼠标选中文字。点选的时候容易选中文字 document.onselectstart = function(event) { event = window.event || event; event.returnValue = false; } var Float_menu = (function() { var FloatObject = null; var Args = {}; var MenuManager = function(o) { Args._window = o._window; Args.mainDiv = o.mainDiv || '#main'; Args.menuDiv = o.menuDiv || '#float_menu'; Args.rightMenuDiv = o.rightMenuDiv || '#my_menu'; Args.smallDiv = o.smallDiv || '.cardList-div'; Args.checkboxDiv = o.checkboxDiv || '.xzzt'; Args.rightMenuHtml = $(Args.rightMenuDiv).html(); Args.mainHtml = $(Args.mainDiv).html(); Args.hasInit = false; //事件需要通过在部件内初始化的时候传递过来 Args.ctrlCancelFunction = o.ctrlCancelFunction; //ctrl取消事件 Args.ctrlFunction = o.ctrlFunction; //ctrl多选事件 Args.clickCancelFunction = o.clickCancelFunction; //左右键取消事件 Args.clickFunction = o.clickFunction; //左右键选中事件 Args.shiftCancelFunction = o.shiftCancelFunction; //shift取消选中事件 Args.shiftFunction = o.shiftFunction; //shift选中事件 Args.stackNumber = 0; //用于记录shift选中的个数 Args.indexArray = []; Args.lastClickDiv; //记录上次点击的下标 Args.currentClickIndex; //shift点击的下标 Args.endIndex = 0; //结束下标 Args.clickTarget = ""; $(Args.checkboxDiv).unbind("mousedown").bind("mousedown", function(e) { return false; }); //this.handleEvent(); Args._window.document.onkeydown = this.handleEvent; $(Args._window.document).find(Args.mainDiv).mouseup(function(e){ MenuManager.prototype.handleEvent(e); }); //Args._window.document.onclick = this.handleEvent; Args._window.document.ondblclick = this.handleDbclick; //给checkbox绑定事件 /*var checkboxList = Args._window.document.getElementsByClassName("xzzt"); for(var index in checkboxList){ checkboxList[index].onmousedown = this.checkboxHandle; }*/ }; MenuManager.prototype = { findSmallDiv: function(dom, i) { if (i > 5 || !dom.parentElement) { return; } else { if (dom.parentElement.className.indexOf(Args.smallDiv.substr(1)) > -1) { return dom.parentElement; } else { return MenuManager.prototype.findSmallDiv(dom.parentElement, i++); } } }, handleDbclick: function(evt) { console.log("dbclick"); var dom = MenuManager.prototype.findSmallDiv(evt.srcElement, 0); if (dom) { MenuManager.prototype.checked(dom); $("input[value=查看]").click(); } console.log(Args); }, handleEvent: function(evt) { Args.hasInit = true; evt = (evt) ? evt : this.window.event; if (Args.clickTarget == "checkbox") { Args.clickTarget = "smallDiv"; return false; } var items = $(Args.mainDiv).find(Args.smallDiv); if (evt.button == 0 && evt.ctrlKey) { //ctrl+左键 MenuManager.prototype.ctrlHandle(evt, items); } else if (evt.button == 0 && evt.shiftKey) { //shift+左键 MenuManager.prototype.shiftHandle(evt, items); } else { if ($(evt.target) && $(evt.target).hasClass("xzzt")) { //如果左键单击事件的触发对象是"checkbox" MenuManager.prototype.checkboxHandle(evt); } else { MenuManager.prototype.clickHandle(evt, items); } } }, checkboxHandle: function(evt) { //点击checkbox处理函数 Args.clickTarget = "checkbox"; evt = (evt) ? evt : this.window.event; evt.stopPropagation(); //阻止事件冒泡 var items = $(Args.mainDiv).find(Args.smallDiv); MenuManager.prototype.ctrlHandle(evt, items); return false; }, checked: function(dom) { var _this = this; Args.checkType && Args.checkType(); if ($(dom).children('div.xzzt').hasClass("icon-checked")) { //已被选定的情况下触发点击事件,则取消选择 $(dom).children('div.xzzt').removeClass("icon-checked"); _this.handleTargetClass(this, 'single', 'cancel'); Args.clickCancelFunction && Args.clickCancelFunction(); } else { Args.clickCancelFunction && Args.clickCancelFunction(); $(dom).siblings().children('div.xzzt').removeClass("icon-checked"); $(dom).children('div.xzzt').addClass("icon-checked"); _this.handleTargetClass(dom, 'single', "choice"); Args.clickFunction && Args.clickFunction(dom); } _this.handleMenu(dom); Args.lastClickDiv = dom; }, clickHandle: function(evt, items) { //click处理函数 var _this = this; for (var i = 0; i < items.length; i++) { items[i].onclick = function() { //左键 Args.indexArray.push($(Args.mainDiv).find(Args.smallDiv).index(this)); _this.checked(this); }; items[i].oncontextmenu = function() { //右键 Args.indexArray.push($(Args.mainDiv).find(Args.smallDiv).index(this)); _this.checked(this); }; } }, ctrlHandle: function(evt, items) { //ctrl处理函数 var _this = this; for (var i = 0; i < items.length; i++) { items[i].onclick = function() { Args.indexArray.push($(Args.mainDiv).find(Args.smallDiv).index(this)); Args.checkType && Args.checkType(); if ($(this).children('div.xzzt').hasClass("icon-checked")) { //已被选定的情况下触发点击事件,则取消选择 $(this).children('div.xzzt').removeClass("icon-checked"); _this.handleTargetClass(this, 'multiple', "cancel"); Args.ctrlCancelFunction && Args.ctrlCancelFunction(this); } else { Args.ctrlCancelFunction && Args.ctrlCancelFunction(this); //$(this).siblings().removeClass("icon-checked"); $(this).children('div.xzzt').addClass("icon-checked"); _this.handleTargetClass(this, 'multiple', "choice"); Args.ctrlFunction && Args.ctrlFunction(this); } _this.handleMenu(this); Args.lastClickDiv = this; }; } }, shiftHandle: function(evt, items) { //shift处理函数 var _this = this; for (var i = 0; i < items.length; i++) { items[i].onclick = function() { Args.indexArray.push($(Args.mainDiv).find(Args.smallDiv).index(this)); if (Args.indexArray.length > 1) { console.log("shiftHandle"); //调用多选的清空 _this.clearFunction(); var iMin = Math.min(Args.indexArray[Args.indexArray.length - 2], Args.indexArray[Args.indexArray.length - 1]); var iMax = Math.max(Args.indexArray[Args.indexArray.length - 2], Args.indexArray[Args.indexArray.length - 1]); for (var i = iMin; i <= iMax; i++) { $($(Args.mainDiv).find(Args.smallDiv).children('div.xzzt')[i]).addClass("icon-checked"); _this.handleTargetClass($(Args.mainDiv).find(Args.smallDiv)[i], 'multiple', 'choice'); } Args.shiftFunction && Args.shiftFunction(); if (Args.indexArray[Args.indexArray.length - 2] > Args.indexArray[Args.indexArray.length - 1]) { _this.handleMenu($(Args.mainDiv).find(Args.smallDiv)[iMin]); } else { _this.handleMenu($(Args.mainDiv).find(Args.smallDiv)[iMax]); } } }; } }, handleTargetClass: function(obj, type, operation, isShiftKey) { //处理div的class var _this = this; if (type == 'single') { //单选操作对应的处理 if (operation == 'cancel') { //管理二数据块div对应的class :cardList-div/iconList-div $('div.xzzt').attr("class", "xzzt icon-unchecked"); $($(obj).children('div.xzzt').get(0)).attr("class", "xzzt icon-unchecked"); } else { $('div.xzzt').attr("class", "xzzt icon-unchecked"); $($(obj).children('div.xzzt').get(0)).attr("class", "xzzt icon-checked"); } } else { //多选操作处理class if (operation == 'cancel') { $($(obj).children('div.xzzt').get(0)).attr("class", "xzzt icon-unchecked"); } else { $($(obj).children('div.xzzt').get(0)).attr("class", "xzzt icon-checked"); } } }, handleMenu: function(obj) { var allCardListDiv = $(".cardList-div"); var falg=-1; var rowCount=0; var allCardListDivLength=allCardListDiv.length; for(var i = 0; i < allCardListDivLength; i++){ var itemTop=$(allCardListDiv[i]).offset().top; if(falg>-1&&itemTop>falg){ break; } rowCount=rowCount+1; falg=itemTop; } //最后一行添加标识 var remainder = allCardListDivLength % rowCount; for (var i = allCardListDivLength - remainder ; i < allCardListDivLength; i++) { $(allCardListDiv[i]).addClass("lastCardList"); } if ($(obj).children('div.xzzt').hasClass("icon-checked")) { var menu_width = $(Args.menuDiv).width(); var leftX = ($(obj).offset().left + $(obj).width() / 2) - $(Args.menuDiv).width() / 2 - 8; if (((menu_width > $(obj).width()) && $(obj).offset().left == 1) || (menu_width > ($(obj).width() + $(obj).offset().left))) { $(Args.menuDiv).css("left", 1).css("top", $(obj).offset().top + $(obj).height()).show(); } else { var leftX = ($(obj).offset().left + $(obj).width() / 2) - $(Args.menuDiv).width() / 2 - 8; if ($(obj).hasClass("lastCardList")) { console.log("kukuku") $(Args.menuDiv).css("left", leftX).css("top", $(obj).offset().top + $(obj).height() - 36).show(); } else { console.log("就我") $(Args.menuDiv).css("left", leftX).css("top", $(obj).offset().top + $(obj).height()).show(); } } } }, clearFunction: function() { var _this = this; for (var i = 0; i < $(Args.mainDiv).find(Args.smallDiv).length; i++) { _this.handleTargetClass($(Args.mainDiv).find(Args.smallDiv)[i], 'single', 'cancel'); } $(Args.rightMenuDiv).html(Args.rightMenuHtml); //还原右部分菜单 $(Args.menuDiv).hide(); } }; //返回对象的初始化接口、提供获取最后一个点击的dom对象接口 return { init: function(o) { FloatObject = new MenuManager(o); }, getLastCheckedDom: function() { if (FloatObject) { return Args.lastClickDiv; } } }; })(); //version2.0