项目中用到的类似于分享到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);