| 演示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;
     }
     ...(略)
    }