.Text中的Advanced Panel学习笔记

来源：互联网发布：软件测试工程师编辑：程序博客网时间：2024/05/18 01:49

.Text中的用户文章管理界面是使用Advanced Panel的主要界面。Advanced Panel与普通WebPanel相比，多提供一个Header栏，并且可以不使用任何代码实现折叠[Collapsing]功能，这是该控件最有特色的地方。

控件常用属性
1. Collapsible属性
    该属性为bool型，如果为true，该控件会在右侧显示一个折叠按钮，用于显示或隐藏Panel所包含的内容。否则不显示按钮，该控件变为不可折叠的panel。
2. Collapsed属性
    该属性为bool型，默认值为false，初始化时会显示panel容器中的所有内容；如果为true，初始化时，panel容器中的内容不会显示出来。如果为true，显示效果如下：

[图1]
图中，只能看到Panel的Header，但看不到Panel具体内容，只有点击右侧的折叠切换按钮才可以看到。
3. LinkBeforeHeader属性
    该属性为bool型，默认值为false。如果为false，右面的折叠按钮会显示在Header的右下方，效果如图2

[图2]
    如果为true，则像图1一样显示折叠按钮
4. HeaderText属性
    该属性为string型，用于设置Header标题的内容，例如图2中的HeaderText的值为Edit Post
5. LinkImageCollapsed属性
    该属性为string型，用于设置折叠按钮处于“折叠”状态的图片路径。
6. LinkImage属性
    该属性为string型，用于设置折叠按钮处于“展开”状态的图片路径。
7. BodyCssClass属性
    该属性为string型，用于设置内容显示区的样式。注意，由于内容显示区的实际上是一个div层，设置的样式要符合

的属性，不要出现不能设置的属性。.Text中的BodyCssClass="Edit"，设置如下：

div.Edit {

color: #333333;

border-bottom: 1px solid #AAAAAA;

margin-bottom: 8px;

padding: 4px 12px;

background: #f5f5f5;

}

当然你也可以设置一些其他属性如border-top[上边框], border-left [左边框], border-right[右边框]等。
8. DisplayHeader属性
该属性为bool型，用于设置是否显示Header栏
9. HeaderCssClass属性
该属性为string型，用于设置Header的样式。.Text中，HeaderCssClass="CollapsibleTitle"，设置如下：

div.CollapsibleTitle {

font-size: 105%;

background: #E5E5E5;

border-top: 1px solid #AAAAAA;

border-bottom: 1px dashed #AAAAAA;

font-weight: bold;

color: #333333;

width: auto;

padding: 2px 12px;

margin: 12px 0px 0px 0px;

clear: left;

}

其中我们可以看到border-top: solid，即上边框为实线，border-bottom: dashed，即下边框为虚线。

控件技术分析
1. Panel原理
Panel本身其实就是一个div层，不管是VS自带的WebPanel还是Advanced Panel都是如此。
2. 折叠效果实现
折叠按钮是一个关键，在最后生成的html代码中我们可以看到这样的代码：

超链接标签中onclick被重载，一旦按钮按下，调用ToggleVisible()函数。让我们来看看ToggleVisible函数的实现：

function ToggleVisible(targetID, imageID, linkImage, linkImageCollapsed)

{

if (document.getElementById){

target = document.getElementById(targetID);

if (target.style.display == "none") {

target.style.display = "";

} else {

target.style.display = "none";

}

if (linkImageCollapsed != "") {

image = document.getElementById(imageID);

if (target.style.display == "none") {

image.src = linkImageCollapsed;

} else {

image.src = linkImage;

}

其中，参数targetID指定内容显示区的id，即div层的id，.Text中为Edit_Contents。参数imageID指定显示出来的折叠按钮的图片id。
该函数通过javascript中的getElementById获得特定html元素的指针，从而控制相应的html元素。至于显示和隐藏内容是通过修改html元素的style.display属性实现的，当style.display="none"时，则不显示，如果style.display=""，则显示。

其实，在本控件中，ToggleVisible是动态装载的，该函数放在uicontrols.js文件中，通过重载Panel控件的OnPreRender事件可以完成javascript的动态加载，具体方法可以见《ASP.NET服务器控件与组件开发》。装载代码如下：

protected override void OnPreRender(EventArgs e)

{