<!--js想实现多个表格 table，根据表格第一行内容（ID）来确定用哪个右键菜单，想让它死循环鼠标在某个table上，从而确定该table的内容ID，从而判定用哪个右键菜单
，不知道这思路可行吗？
-->
<!doctype html>
<html>
<head>
<title>jsPlumb 1.7.5 demo</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../css/jsplumb.css">
<link rel="stylesheet" href="demo.css">
<script src="http://api.
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<!--主页菜单CSS-->
<style>
.DreamMenu {
position:absolute;
visibility:hidden;
z-index:100;
overflow:hidden;
width:150px;
background-color:buttonface;
border:dimgray 1px solid !important;
border:buttonhighlight menu menu buttonhighlight 2px outset;
padding:1px !important;
padding:1px 1px 1px 0px;
font-size:12px;
}
.DreamMenu ul {
margin:1px;
border-bottom:buttonhighlight 1px solid;
border-top:buttonshadow 1px solid;
}
.DreamMenu a {
display:block;
width:100%;
padding:1px 2px 2px 20px;
cursor:default;
text-decoration:none;
color:#000000;
}
.DreamMenu a:hover {
background:highlight;
color:#ffffff;
}
</style>
<!--链接菜单CSS-->
<style>
.skin {
position:absolute;
visibility:hidden;
z-index:100;
overflow:hidden;
width:150px;
background-color:buttonface;
border:dimgray 1px solid !important;
border:buttonhighlight menu menu buttonhighlight 2px outset;
padding:1px !important;
padding:1px 1px 1px 0px;
font-size:12px;
}
div.menuitems {
margin : 1px 0;
}
div.menuitems a {
text-decoration : none;
}
div.menuitems:hover {
background:highlight;
color:#ffffff;
}
</style>
<!--链接菜单JS-->
<!--这个js想实现多个表格 table，根据表格第一行内容（ID）来确定用哪个右键菜单，想让它死循环鼠标在某个table上，从而确定该table的内容ID，从而判定用哪个右键菜单
，不知道这思路可行吗？
-->
<script>
window.onload = function() {
var container = document.getElementById('chartWindow');
var menu,tables;
var tables = document.getElementsByTagName('table');
while(1)
{
for(var i=0;i<tables.length;i++){
document.getElementById(tables[j].id).onmoveover = function(){
if(document.getElementById(tables[j].id).rows[0].cells[0].innerHTML=="ID28181")
{
menu = document.getElementById('menu');
}
else if(document.getElementById(tables[j].id).rows[0].cells[0].innerHTML=="ID28182")
{
menu = document.getElementById('menu2');
}
};
}
function showMenu() {
var evt = window.event || arguments[0];
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var rightedge = container.clientWidth-evt.clientX;
var bottomedge = container.clientHeight-evt.clientY;
/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if (rightedge < menu.offsetWidth)
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";
else
/*否则，就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX + "px";
/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if (bottomedge < menu.offsetHeight)
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
else
/*否则，就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY + "px";
/*设置菜单可见*/
menu.style.visibility = "visible";
LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble);
}
/*隐藏菜单*/
function hideMenu() {
menu.style.visibility = 'hidden';
}
LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble);
LTEvent.addListener(container,"contextmenu",showMenu);
LTEvent.addListener(document,"click",hideMenu);
}
}
</script>
<!--主页菜单JS-->
<script>
if(!document.all) document.captureEvents(Event.MOUSEDOWN);
var _Tmenu = 0;
var _Amenu = 0;
var _Type = 'A';
document.onclick = _Hidden;
function _Hidden()
{
if(_Tmenu==0) return;
document.getElementById(_Tmenu).style.visibility='hidden';
_Tmenu=0;
}
document.oncontextmenu = function (e)
{
_Hidden();
var _Obj = document.all ? event.srcElement : e.target;
if(_Type.indexOf(_Obj.tagName) == -1) return;
_Amenu = _Obj.getAttribute('menu');
if(_Amenu == 'null') return;
if(document.all) e = event;
_ShowMenu(_Amenu, e);
return false;
}
function _ShowMenu(Eid, event)
{
var _Menu = document.getElementById(Eid);
var _Left = event.clientX + document.body.scrollLeft;
var _Top = event.clientY + document.body.scrollTop;
_Menu.style.left = _Left.toString() + 'px';
_Menu.style.top = _Top.toString() + 'px';
_Menu.style.visibility = 'visible';
_Tmenu = Eid;
}
</script>
<script>_Type='INPUT,A,DIV,BODY';</script>
</head>
<body data-demo-id="chart" data-library="dom">
<div id="menu1" class='DreamMenu'>
<a href='0'>您好</a>
<a href='1'>我是主菜单</a>
<a href='2'>在页面上单击</a>
<a href='3'>就可以看到我</a>
<ul></ul>
<a href='4'>打印</a>
</div>
<div id="menu" class="skin">
<div class="menuitems">
<a href="javascript:history.back();">哈哈</a>
</div>
<div class="menuitems">
<a href="javascript:history.back();">我是个链接</a>
</div>
<hr>
<div class="menuitems">
<a href="http://api. target="_blank">好开心啊</a>
</div>
<div class="menuitems">
<a href="http://www. target="_blank">查看</a>
</div>
<div class="menuitems">
<a href="1" target="_blank">打印</a>
</div>
</div>
<div id="menu2" class="skin">
<div class="menuitems">
<a href="javascript:history.back();">哈哈</a>
</div>
<div class="menuitems">
<a href="javascript:history.back();">我是个链接2</a>
</div>
<hr>
<div class="menuitems">
<a href="http://api. target="_blank">好开心啊</a>
</div>
<div class="menuitems">
<a href="http://www. target="_blank">查看</a>
</div>
<div class="menuitems">
<a href="1" target="_blank">打印</a>
</div>
</div>
<div id="headerWrapper">
<div id="header">
<div class="logo"><img src="img/logo.png"></div>
<div class="menu">
<a href="http://localhost:4567">文件</a>
<a href="../../apidocs">项目</a>
<a href="../../tests/index.html">消息</a>
<a href="mailto:hello@用户</a>
</div>
</div>
</div>
<div id="main">
<!-- demo -->
<div class="demo chart-demo" id="chart-demo" menu='menu1'>
<div id="chartWindow" >
<div class="window" id="chartWindow1"><table id="table1" align="center" width="100%" height="100%"><tr><td>ID28181</td></tr><tr height=25 bgcolor="white"><td>顶事件</td></tr><tr bgcolor="grey"><td>∪</td></tr></table></div>
<div class="window" id="chartWindow2"><table id="table2" class="node"><tr class="nodeid"><td>ID28182</td></tr><tr class="nodedes"><td>一个与门带2个基本事件</td></tr><tr class="nodegate"><td>∩</td></tr></table></div>
<div class="window" id="chartWindow3"><table align="center"><tr><td>ID28183</td></tr><tr height=25><td>一个或门带2个基本事件</td></tr><tr><td>∪</td></tr></table></div>
<div class="window" id="chartWindow4"><table align="center"><tr><td>ID28184</td></tr><tr height=25><td>基本事件</td></tr></table></div>
<div class="window" id="chartWindow5"><table align="center"><tr><td>ID28185</td></tr><tr height=25><td>基本事件</td></tr></table></div>
<div class="window" id="chartWindow6"><table align="center"><tr><td>ID28186</td></tr><tr height=25><td>基本事件</td></tr></table></div>
<div class="window" id="chartWindow7"><table align="center" ><tr><td>ID28187</td></tr><tr height=25><td>基本事件</td></tr></table></div>
</div>
</div>
<!-- /demo -->
</div>
<!-- explanation -->
<div class="explanation">
<h4>演示</h4>
</div>
<!-- /explanation -->
<!-- JS -->
<!-- support lib for bezier stuff -->
<script src="../../lib/jsBezier-0.7.js"></script>
<!-- event adapter -->
<script src="../../lib/mottle-0.6.js"></script>
<!-- geometry functions -->
<script src="../../lib/biltong-0.2.js"></script>
<!-- drag -->
<script src="../../lib/katavorio-0.6.js"></script>
<!-- jsplumb util -->
<script src="../../src/util.js"></script>
<script src="../../src/browser-util.js"></script>
<!-- main jsplumb engine -->
<script src="../../src/jsPlumb.js"></script>
<!-- base DOM adapter -->
<script src="../../src/dom-adapter.js"></script>
<script src="../../src/overlay-component.js"></script>
<!-- endpoint -->
<script src="../../src/endpoint.js"></script>
<!-- connection -->
<script src="../../src/connection.js"></script>
<!-- anchors -->
<script src="../../src/anchors.js"></script>
<!-- connectors, endpoint and overlays -->
<script src="../../src/defaults.js"></script>
<!-- bezier connectors -->
<script src="../../src/connectors-bezier.js"></script>
<!-- state machine connectors -->
<script src="../../src/connectors-statemachine.js"></script>
<!-- flowchart connectors -->
<script src="../../src/connectors-flowchart.js"></script>
<script src="../../src/connector-editors.js"></script>
<!-- SVG renderer -->
<script src="../../src/renderers-svg.js"></script>
<!-- vml renderer -->
<script src="../../src/renderers-vml.js"></script>
<!-- common adapter -->
<script src="../../src/base-library-adapter.js"></script>
<!-- no library jsPlumb adapter -->
<script src="../../src/dom.jsPlumb.js"></script>
<!-- /JS -->
<!-- demo code -->
<script src="demo.js"></script>
<script src="../demo-list.js"></script>
</body>
</html>
