您的位置：首页 > Web前端 > HTML5

TWaver HTML5学习笔记 —— 动态设置网元样式

2014-03-23 17:17 447 查看

一、学习内容概述：

学习如何在拓扑图中动态设置网元的样式。

二、学习内容总结：

1、添加属性表格：

1）、属性表格定义：使用twaver.controls.PropertySheet类，例如：

var nodeStylePropertySheet = new twaver.controls.PropertySheet();

2）、设置属性表格可编辑：setEditable(true)

nodeStylePropertySheet.setEditable(true);

3）、添加属性表格关联的对象及关联事件：

var nodeStyleData = new twaver.Element();
var propertyBox = nodeStylePropertySheet.getPropertyBox();
topo.Util.addClientProperty(propertyBox, "label.color").setEnumInfo(['black', 'red']);
nodeStyleData.setClient("label.color", "black");
nodeStylePropertySheet.getDataBox().add(nodeStyleData);
nodeStylePropertySheet.getDataBox().getSelectionModel().setSelection(nodeStyleData);
nodeStylePropertySheet.getDataBox().addDataPropertyChangeListener(function handlePropertyChange(e) {
var name = topo.Util.getPropertyName(e);
network.getElementBox().forEach(function(element) {
if ( element instanceof twaver.Node || element instanceof twaver.Link) {
element.setStyle(name, e.newValue);
}
});
}, this);

4）、添加各种类型的属性参考（代码来源于demo）：

var map = { '': 'None', 'default': 'Default', 'children': 'Children', 'descendant': 'Descendant', 'descendantAncestor': 'Descendant and Ancestor' };
demo.Util.addClientProperty(propertyBox, "check.mode")
.setEnumInfo({ map: map, values: ['', 'default', 'children', 'descendant', 'descendantAncestor'] });
demo.Util.addClientProperty(propertyBox, "checkable.function").setEnumInfo(['Leaf', 'Category', 'Check Network', 'Check All']);
demo.Util.addClientProperty(propertyBox, "unCheckable.style").setEnumInfo(['none', 'disabled']);
demo.Util.addClientProperty(propertyBox, "show.icon").setValueType('boolean');
demo.Util.addClientProperty(propertyBox, "layout.type").setEnumInfo(demo.LAYOUT_TYPE);

this.data.setClient("check.mode", this.tree.isCheckMode());
this.data.setClient("checkable.function", 'Check All');
this.data.setClient("unCheckable.style", this.tree.getUncheckableStyle());
this.data.setClient("show.icon", true);
this.data.setClient("layout.type", 'round');

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

四、验证代码：

<!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, 30);
node.setImage("route");
node.setIcon("route_icon");
box.add(node);
var node2 = new twaver.Node();
node2.setName("ne2");
node2.setLocation(80, 150);
node2.setImage("route");
node2.setStyle("label.color", "black");
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;
});

// 存储网元样式的变更的sheet页

var nodeStyleData = new twaver.Element();
var nodeStylePropertySheet = new twaver.controls.PropertySheet();
nodeStylePropertySheet.setEditable(true);
var propertyBox = nodeStylePropertySheet.getPropertyBox();
topo.Util.addClientProperty(propertyBox, "label.color").setEnumInfo(['black', 'red']);
nodeStyleData.setClient("label.color", "black");
nodeStylePropertySheet.getDataBox().add(nodeStyleData);
nodeStylePropertySheet.getDataBox().getSelectionModel().setSelection(nodeStyleData);
nodeStylePropertySheet.getDataBox().addDataPropertyChangeListener(function handlePropertyChange(e) {
var name = topo.Util.getPropertyName(e);
network.getElementBox().forEach(function(element) {
if ( element instanceof twaver.Node || element instanceof twaver.Link) {
element.setStyle(name, e.newValue);
}
});
}, this);

// 拓扑各视图布局
var rightSplit = new twaver.controls.SplitPane(network, nodeStylePropertySheet, '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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： TWaver html5 javascript 动态样式

相关文章推荐

新的分享

章节导航