(function( $ ){ var methods = { init : function( options ){ var $this = this; options = $.extend( $.fn.markinput.options, options ); return this.each(function(){ var $thisMarkInput = $(this); var markData = options.markData; if(markData == null){ markData = []; } $thisMarkInput .data("markData",markData); var adjustLeftComponent = options.adjustLeftComponent; if(adjustLeftComponent != null){ $thisMarkInput .data("adjustLeftComponent",adjustLeftComponent); } var $appendVar = $('
\ \ '); $thisMarkInput.append($appendVar); for(var i = 0; i < markData.length; i++){ $element = $(""); $element.text(markData[i]); $element.addClass("drMarkSpanContainer"); $element.insertBefore($("#drMarkInputContentContainer")); } if(markData.length > 0){ $("#drMarkInputContent")[0].setAttribute("data-placeholder",""); }else{ $("#drMarkInputContent")[0].setAttribute("data-placeholder","添加至多 3 个标签(输入标签后按回车确定)"); } function isMarkInputErrorShown(){ return $("#drMarkInputContent").data('bs.popover').tip().hasClass('in'); } function isMarkSearchResShown(){ return $("#drMarkInputContentContainer").data('bs.popover').tip().hasClass('in'); } function deleteOneMark($element){ var markData = $thisMarkInput.data("markData"); if(markData.length <= 0){ return; } if($element == null){ //删除最后一个 $(".drMarkSpanContainer")[markData.length - 1].remove(); markData.splice(markData.length-1,1); if(markData.length > 0){ $("#drMarkInputContent")[0].setAttribute("data-placeholder",""); }else{ $("#drMarkInputContent")[0].setAttribute("data-placeholder","添加至多 3 个标签(输入标签后按回车确定)"); } }else{ var tagName = $element.text(); for(var i = 0; i < markData.length; i++){ if(markData[i] == tagName){ markData.splice(i,1); break; } } if(markData.length > 0){ $("#drMarkInputContent")[0].setAttribute("data-placeholder",""); }else{ $("#drMarkInputContent")[0].setAttribute("data-placeholder","添加至多 3 个标签(输入标签后按回车确定)"); } $element.remove(); } } function addOneMark(markName){ var markData = $thisMarkInput.data("markData"); if(markName == ""){ return; }else if(markName.length > 30){ //提示长度 $("#drMarkInputErrorPopoverContent").text("标签最大字数为 30 个"); if(isMarkInputErrorShown()){ }else{ $("#drMarkInputContent").popover("show"); } return; } for(var i = 0; i < markData.length; i++){ if(markName == markData[i]){ //提示重复 $("#drMarkInputErrorPopoverContent").text("已经添加了该标签"); if(isMarkInputErrorShown()){ }else{ $("#drMarkInputContent").popover("show"); } return; } } markData.push(markName); if(markData.length > 0){ $("#drMarkInputContent")[0].setAttribute("data-placeholder",""); }else{ $("#drMarkInputContent")[0].setAttribute("data-placeholder","添加至多 3 个标签(输入标签后按回车确定)"); } $element = $(""); $element.text(markName); $element.addClass("drMarkSpanContainer"); $element.insertBefore($("#drMarkInputContentContainer")); $("#drMarkInputContent").text(""); if(isMarkSearchResShown()){ $("#drMarkInputContentContainer").popover("hide"); } } function searchMarkKeyword(keyword){ if(keyword == null || keyword == ""){ if(isMarkSearchResShown()){ $("#drMarkInputContentContainer").popover("hide"); } return; } keyword = encodeURIComponent(keyword); var jRequest = $.ajax({ type : "GET", contentType : "application/x-www-form-urlencoded", url : "/marks/searchforchoose?q="+keyword, beforeSend:function(){ $('#loadingBar').drloadingbar("startLoad"); var currentReq = $("#drMarkInputContentContainer").data("jRequest"); if(currentReq != null){ currentReq.abort(); } }, success : function(data){ $('#loadingBar').drloadingbar("stopLoad"); var dataLength = data.length; if(dataLength > 0){ if(isMarkSearchResShown()){ $("#drMarkInputContentContainer").popover("hide"); } $("#drMarkInputPopoverSearch").empty(); for(var i = 0; i < dataLength; i++){ $element = $("
  • "+data[i].name+"("+data[i].useCount+")
  • "); $element.appendTo($("#drMarkInputPopoverSearch")); } $("#drMarkInputContentContainer").popover("show"); }else{ if(isMarkSearchResShown()){ $("#drMarkInputContentContainer").popover("hide"); } } }, error : function(data){ if(data.statusText=="abort"){ return; } $('#loadingBar').drloadingbar("stopLoad"); }}); $("#drMarkInputContentContainer").data("jRequest",jRequest); } $("#drMarkInputContent").on("paste",function(e){ var markData = $thisMarkInput.data("markData"); if(markData.length >= 3){ //提示只能输入3个标签 $("#drMarkInputErrorPopoverContent").text("只能添加 3 个标签"); if(isMarkInputErrorShown()){ }else{ $("#drMarkInputContent").popover("show"); } e.preventDefault(); return } if(isMarkInputErrorShown()){ $("#drMarkInputContent").popover("hide"); } var pasteText = e.originalEvent.clipboardData.getData("text/plain"); pasteText = pasteText.replace(/\r\n/g,""); pasteText = pasteText.replace(/\r/g,""); pasteText = pasteText.replace(/\n/g,""); document.execCommand("insertHTML", false, pasteText); e.preventDefault(); searchMarkKeyword($(this).text()); }); $("#drMarkInputContent").on("blur",function(e){ if(isMarkInputErrorShown()){ $("#drMarkInputContent").popover("hide"); } if(isMarkSearchResShown()){ setTimeout(function(){ //延迟200毫秒触发,否则若点击在content cell内部则立马被hide掉,无法触发 $("#drMarkInputContentContainer").popover("hide"); },200); } }); $("#drMarkInputContent").on("keydown",function(e){ var markData = $thisMarkInput.data("markData"); var keyCode = e.keyCode; if(keyCode == 8 || keyCode == 46){ if(isMarkInputErrorShown()){ $("#drMarkInputContent").popover("hide"); } if($(this).text() == "" && markData.length > 0){ deleteOneMark(); e.preventDefault(); return; } } if(markData.length >= 3){ $(this).text(""); //提示只能输入3个标签 $("#drMarkInputErrorPopoverContent").text("只能添加 3 个标签"); if(isMarkInputErrorShown()){ }else{ $("#drMarkInputContent").popover("show"); } e.preventDefault(); return; } if(isMarkInputErrorShown()){ $("#drMarkInputContent").popover("hide"); } if(keyCode == 13 || keyCode == 108){ e.preventDefault(); if(isMarkInputErrorShown()){ $("#drMarkInputContent").popover("hide"); } //处理标签 var content = ""; if(isMarkSearchResShown() && $(".drMarkInputPopoverSearchList.isActive").length > 0){ content = $(".drMarkInputPopoverSearchList.isActive span strong").text(); $("#drMarkInputContentContainer").popover("hide"); }else{ content = $(this).text(); } var checkContent = $.trim(content); if(checkContent != ""){ addOneMark(content); } return; }else if(keyCode==40){ //下 if(isMarkSearchResShown()){ if($(".drMarkInputPopoverSearchList.isActive").length > 0){ if($(".drMarkInputPopoverSearchList.isActive")[0].nextSibling == null){ //指向第一个 $(".drMarkInputPopoverSearchList.isActive").removeClass("isActive"); $(".drMarkInputPopoverSearchList").first().addClass("isActive"); }else{ //指向下一个 var nextNode = $($(".drMarkInputPopoverSearchList.isActive")[0].nextSibling); $(".drMarkInputPopoverSearchList.isActive").removeClass("isActive"); nextNode.addClass("isActive"); } }else{ //指向第一个 $(".drMarkInputPopoverSearchList").first().addClass("isActive"); } e.preventDefault(); } }else if(keyCode==38){ //上 if(isMarkSearchResShown()){ if($(".drMarkInputPopoverSearchList.isActive").length > 0){ if($(".drMarkInputPopoverSearchList.isActive")[0].previousSibling == null){ //指向最后一个 $(".drMarkInputPopoverSearchList.isActive").removeClass("isActive"); $(".drMarkInputPopoverSearchList").last().addClass("isActive"); }else{ //指向上一个 var previousNode = $($(".drMarkInputPopoverSearchList.isActive")[0].previousSibling); $(".drMarkInputPopoverSearchList.isActive").removeClass("isActive"); previousNode.addClass("isActive"); } }else{ //指向最后一个 $(".drMarkInputPopoverSearchList").last().addClass("isActive"); } e.preventDefault(); } }else{ var $this = $(this); setTimeout(function(){ searchMarkKeyword($this.text()); }, 100); } }); $("#drMarkInputContent").popover({ trigger:"manual", html : true, animation:false, placement:"top", content: function(){ return $('#drMarkInputErrorPopoverContainer').html(); } }); $("#drMarkInputContent").on('hide.bs.popover', function(e){ if(e.target != $("#drMarkInputContent")[0]){ return; } $('#drMarkInputErrorPopoverContainer').append($('#drMarkInputErrorPopover')); }); $("#drMarkInputContent").on('shown.bs.popover', function(e){ if(e.target != $("#drMarkInputContent")[0]){ return; } $('#drMarkInputErrorPopoverContainer #drMarkInputErrorPopover').remove(); }); $("#drMarkInputContentContainer").popover({ trigger:"manual", html : true, animation:false, placement:"bottom", content: function(){ return $('#drMarkInputPopoverSearchContainer').html(); } }); $("#drMarkInputContentContainer").on('hide.bs.popover',function(e){ if(e.target != $("#drMarkInputContentContainer")[0]){ return; } $('#drMarkInputPopoverSearchContainer').append($('#drMarkInputPopoverSearch')); }); $("#drMarkInputContentContainer").on('shown.bs.popover',function(e){ if(e.target != $("#drMarkInputContentContainer")[0]){ return; } var topVal = parseInt($('#drMarkInputContentContainer+.popover').css('top').substr(0,$('#drMarkInputContentContainer+.popover').css('top').length - 2)); $('#drMarkInputContentContainer+.popover').css('top',(topVal - 15 ) + 'px'); //重新计算left var left = 0; var adjustLeftComponent = $thisMarkInput.data("adjustLeftComponent"); if(adjustLeftComponent == null){ left = $("#drMarkInputContentContainer").offset().left; }else{ var left1 = $("#drMarkInputContentContainer").offset().left; var left2 = adjustLeftComponent.offset().left; left = left1 - left2; } //var left = $("#markInputContentContainer+.popover").css('left'); var inText = $("#drMarkInputContent").text(); $('#drMarkInputContentContainer+.popover').css('left', (left - 20) + 'px'); $('#drMarkInputContentContainer+.popover .arrow').css('left', (20 + 14 * inText.length / 2 ) + 'px'); $('#drMarkInputPopoverSearchContainer #drMarkInputPopoverSearch').remove(); $("#drMarkInputPopoverSearch").off("mouseenter"); $("#drMarkInputPopoverSearch").off("mouseleave"); $("#drMarkInputPopoverSearch").off("click"); $("#drMarkInputPopoverSearch").on("mouseenter",".drMarkInputPopoverSearchList",function(){ if(!$(this).hasClass("isActive")){ $(".drMarkInputPopoverSearchList.isActive").each(function(){ $(this).removeClass("isActive"); }); $(this).addClass("isActive"); } }); $("#drMarkInputPopoverSearch").on("mouseleave",".drMarkInputPopoverSearchList",function(){ $(this).removeClass("isActive"); }); $("#drMarkInputPopoverSearch").on("click",".drMarkInputPopoverSearchList.isActive",function(){ //选中输入 var content = $(this).find("span strong").text(); addOneMark(content); $("#drMarkInputContent").focus(); }); }); $thisMarkInput.on("click",".drMarkSpanContainer",function(e){ deleteOneMark($(this)); }); }); }, getMarkArray:function(){ return this.data("markData"); } }; $.fn.markinput = function( method ) { // Method calling logic if ( methods[method] ) { return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'Method ' + method + ' does not exist on jQuery.markinput' ); } }; $.fn.markinput.options = {}; })( jQuery );