划词弹出2级菜单

项目中用到的类似于分享到weibo的划词弹出菜单。大致思路是有一个隐藏层，内部放着隐藏菜单，当选中某个页面空间的文字时，即会弹出此菜单，点击则可以将文词切换至弹出窗口，然后进行编辑。

1.放所隐藏菜单层的代码

<style>
#menu_layer{display:none;}
#menu_layer { width: 100px; border: 1px solid #CCC; border-bottom:none;}
#menu_layer ul { list-style: none; margin: 0px; padding: 0px; }
#menu_layer ul li { background: #FFFFAA; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #eeee99; position:relative;}
#menu_layer ul li a{color:#930000;}
#menu_layer ul li ul {display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; background:#fff;}
#menu_layer ul li.current ul { display:block;background:#fff;}
#menu_layer ul li:hover ul { display:block;}
</style>

2.为文本框加上划词选择动作，和弹出菜单层

var menu_layer = document.getElementById("menu_layer");
//alert(menu_layer);

var com_special = document.getElementById("com_special");
var $testmenu_layer = function(eleShare, eleContainer) {
	var eleTitle = document.getElementsByTagName("title")[0];
	eleContainer = eleContainer || document;
	var funGetSelectTxt = function() {
		var txt = "";
		if(document.selection) {
			txt = document.selection.createRange().text;	// IE
		} else {
			txt = document.getSelection();
		}
		return txt.toString();
	};
	eleContainer.onmouseup = function(e) {
		e = e || window.event;
		var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
	//	alert(sh);
	//	alert(e.clientX);
		var left = (e.clientX - 500 < 0) ? e.clientX + 20 : e.clientX - 180, top = e.clientY + sh + 20;
	//	var left = e.clientX +20, top = e.clientY + sh + 20;;
	// 	alert(left+"_"+top);
		if (txt) {
		   menu_layer.style.position = "absolute";
		   menu_layer.style.left =left + "px";
			menu_layer.style.top = top + "px";
			menu_layer.style.display = "inline";
	//	    alert("11");
	//	    alert(menu_layer.style.left);
 		} else {
			menu_layer.style.display = "none";
		}
	};
}(menu_layer,com_special);

function GetSelectTxt(){
       var txt = "";
		if(document.selection) {
			txt = document.selection.createRange().text;	// IE
		} else {
			txt = document.getSelection();
		}
		return txt.toString();

}

3.将选中的文字传出打开新的窗口

function seletCharval(fCharCode,selComment,selVeriComment,oldVeriComment,imagineFlag)
{   
    var materialCode= document.getElementById("materialCode").value;
  alert(materialCode);
    var txt=GetSelectTxt();
    alert(txt);
	selComment = replaceAllSpecStr(selComment); 
	selVeriComment = replaceAllSpecStr(selVeriComment);  
	oldVeriComment = replaceAllSpecStr(oldVeriComment);
	var urlStr = '<%=request.getContextPath()%>/order/edit/selectedCodeNew.jsp?qType=eva&fCharCode='+fCharCode+'&selComment='+selComment;
    urlStr += '&selVeriComment='+selVeriComment;  
	urlStr += '&clerkFlag=F';
	urlStr += '&showTechDesc='+showTechDesc;
	urlStr += '&oldVeriComment=' +oldVeriComment;
	urlStr += '&txt=' +txt;
	urlStr += '&prodId=code_'+materialCode;
	 urlStr+='&imagineFlag='+imagineFlag;
	window.open(urlStr,'selCode','width=600,height=400,scrollbars=yes, status=yes,resizable=yes,top=400,left=400'); 
}




//document.οnmοusedοwn=gosite;

4.为隐藏层中的列表绑定样式//为dd标签绑定事件

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu_layer");
var allli = navRoot.getElementsByTagName("li")
for (i=0; i<allli.length; i++) {
node = allli[i];
node.οnmοuseοver=function() {
this.className+=" current";
}
node.οnmοuseοut=function() {
this.className=this.className.replace(" current", "");
}
}
}
}
window.οnlοad=startList;

5.动态设置隐藏菜单的内容

//设置右键维护菜单中的内容  --duansy
//function showItemList_duansy(curSelectStr)
function showItemList_duansy(curSelectStr){
	//	 alert("nn");
	//	 alert(grpList.length);
		var obj = oc_const.refreshAllConfig(curSelectStr+getThreeAreaSeclectCode(),getInnerHtml('charAndValBlock'),userTypeJs,'','selectItemReturn');
		//var obj = oc_const.refreshAllConfigNew(curSelectStr+getThreeAreaSeclectCode(),convertString,userTypeJs,'');

  
		 
		obj1 = obj;
		 afterMsg = '';  
		 var tmpInnerStr =new Array();
	//	 	 alert('hah');
		  tmpInnerStr.push('<ul>');
	    for(var grpCt = 0; grpCt < grpList.length; grpCt++)
		 { 
		 	var groupObj = grpList[grpCt]; 
		   tmpInnerStr.push('<li>');
		//   alert('22');
		   tmpInnerStr.push('<a href=\'http://www.zzjs.net\'>'+groupObj.grpName+'</a>');
		   tmpInnerStr.push('<ul>');
		   for(var i = 0; i < obj.length; i++){
		       var charListGrpId = obj[i].chargrp_id;
				var charId = obj[i].char_id; 
				var charCode = obj[i].char_code;
				 var charImagineFlag = obj[i].char_imagineFlag;
		//	    alert(charImagineFlag);
				var showWayCode = obj[i].show_way_code;
			    var charClassCode = obj[i].char_class_code; 
                var benecessaryJs = obj[i].benecessary;
                var commonFlagJs = obj[i].common_flag;
                //遍历属性下面的属性值
                	for(var k = 0; k < obj[i].values.length; k++)
						{
							 var charvalId = obj[i].values[k].charval_id; 
							 var picId = obj[i].values[k].pic_id;
							
						     if(obj[i].values[k].charval_code == undefined || obj[i].values[k].selectedFlag!='T')
							 {
							     continue;
							 } 

							 var tmpVeriCmt = getItemVerification(charCode,obj[i].values[k].charval_code,itemCommentObjList);
							 var tmpCmt = getItemComment(charCode,obj[i].values[k].charval_code,itemCommentObjList);  
							 var standFlagJs = obj[i].values[k].standFlag;//是否标配
                             var oldVeriCmt ="";
                             if(charCode=="CFT"){
                                oldVeriCmt = getItemVerification(charCode,obj[i].values[k].charval_code,itemCommentObjList);;
                             }
                             }
                
            
                if(charListGrpId == groupObj.grpId ){
                 tmpInnerStr.push('<li><a href=\'#dsy\' title=\''+obj[i].char_name+'\' onClick="seletCharval(\''+charCode+'\',\''+tmpCmt+'\',\''+tmpVeriCmt+'\',\''+oldVeriCmt+'\',\''+charImagineFlag+'\')">'+  obj[i].char_name+'</a></li>');
                obj[i].char_name
                }
		   }
		  tmpInnerStr.push('</ul>');
		  tmpInnerStr.push('</li>');
		   }
		  tmpInnerStr.push('</ul>');
		 alert(tmpInnerStr.join(""));
		  document.getElementById("menu_layer").innerHTML=tmpInnerStr.join("");
		
		}
		
//调用显示初始化内部的内容
showItemList_duansy( paraStr+ charIdStr);