对CollapablePanel控件的改进

　　此改进是从Microsoft IE Web Controls中得到的启示。
　　在“自己写的web自定义控件”提到的web控件中，CollapablePanel控件在客户端页面中生成了相当大部分的Html代码，这影响了页面的整体美观性，也加大了页面的体积。今天，我将写的是如何使用Xml来改进此控件的显示。

　　首先，我们来作下对比：
　　原来控件在客户端生成的Html代码如下：

<div id="CollapablePanel1" PanelCssClass="panel" class="tt" style="width:175px;background-color:#FFE0C0;border-style:Solid;border-width:1px;border-color:#404000;">
    <table id="CollapablePanel1_container" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr style="height:22px;background-color:;">
            <td class="panel" onclick="CollapablePanel_Expand(0, 'CollapablePanel1');"><table style="width:100%;cursor:default;">
                <tr>
                    <td id="CollapablePanel1_text_0" style="color:Yellow;">系统菜单</td><td id="CollapablePanel1_button_0" style="width:20;"><font style='text-align:center;width:100%;font-family:Marlett;color:Yellow'>5</font></td>
                </tr>
            </table></td>
        </tr><tr>
            <td valign="top"><table cellpadding="2" border="0" style="width:100%;">
                <tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','0:0')">我的资料</a></td>
                </tr><tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','0:1')">修改密码</a></td>
                </tr><tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','0:2')">退出登录</a></td>
                </tr>
            </table></td><tr>
                <td height="1"></td>
            </tr>
        </tr><tr style="height:22px;background-color:;">
            <td class="panel" onclick="CollapablePanel_Expand(3, 'CollapablePanel1');"><table style="width:100%;cursor:default;">
                <tr>
                    <td id="CollapablePanel1_text_3" style="color:Yellow;">会员管理</td><td id="CollapablePanel1_button_3" style="width:20;"><font style='text-align:center;width:100%;font-family:Marlett;color:Yellow'>6</font></td>
                </tr>
            </table></td>
        </tr><tr style="display:none;">
            <td valign="top"><table cellpadding="2" border="0" style="width:100%;">
                <tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','1:0')">新增会员</a></td>
                </tr><tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','1:1')">会员管理</a></td>
                </tr><tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','1:2')">会员续费</a></td>
                </tr>
            </table></td><tr>
                <td height="1"></td>
            </tr>
        </tr><tr style="height:22px;background-color:;">
            <td class="panel" onclick="CollapablePanel_Expand(6, 'CollapablePanel1');"><table style="width:100%;cursor:default;">
                <tr>
                    <td id="CollapablePanel1_text_6" style="color:Yellow;">其他管理</td><td id="CollapablePanel1_button_6" style="width:20;"><font style='text-align:center;width:100%;font-family:Marlett;color:Yellow'>6</font></td>
                </tr>
            </table></td>
        </tr><tr style="display:none;">
            <td valign="top"><table cellpadding="2" border="0" style="width:100%;">
                <tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','2:0')">档案录入</a></td>
                </tr>
            </table></td><tr>
                <td height="1"></td>
            </tr>
        </tr>
    </table>
</div>

　　改进后，所生成的代码如下：

<?XML:NAMESPACE PREFIX="fsc" /><fsc:CollapablePanel ></fsc:CollapablePanel>

　　当然，在文档的末尾入多了一行：

>

　　这是根据控件的节点来创建相应的DOM对象，显示到文档中。
　　函数CollapablePanel_Create的代码如下：

function CollapablePanel_Create(element)
}

　　此函数中，根据传入的控件对象，获得它的子节点对象及相应的属性值来生成Html对象，即所得到的效果与之前的完全一致。