演示Tree小控件的图标、背景、Tip、事件、边框和其它样式,及自定义配置.
树1:自定义图标、背景树2:使用内部图标、含Checkbox的方案
事件:
树杈图: 树叶图:



1.HTML中,2个Tree的创建脚本分别如下:
<script>insertTree('AF1', 'style=hasButton,singleExpand;BackPicture=tree/back2.gif', '300px')</script>
<script>insertTree('AF2', 'border=3d; style=hasButton,hasline,hasCheckBox,showSelAlways', '300px')</script>

2.树的内容在XML文档中,可查看树1的内容树2的内容、以及树1“我的好友的”动态加载的内容。分析树1的内容,就能发现其使用了自己的图片zip包;

3.页面js中,和树相关的源码如下:
function OnReady(id)  //初始事件
{
  if(id=='AF1') {
   AF1.func('ReadXML','tree/tree1.xml');
   AF1.func('Expand','02');  //展开id为02的树节点
  }
  else if(id=='AF2') {
   AF2.func('ReadXML','tree/tree2.xml');
   AF2.func('ExpandAll','');  //全部展开
  }
}
function OnEvent(id, Event, p1, p2, p3, p4)  //树的事件
{
 var obj = document.getElementById('eveText');
 if(id=='AF1') {
  if(Event=="SelChanged")
   obj.innerHTML = "左边的Tree, id="+p1;
  else if(Event=="LazyLoad")  //动态加载
   AF1.func("ReadXML", "tree/tree3.xml \r\n " + p1);
 }
 else if(id=='AF2') {
  if(Event=="SelChanged") obj.innerHTML = "右边的Tree, id="+p1;
 }
 ...(略)
}