DIV:
动态增减DIV:
总有bug.不停的右键 就只会增加子节点!
XX.js:
<div id="divMenu2" class="skin0" onMouseover="doActive()" onMouseout="doNormal()" onClick="goUrl();">
<div class="menuitems" script="refreshNode">刷新</div>
</div>
增加子节点:
设置的样式和属性不好用
// var o = document.getElementById("divMenu"+MenuNum);
// var newdiv = document.createElement("DIV");
// newdiv.innerHTML="增加";
// newdiv.setAttribute("class","menuitems");
// newdiv.setAttribute("onClick","alert(2222);");
// newdiv.setAttribute("url","");
// newdiv.setAttribute("target","basefrm");
// o.appendChild(newdiv);
// var newdiv2 = document.createElement("DIV");
// newdiv2.innerHTML="删除";
// newdiv2.setAttribute("onClick","goUrl()");
// newdiv2.setAttribute("class","menuitems");
// newdiv2.setAttribute("target","basefrm");
// o.appendChild(newdiv2);
子节点全删除
// if(MenuNum==2){
// var o = document.getElementById("divMenu"+MenuNum);
// var n = o.childNodes.length;
// for(var i=0;i<n;i++){
// o.removeChild(o.firstChild);
// }
//
// }
<style>
.skin0 {
position:absolute;
text-align:left;
width:120px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:hand;
visibility:hidden;
}
.menuitems {
padding-left:20px;
padding-right:10px;
}
</style>
用table实现:静态的
<div id="itemMenu" style="display:none">
<table width="100%" height="100%" bgcolor="white" style="border:2px solid black" cellspacing="0">
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.addToOther();parent.refre();">
<font size="2px">添加</font>
</td>
</tr>
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.view()">
<font size="2px">查看</font>
</td>
</tr>
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.modify()">
<font size="2px">修改</font>
</td>
</tr>
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.del();parent.refre();">
<font size="2px">删除</font>
</td>
</tr>
</table>
</div>
//右键弹出菜单
function showMenu(obj){
document.getElementById("sltid").value = obj;//选中的实例id
var isdef = document.getElementById("isdef").value;
var menudiv;
menudiv = document.getElementById("itemMenu");
popMenu(menudiv,120,"1111");
event.returnValue=false;
event.cancelBubble=true;
return false;
}
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="#3366CC";
this.style.color="white";
}
//设置鼠标滑出该行时的效果
rowObjs[i].cells[0].onmouseout=function(){
this.style.background="white";
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;
}
动态增减DIV:
总有bug.不停的右键 就只会增加子节点!
XX.js:
<div id="divMenu2" class="skin0" onMouseover="doActive()" onMouseout="doNormal()" onClick="goUrl();">
<div class="menuitems" script="refreshNode">刷新</div>
</div>
增加子节点:
设置的样式和属性不好用
// var o = document.getElementById("divMenu"+MenuNum);
// var newdiv = document.createElement("DIV");
// newdiv.innerHTML="增加";
// newdiv.setAttribute("class","menuitems");
// newdiv.setAttribute("onClick","alert(2222);");
// newdiv.setAttribute("url","");
// newdiv.setAttribute("target","basefrm");
// o.appendChild(newdiv);
// var newdiv2 = document.createElement("DIV");
// newdiv2.innerHTML="删除";
// newdiv2.setAttribute("onClick","goUrl()");
// newdiv2.setAttribute("class","menuitems");
// newdiv2.setAttribute("target","basefrm");
// o.appendChild(newdiv2);
子节点全删除
// if(MenuNum==2){
// var o = document.getElementById("divMenu"+MenuNum);
// var n = o.childNodes.length;
// for(var i=0;i<n;i++){
// o.removeChild(o.firstChild);
// }
//
// }
<style>
.skin0 {
position:absolute;
text-align:left;
width:120px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:hand;
visibility:hidden;
}
.menuitems {
padding-left:20px;
padding-right:10px;
}
</style>
用table实现:静态的
<div id="itemMenu" style="display:none">
<table width="100%" height="100%" bgcolor="white" style="border:2px solid black" cellspacing="0">
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.addToOther();parent.refre();">
<font size="2px">添加</font>
</td>
</tr>
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.view()">
<font size="2px">查看</font>
</td>
</tr>
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.modify()">
<font size="2px">修改</font>
</td>
</tr>
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.del();parent.refre();">
<font size="2px">删除</font>
</td>
</tr>
</table>
</div>
//右键弹出菜单
function showMenu(obj){
document.getElementById("sltid").value = obj;//选中的实例id
var isdef = document.getElementById("isdef").value;
var menudiv;
menudiv = document.getElementById("itemMenu");
popMenu(menudiv,120,"1111");
event.returnValue=false;
event.cancelBubble=true;
return false;
}
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="#3366CC";
this.style.color="white";
}
//设置鼠标滑出该行时的效果
rowObjs[i].cells[0].onmouseout=function(){
this.style.background="white";
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;
}
发表评论
-
JS面向对象编程
2012-02-06 10:51 644http://hi.baidu.com/ruan083de/b ... -
JS正则 备忘
2012-01-10 16:21 675http://www.iteye.com/topic/3072 ... -
JS事件冒泡浏览器兼容
2011-06-16 11:06 1241Event keyCode: http://unixpap ... -
CSS样式
2011-06-08 13:47 799自动换行设定宽度:word-wrap\word-break\w ... -
Javascript5-jquery
2011-01-27 15:34 718jquery api: http://visu ... -
JSON
2011-01-21 15:53 745java开源的东西.多。 51cto: //------- ... -
CSS 层定位FLOATDISPLAYVISIBILITY
2011-01-01 15:11 883//图片滚动http://www.kxbd.com/mylab ... -
CSS定位
2011-01-01 12:23 681另一篇: http://blog.csdn. ... -
CSS-设计网站(DIV盒子模型)
2011-01-01 11:04 1520.盒子模型以及定位的不 ... -
原理性知识总结
2010-11-04 22:18 8131.spring框架bean be ... -
JavaScript4
2010-10-14 18:50 751http://www.w3school.com.cn/js/j ... -
Spring-JdbcTemplate
2010-04-30 14:06 982JdbcTemplate事务操作: <bean ... -
JSP分页
2010-04-17 13:29 923分页 用rownum较多 Oracle数据库的rownum ... -
JavaScript3
2010-04-15 13:44 737右键弹出菜单: //-------------------- ... -
JavaScript2
2010-04-13 16:12 9081.单选按钮 <input type="rad ... -
JavaScript1
2010-03-22 17:10 542from:http://www.tsolong.com/pos ... -
webwork框架
2009-07-02 20:41 7661.webwork标签 教材:http://dev.csdn. ... -
关于框架开发
2009-06-18 00:05 745纪念: JAR Library Installation(ja ... -
页面常用部分
2009-05-25 22:39 685HTML+XHTML+CSS+JavaScript+DOM+A ...
相关推荐
2. **jQuery绑定事件**:接下来,使用jQuery绑定`contextmenu`事件到目标元素,如表格(`<table>`)或其他需要添加右键菜单的元素: ```javascript $('#yourElement').on('contextmenu', function(e) { e....
Bootstrap ContextMenu 是一个基于 Bootstrap 框架的 JavaScript 插件,用于在网页上创建和管理自定义右键菜单,即上下文菜单。这种菜单可以在用户在页面上使用鼠标右键点击时触发,通常用于提供快捷操作或者对页面...
### JavaScript右键菜单知识点解析 #### 一、项目概述 本项目主要介绍了一种通过JavaScript实现的右键菜单功能,该功能旨在为用户提供一个便捷、实用的上下文菜单选项。菜单项包括创建、修改和删除等功能,用户可以...
要实现右键菜单,首先需要创建一个隐藏的`div`,作为菜单的容器。在本例中,这个`div`的ID是`contextMenu`。当用户在表格行上右键点击时,菜单的位置通过`event.clientX`和`event.clientY`来确定,然后使用`show`...
在这个示例中,我们创建了一个名为`Layer1`的`<div>`,其中包含一个宽度为4像素的`<select>`元素,用于隐藏默认的右键菜单。我们还创建了一个`PopMenu``<div>`,它将作为自定义菜单的容器。通过监听`onmousemove`和`...
在`<body>`标签中设置了`oncontextmenu="self.event.returnValue=false"`属性,这行代码的作用是阻止浏览器默认弹出的右键菜单。`oncontextmenu`是HTML中的一个事件处理程序,当用户在页面上执行右键点击时触发。...
在探讨如何使用JavaScript不借助图片实现类似Windows系统的右键菜单效果时,我们可以从给定的内容中提炼出关键知识点。这段代码的描述中涉及到的关键技术点包括:JavaScript编程基础、CSS样式设计技巧,以及Web开发...
`event.preventDefault()`用于防止浏览器显示默认的右键菜单。接下来,我们需要创建一个自定义的上下文菜单。这可以通过CSS样式和JavaScript动态生成的HTML元素来实现。例如: ```html <div id="customMenu" style=...
### 使用JavaScript实现网页上的桌面右键菜单功能 在现代网页开发中,为了提供更好的用户体验以及增强网站的功能性,开发者常常需要模拟一些常见的操作系统行为。其中一个典型的应用场景就是在网页上实现类似桌面...
在Web开发中,为了提升用户体验与功能多样性,自定义右键菜单是一种常见的交互方式。本文将详细解析如何利用JavaScript来实现一个简单的自定义右键弹出菜单,并深入探讨其中涉及的关键技术点。 #### 实现原理 在...
WebGrid的属性ContextMenuCssClass - 右键菜单的级联样式表 CSS 类名(右键菜单的结构div ul li a) 10、自定义分页样式。显示总记录数、每页记录数、当前页数、总页数、首页、上一页、下一页、末页和分页按钮 ...
SmartGridView的属性ContextMenuCssClass - 右键菜单的级联样式表 CSS 类名(右键菜单的结构div ul li a) <br>10、自定义分页样式。显示总记录数、每页记录数、当前页数、总页数、首页、上一页、下一页、末...
- `oncontextmenu="window.event.returnValue=false"`用于禁止右键菜单,这在很多Web应用中是一种常见的做法,以避免默认右键菜单干扰到页面功能。 - 每个可拖拽的DIV都设置了`dragClass="normal"`和`overClass=...
2. **禁止右键菜单**:使用JavaScript事件处理函数`oncontextmenu="return false"`,可以防止用户通过右键菜单查看源代码或执行其他操作。 3. **禁止文字选中和复制**:在`<body>`标签中使用`onselectstart="return ...
1. **禁用右键菜单**:`oncontextmenu="window.event.returnValue=false"` 通过为元素添加此事件处理程序,可以阻止默认的右键菜单显示。 - 示例代码:`<table border oncontextmenu="return(false)">` 2. **禁止...
控制菜单的显示和隐藏可以通过`show`和`hide`方法实现,也可以绑定到右键事件。 按钮是用户界面的重要组成部分。在EasyUI中,可以创建链接按钮、菜单按钮和分割按钮: 1. 链接按钮:`<a href="#" class="easyui-...
- DIV层操作:通过JavaScript操作CSS属性实现拖放、显示、隐藏、移动和增加。 - TABLE操作:客户端动态增删表格行和列,模拟进度条和滚动列表。 - 对象嵌入:如使用object标签嵌入播放器和Flash,并与JavaScript交互...
` 阻止默认行为,即弹出右键菜单。 #### 三、进阶技巧 - **CSS与JavaScript结合**:利用CSS控制样式,JavaScript实现动态效果,两者相辅相成,可以创造出更加丰富多彩的网页特效。 - **优化用户体验**:设计特效时...
2. **实现右键菜单及功能**:为树中的每个节点添加了右键菜单,并实现了相关的功能。 3. **添加复选框功能**:为树中的节点添加了复选框,支持获取已选中节点的 ID。 #### 三、代码解析 ##### 1. 引入必要的库 ...
- **表头菜单**:列标题可配置右键菜单,提供排序、搜索等操作。 - **多语言支持**:可以轻松切换不同的语言环境。 - **自定义列**:可以自由定义列的宽度、显示和隐藏,以及自定义列头图标和工具提示。 ### 4. ...