前言
属性列表想必大家都不会陌生，正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的，而且很多情况下，下拉列表还不够好看，怎么办？我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框，对传入的数据进行选择的功能，感觉整体实践起来还是比较简单方便的，所以在这边跟大家分享一下。
效果图
http://www.hightopo.com/demo/propertyEditor/index.html
代码实现
拓扑图
从上面的效果图中我们可以看到，整个页面分为 3 个部分，左边的 graphView 拓扑图部分，右下角的 tableView 表格部分，以及右上角的 propertyView 属性部分。我们先把整个场景划分出来，然后再向各个部分来添加具体的内容：
gv = new ht.graph.GraphView(); var tablePane = new ht.widget.TablePane(gv.dm());//表格面板组件 propertyView = new ht.widget.PropertyView(gv.dm());//formPane是在propertyView里的，所以要先定义 var rightView = new ht.widget.SplitView(propertyView, tablePane, 'v', 0.4);//分割组件，v分为上下层，比例为0.4:0.6 rightView.getView().style.borderLeft = '1px solid #000'; var borderPane = new ht.widget.BorderPane();//边框面板组件 borderPane.setRightView(rightView, 400);//设置 borderPane 右边组件为 rightView，宽度为400 borderPane.setCenterView(gv);//设置 borderPane 中间组件为 gv borderPane.addToDOM();//将 borderPane 组件添加进 body 中