`
zlotus
  • 浏览: 54155 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

CSS-右键菜单DIV TABLE

    博客分类:
  • Web
CSS 
阅读更多
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;

}


分享到:
评论

相关推荐

    jquery 右键菜单功能

    2. **jQuery绑定事件**:接下来,使用jQuery绑定`contextmenu`事件到目标元素,如表格(`&lt;table&gt;`)或其他需要添加右键菜单的元素: ```javascript $('#yourElement').on('contextmenu', function(e) { e....

    JS组件Bootstrap ContextMenu右键菜单使用方法

    Bootstrap ContextMenu 是一个基于 Bootstrap 框架的 JavaScript 插件,用于在网页上创建和管理自定义右键菜单,即上下文菜单。这种菜单可以在用户在页面上使用鼠标右键点击时触发,通常用于提供快捷操作或者对页面...

    JavaScript右键菜单

    ### JavaScript右键菜单知识点解析 #### 一、项目概述 本项目主要介绍了一种通过JavaScript实现的右键菜单功能,该功能旨在为用户提供一个便捷、实用的上下文菜单选项。菜单项包括创建、修改和删除等功能,用户可以...

    jQuery动态生成表格及右键菜单功能示例

    要实现右键菜单,首先需要创建一个隐藏的`div`,作为菜单的容器。在本例中,这个`div`的ID是`contextMenu`。当用户在表格行上右键点击时,菜单的位置通过`event.clientX`和`event.clientY`来确定,然后使用`show`...

    如何实现浏览器上的右键菜单

    在这个示例中,我们创建了一个名为`Layer1`的`&lt;div&gt;`,其中包含一个宽度为4像素的`&lt;select&gt;`元素,用于隐藏默认的右键菜单。我们还创建了一个`PopMenu``&lt;div&gt;`,它将作为自定义菜单的容器。通过监听`onmousemove`和`...

    html+js鼠标右键代码

    在`&lt;body&gt;`标签中设置了`oncontextmenu="self.event.returnValue=false"`属性,这行代码的作用是阻止浏览器默认弹出的右键菜单。`oncontextmenu`是HTML中的一个事件处理程序,当用户在页面上执行右键点击时触发。...

    JS实现不使用图片仿Windows右键菜单效果代码

    在探讨如何使用JavaScript不借助图片实现类似Windows系统的右键菜单效果时,我们可以从给定的内容中提炼出关键知识点。这段代码的描述中涉及到的关键技术点包括:JavaScript编程基础、CSS样式设计技巧,以及Web开发...

    HTML表格右键事件JS实现

    `event.preventDefault()`用于防止浏览器显示默认的右键菜单。接下来,我们需要创建一个自定义的上下文菜单。这可以通过CSS样式和JavaScript动态生成的HTML元素来实现。例如: ```html &lt;div id="customMenu" style=...

    用js实现网页上模仿桌面右键菜单

    ### 使用JavaScript实现网页上的桌面右键菜单功能 在现代网页开发中,为了提供更好的用户体验以及增强网站的功能性,开发者常常需要模拟一些常见的操作系统行为。其中一个典型的应用场景就是在网页上实现类似桌面...

    javascript自定义右键弹出菜单实现方法.docx

    在Web开发中,为了提升用户体验与功能多样性,自定义右键菜单是一种常见的交互方式。本文将详细解析如何利用JavaScript来实现一个简单的自定义右键弹出菜单,并深入探讨其中涉及的关键技术点。 #### 实现原理 在...

    一个ViewGrid控件

    WebGrid的属性ContextMenuCssClass - 右键菜单的级联样式表 CSS 类名(右键菜单的结构div ul li a) 10、自定义分页样式。显示总记录数、每页记录数、当前页数、总页数、首页、上一页、下一页、末页和分页按钮 ...

    gridview扩展

    SmartGridView的属性ContextMenuCssClass - 右键菜单的级联样式表 CSS 类名(右键菜单的结构div ul li a) &lt;br&gt;10、自定义分页样式。显示总记录数、每页记录数、当前页数、总页数、首页、上一页、下一页、末...

    JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

    - `oncontextmenu="window.event.returnValue=false"`用于禁止右键菜单,这在很多Web应用中是一种常见的做法,以避免默认右键菜单干扰到页面功能。 - 每个可拖拽的DIV都设置了`dragClass="normal"`和`overClass=...

    网页设计常用代码

    2. **禁止右键菜单**:使用JavaScript事件处理函数`oncontextmenu="return false"`,可以防止用户通过右键菜单查看源代码或执行其他操作。 3. **禁止文字选中和复制**:在`&lt;body&gt;`标签中使用`onselectstart="return ...

    JavaScript常用技巧

    1. **禁用右键菜单**:`oncontextmenu="window.event.returnValue=false"` 通过为元素添加此事件处理程序,可以阻止默认的右键菜单显示。 - 示例代码:`&lt;table border oncontextmenu="return(false)"&gt;` 2. **禁止...

    easyUI笔记11

    控制菜单的显示和隐藏可以通过`show`和`hide`方法实现,也可以绑定到右键事件。 按钮是用户界面的重要组成部分。在EasyUI中,可以创建链接按钮、菜单按钮和分割按钮: 1. 链接按钮:`&lt;a href="#" class="easyui-...

    javascript 常用验证函数.doc

    - DIV层操作:通过JavaScript操作CSS属性实现拖放、显示、隐藏、移动和增加。 - TABLE操作:客户端动态增删表格行和列,模拟进度条和滚动列表。 - 对象嵌入:如使用object标签嵌入播放器和Flash,并与JavaScript交互...

    asp特效

    ` 阻止默认行为,即弹出右键菜单。 #### 三、进阶技巧 - **CSS与JavaScript结合**:利用CSS控制样式,JavaScript实现动态效果,两者相辅相成,可以创造出更加丰富多彩的网页特效。 - **优化用户体验**:设计特效时...

    jquery下jstree简单应用 - v1.0.docx

    2. **实现右键菜单及功能**:为树中的每个节点添加了右键菜单,并实现了相关的功能。 3. **添加复选框功能**:为树中的节点添加了复选框,支持获取已选中节点的 ID。 #### 三、代码解析 ##### 1. 引入必要的库 ...

    jqgrid 3.5 beta

    - **表头菜单**:列标题可配置右键菜单,提供排序、搜索等操作。 - **多语言支持**:可以轻松切换不同的语言环境。 - **自定义列**:可以自由定义列的宽度、显示和隐藏,以及自定义列头图标和工具提示。 ### 4. ...

Global site tag (gtag.js) - Google Analytics