读书人

怎么设置JS右键的行数?代码中小弟我做

发布时间: 2012-01-07 21:41:55 作者: rapoo

如何设置JS右键的行数?代码中我做了6个功能,但右键显示的时候它只显示了3个,怎么解决?
<%--

/**

*实现右键菜单功能

*/

--%>

<html>

<body oncontextmenu = showMenu( ' ')>

<form name = "menuForm ">

<!--隐藏框,用来保存选择的菜单的id值-->

<input type = "hidden " name = "id " value = " ">

<table>

<tr> <td> <a href= "javascript:clickMenu() " oncontextmenu = showMenu( '0 ')> 根目录 </a> </td> </tr>

<tr> <td> <a href= "javascript:clickMenu() " oncontextmenu = showMenu( '1 ')> 菜单一 </a> </td> </tr>

<tr> <td> <a href= "javascript:clickMenu() " oncontextmenu = showMenu( '2 ')> 菜单二 </a> </td> </tr>
<tr> <td> <a href= "javascript:clickMenu() " oncontextmenu = showMenu( '3 ')> 菜单三 </a> </td> </tr>

<tr> <td> <a href= "javascript:clickMenu() " oncontextmenu = showMenu( '4 ')> 菜单四 </a> </td> </tr>

<tr> <td> <a href= "javascript:clickMenu() " oncontextmenu = showMenu( '5 ')> 菜单五 </a> </td> </tr>

</table>

</form>

</body>



<!-- 这里用来定义需要显示的右键菜单 -->

<div id= "itemMenu " style= "display:none ">

<table border= "1 " width= "100% " height= "100% " bgcolor= "#cccccc " style= "border:thin " cellspacing= "0 ">

<tr>

<td style= "cursor:default;border:outset 1; " align= "center " onclick= "parent.create() ">



新增节点

</td>

</tr>
<tr>

<td style= "cursor:default;border:outset 1; " align= "center " onclick= "parent.create1() ">

新增页面

</td>

</tr>

<tr>

<td style= "cursor:default;border:outset 1; " align= "center " onclick= "parent.update(); ">

修改节点

</td>

</tr>
<tr>

<td style= "cursor:default;border:outset 1; " align= "center " onclick= "parent.update1(); ">

修改页面

</td>

</tr>
<tr>

<td style= "cursor:default;border:outset 1; " align= "center " onclick= "parent.del() ">

删除节点



</td>

</tr>
<tr>

<td style= "cursor:default;border:outset 1; " align= "center " onclick= "parent.del1() ">

删除页面

</td>

</tr>
</table>

</div>

<!-- 右键菜单结束-->

</html>

<script language= "JavaScript ">

/**

*根据传入的id显示右键菜单

*/

function showMenu(id)

{

menuForm.id.value = id;

if( " " == id)

{

popMenu(itemMenu,100, "100 ");

}

else

{

popMenu(itemMenu,100, "111 ");

}

event.returnValue=false;

event.cancelBubble=true;

return false;

}

/**

*显示弹出菜单

*menuDiv:右键菜单的内容

*width:行显示的宽度

*rowControlString:行控制字符串,0表示不显示,1表示显示,如“101”,则表示第1、3行显示,第2行不显示

*/

function popMenu(menuDiv,width,rowControlString)

{

//创建弹出菜单

var pop=window.createPopup();

//设置弹出菜单的内容

pop.document.body.innerHTML=menuDiv.innerHTML;



var rowObjs=pop.document.body.all[0].rows;

//获得弹出菜单的行数

var rowCount=rowObjs.length;

//循环设置每行的属性

for(var i=0;i <rowObjs.length;i++)

{

//如果设置该行不显示,则行数减一

var hide=rowControlString.charAt(i)!= '1 ';

if(hide){



rowCount--;

}

//设置是否显示该行

rowObjs[i].style.display=(hide)? "none ": " ";

//设置鼠标滑入该行时的效果

rowObjs[i].cells[0].onmouseover=function()

{

this.style.background= "#818181 ";

this.style.color= "white ";

}

//设置鼠标滑出该行时的效果

rowObjs[i].cells[0].onmouseout=function(){

this.style.background= "#cccccc ";

this.style.color= "black ";

}

}

//屏蔽菜单的菜单

pop.document.oncontextmenu=function()

{

return false;

}

//选择右键菜单的一项后,菜单隐藏

pop.document.onclick=function()

{

pop.hide();

}

//显示菜单

pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);

return true;

}

function create()

{

alert( "create " + menuForm.id.value + "! ");

}

function update()

{

alert( "update " + menuForm.id.value + "! ");

}

function del()

{

alert( "delete " + menuForm.id.value + "! ");

}
function create1()

{

alert( "create " + menuForm.id.value + "! ");

}

function update1()

{

alert( "update " + menuForm.id.value + "! ");

}

function del1()

{

alert( "delete " + menuForm.id.value + "! ");

}

function clickMenu()



{

alert( "you click a menu! ");

}

</script>

[解决办法]
if( " " == id)

{

popMenu(itemMenu,100, "100 ");

}

else

{

popMenu(itemMenu,100, "111111 ");//这里的问题,你循环里有判断,应该是非6个1

}

读书人网 >Java Web开发

热点推荐