<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>右键菜单</title>
<script type="text/javascript"> mxBasePath = 'mxgraph';</script>
<script type="text/javascript" src="mxgraph/js/mxClient.js"></script>
<!-- 示例代码 -->
<script type="text/javascript">
function main(container)
{
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
mxEvent.disableContextMenu(container);
// Creates the graph inside the given container
var graph = new mxGraph(container);
// Disables tooltips on touch devices
graph.setTooltips(!mxClient.IS_TOUCH);
// Stops editing on enter or escape keypress
var keyHandler = new mxKeyHandler(graph);
// Installs a popupmenu handler using local function (see below).
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt)
{
return createPopupMenu(graph, menu, cell, evt);
};
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds the root vertex of the tree
graph.getModel().beginUpdate();
try
{
var w = graph.container.offsetWidth;
var v1 = graph.insertVertex(parent, "id001", 'hello', w/2 - 30, 20, 80, 30);
var v2 = graph.insertVertex(parent, "id002", 'world', 160, 160, 80, 30);
var e1 = graph.insertEdge(parent, null, '33', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
var content = document.createElement('div');
content.style.padding = '4px';
var tb = new mxToolbar(content);
tb.addItem('放大', 'pic/zoom_in.png',function(evt)
{
graph.zoomIn();
});
tb.addItem('缩小', 'pic/zoom_out.png',function(evt)
{
graph.zoomOut();
});
tb.addItem('打印', 'pic/printer.png',function(evt)
{
var preview = new mxPrintPreview(graph, 1);
preview.open();
});
wnd = new mxWindow('Tools', content, 0, 300, 200, 50, false);
wnd.setMaximizable(false);
wnd.setScrollable(false);
wnd.setResizable(false);
wnd.setVisible(true);
}
};
// Function to create the entries in the popupmenu
function createPopupMenu(graph, menu, cell, evt)
{
var model = graph.getModel();
if (cell != null)
{
if (model.isVertex(cell))
{
menu.addItem('Add child', 'pic/user.png', function()
{
alert('Add child');
});
menu.addSeparator();
}
}
menu.addItem('Print', 'pic/printer.png', function()
{
alert('Print');
});
};
</script>
</head>
<!-- 页面载入时启动程序 -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- 创建带网格壁纸和曲线的一个容器 -->
<div id="graphContainer"
style="overflow:hidden;width:500px;height:241px;background:url('pic/grid.gif');cursor:default;">
</div>
</body>
</html>
mxgraph中右键和toolbar工具条的实现
4星 · 超过85%的资源 需积分: 50 77 浏览量
2015-06-29
08:54:23
上传
评论 1
收藏 171KB ZIP 举报 
demo.zip （19个子文件） 
demo mxgraph css 
common.css 3KB images 
minimize.gif 64B point.gif 0B window.gif 75B window-title.gif 275B close.gif 70B resize.gif 74B submenu.gif 56B maximize.gif 843B js mxClient.js 658KB pic 
zoom_in.png 858B zoom_out.png 847B grid.gif 56B printer.png 896B Thumbs.db 34KB funcpoint.png 750B user.png 3KB manuscan.gif 569B index.htm 3KB
评论2