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 550http://hi.baidu.com/ruan083de/b ... -
JS正则 备忘
2012-01-10 16:21 610http://www.iteye.com/topic/3072 ... -
JS事件冒泡浏览器兼容
2011-06-16 11:06 1196Event keyCode: http://unixpap ... -
CSS样式
2011-06-08 13:47 759自动换行设定宽度:word-wrap\word-break\w ... -
Javascript5-jquery
2011-01-27 15:34 670jquery api: http://visu ... -
JSON
2011-01-21 15:53 699java开源的东西.多。 51cto: //------- ... -
CSS 层定位FLOATDISPLAYVISIBILITY
2011-01-01 15:11 841//图片滚动http://www.kxbd.com/mylab ... -
CSS定位
2011-01-01 12:23 648另一篇: http://blog.csdn. ... -
CSS-设计网站(DIV盒子模型)
2011-01-01 11:04 1486.盒子模型以及定位的不 ... -
原理性知识总结
2010-11-04 22:18 7671.spring框架bean be ... -
JavaScript4
2010-10-14 18:50 717http://www.w3school.com.cn/js/j ... -
Spring-JdbcTemplate
2010-04-30 14:06 943JdbcTemplate事务操作: <bean ... -
JSP分页
2010-04-17 13:29 896分页 用rownum较多 Oracle数据库的rownum ... -
JavaScript3
2010-04-15 13:44 688右键弹出菜单: //-------------------- ... -
JavaScript2
2010-04-13 16:12 8701.单选按钮 <input type="rad ... -
JavaScript1
2010-03-22 17:10 502from:http://www.tsolong.com/pos ... -
webwork框架
2009-07-02 20:41 7221.webwork标签 教材:http://dev.csdn. ... -
关于框架开发
2009-06-18 00:05 710纪念: JAR Library Installation(ja ... -
页面常用部分
2009-05-25 22:39 651HTML+XHTML+CSS+JavaScript+DOM+A ...
相关推荐
JS+CSS网页右键菜单
自定义右键菜单javascript+div,有详细注释,方便各位程序员修改,css可以随意修改方便大家个性化菜单。
HTML-CSS-Div测试习题.docx
HTML-CSS-DIV网页设计与布局第章-网页布局与设计技巧.pptx
网页设计-----DIV层运用+CSS样式-(精选文档)
jQuery css3右键菜单,K社游戏风格。旋转弹出收回菜单,有菜单弹出音效,弹出有遮罩层,支持移动端。(不兼容IE6,7,8)
仿Windows7风格的网页右键菜单! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net
CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...).pdf
为dhtmlXTree树上的每一个节点添加右键菜单。附:在树上的节点上点右键时才会生成菜单,空白区域单击时不会生成菜单。 分析: 1、用 dhtmlXTree + dhtmlxmenu 实现。 2、 用dhtmlxmenu生成菜单的部分代码: ...
react-css-grid-table 这是一个使用的React表库。 安装 yarn add https://github.com/RebeccaPark/react-css-grid-table JSBin示例 看。 Webpack风格的示例 import Table , { IconColumn } from 'react-css-grid-...
}安装npm install postcss-custom-css-units用法将postcss-custom-css-units插件添加到postcss.config.js module . exports = { plugins : [ require ( 'postcss-custom-css-units' ) ( { baseUnit
CSS-DIV布局 这本书详细介绍了 DIV的布局情况。
用CSS-DIV写的一个鲜花网站,包括图片,源代码,格式等
ztree 右键菜单,html的静态的,js和css都有,下载后直接就可以看到功能介绍,网上可真不好找啊,特此奉献
div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单
CSS JS自定义网页右键菜单,去掉原有的浏览器右键菜单,显示为本代码所定义的右键菜单内容,适用于模块化、个性化的信息管理系统中,本款菜单加入了图标和鼠标悬停的变化效果,似乎比原有的右键菜单更清新一些了,...
用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课 CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课 理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课 CSS排版 - CSS/DIV布局专题讲解 - 第8课 网页变幻 - CSS...
小炫酷flash右键菜单超级无敌加强版,最新研究出品,帮你解决无法个性化使用flash右键的问题,我们还配套一个生成器,你可以访问这个地址来下载:http://download.csdn.net/detail/yaonewnew/7561421
div与css,推荐教程--CSS+DIV教程范本
jQuery CSS 实现Bootstrap风格带阴影的右键菜单,在这个例子中,在下面的矩形区域内右键点击就可以打开上下文菜单。在指定区域内的任何位置点击右键即可弹出右键菜单。