TWaver HTML5学习笔记 —— 可定制的右键菜单

来源：互联网发布：腾讯内部软件编辑：程序博客网时间：2024/06/02 21:24

一、学习内容概述：

实现一个可定制的右键菜单，可以根据实际项目需要，选择设置所需要的右键菜单。

实现思路：扩展一个右键菜单类，并提供一个添加菜单的函数（包括具体菜单的功能的实现），动态添加所需要的菜单。

二、学习内容总结：

1、扩展右键菜单类功能：

/** * 自定义右键类 * @author steven */topo.PopupMenu = function(network) {topo.PopupMenu.superClass.constructor.call(this, network);this.lastData = null;this.lastPoint = null;this.selection = null;this.network = network;this.items = [];};twaver.Util.ext('topo.PopupMenu', twaver.controls.PopupMenu, {/** * 获取最后一个选中的元素 * @author steven */onMenuShowing : function(e) {this.lastData = this.network.getSelectionModel().getLastData();this.lastPoint = this.network.getLogicalPoint(e);this.selection = this.network.getSelectionModel().getSelection();return true;},/** * 获取最后一个选中的元素 * @author steven */getLastData : function() {return this.lastData;},/** * 获取选择的元素 * @author steven */getSelection : function() {return this.selection;},/** * 菜单是否可见 * @author steven */isVisible : function(menuItem) {if (this.lastData) {if (this.lastData instanceof twaver.SubNetwork && menuItem.group === 'SubNetwork') {return true;}if (this.lastData instanceof twaver.Group && menuItem.group === 'Group') {return true;}if (this.lastData instanceof twaver.Link && menuItem.group === 'Link') {return true;}return menuItem.group === 'Element';} else {return menuItem.group === 'none';}},/** * 生成菜单 * @author steven */generateMenus : function() {if (this.items.length == 0) {return;}this.setMenuItems(this.items);},/** * 增加提供的默认拓扑菜单 * @param {topo.PopupMenu.MENU_ITEM}  menuItem 菜单项 * @param {topo.PopupMenu.MENU_GROUP} menuGroup 菜单项所在分组 * @param {String} menuLabel 菜单项名称 * @author steven */addTopoPopoupMene : function(menuItem, menuGroup, menuLabel) {var self = this;switch(menuItem) {// 添加网元case topo.PopupMenu.MENU_ITEM.ADD_NE_MENU_ITEM:var addNeItem = {label : menuLabel,group : menuGroup,action : function(menuItem) {var node = new twaver.Node();node.setName("newNode");node.setImage("route");node.setIcon("route_icon");node.setCenterLocation(self.lastPoint);self.network.getElementBox().add(node);}};this.items.push(addNeItem);break;// 删除元素case topo.PopupMenu.MENU_ITEM.DELETE_ELEMENT_MENU_ITEM:var deleteItem = {label : menuLabel,group : menuGroup,action : function(menuItem) {self.network.getElementBox().remove(self.lastData);}};this.items.push(deleteItem);break;}},});/** * 已定义菜单项 * @author steven */topo.PopupMenu.MENU_ITEM = {ADD_NE_MENU_ITEM : 0,DELETE_ELEMENT_MENU_ITEM : 1};/** * 已定义分组 * @author steven */topo.PopupMenu.MENU_GROUP = {NONE : 'none',GROUP : 'Group',LINK : 'Link',ELEMENT : 'Element',SUB_NETWORK : 'SubNetwork'};

2、在页面中使用扩展的右键菜单类：

var popupMenu = new topo.PopupMenu(network);popupMenu.addTopoPopoupMene(topo.PopupMenu.MENU_ITEM.ADD_NE_MENU_ITEM, topo.PopupMenu.MENU_GROUP.NONE, "添加网元");popupMenu.addTopoPopoupMene(topo.PopupMenu.MENU_ITEM.DELETE_ELEMENT_MENU_ITEM, topo.PopupMenu.MENU_GROUP.ELEMENT, "删除");popupMenu.generateMenus();

三、验证代码运行效果截图：

四、验证代码：

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>右键菜单</title><script type="text/javascript" src="./js/twaver.js"></script><script type="text/javascript" src="./js/topo.js"></script><script type="text/javascript">function init() {// 添加网元var box = new twaver.ElementBox();// 创建拓扑图var network = new twaver.network.Network(box);// 注册图片topo.Util.registerImage("./images/ne/route.png");topo.Util.registerImage("./images/ne/route_icon.png");var node = new twaver.Node();node.setName("ne1");node.setLocation(20, 40);node.setImage("route");node.setIcon("route_icon");box.add(node);var node2 = new twaver.Node();node2.setName("ne2");node2.setLocation(80, 80);node2.setImage("route");node2.setIcon("route_icon");box.add(node2);var link = new twaver.Link(node, node2);link.setName("ne1 -- ne2");link.setToolTip("<b> ne1 -- ne2</b>");box.add(link);// 创建网元树var tree = new twaver.controls.Tree(box);tree.setCheckMode('descendantAncestor');// 设置在网元树中只显示节点tree.setVisibleFunction(function(element) {return element instanceof twaver.Node;});// 创建表格var table = new twaver.controls.Table(box);var tablePane = new twaver.controls.TablePane(table);topo.Util.createColumn(table, 'Name', 'name', 'accessor', 'string');topo.Util.createColumn(table, 'Id', 'id', 'accessor', 'string');var popupMenu = new topo.PopupMenu(network);popupMenu.addTopoPopoupMene(topo.PopupMenu.MENU_ITEM.ADD_NE_MENU_ITEM, topo.PopupMenu.MENU_GROUP.NONE, "添加网元");popupMenu.addTopoPopoupMene(topo.PopupMenu.MENU_ITEM.DELETE_ELEMENT_MENU_ITEM, topo.PopupMenu.MENU_GROUP.ELEMENT, "删除");popupMenu.generateMenus();// 拓扑各视图布局var rightSplit = new twaver.controls.SplitPane(network, tablePane, 'vertical', 0.7);var mainSplitPane = new twaver.controls.SplitPane(tree, rightSplit, 'horizontal', 0.3);var networkDom = mainSplitPane.getView();networkDom.style.width = "100%";networkDom.style.height = "100%";document.body.appendChild(networkDom);network.getView().style.backgroundColor = "#f3f3f3";network.getView().style.cursor = "hand";window.onresize = function() {mainSplitPane.invalidate();};}</script></head><body onload="init()" style="margin:0;"></body></html>

0 0