.Text中的Advanced Panel學習筆記

.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層，設定的樣式要符合<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代碼中我們可以看到這樣的代碼：
<a id="Edit_Link" onclick="ToggleVisible('Edit_Contents','Edit_LinkImage','image/toggle_gray_up.gif','image/toggle_gray_down.gif'); return false;" href="#">

<img id="Edit_LinkImage" src="image/toggle_gray_down.gif" alt="" border="0" />

</a>

    超連結標籤中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)

{    

    if (Collapsible){

                Page.RegisterClientScriptBlock(CLIENT_SCRIPT_KEY, 

                    Utilities.GetClientScriptInclude(CLIENT_SCRIPT_FILE));

            }

    base.OnPreRender(e);

}

其中，CLIENT_SCRIPT_KEY和CLIENT_SCRIPT_FILE為控制項內部定義的常量。

3. Collapsed屬性的實現

    Collapsed屬性如果為true，則一開始就不顯示內容區，該工作是通過重載Panel控制項的Render方法實現的，代碼如下：
if (Collapsed)

{                    

        _contents.Style.Add("display", "none");

    _image.ImageUrl = LinkImageCollapsed;

}

其中的_contents.Style.Add()為內容顯示層增加了style.display="none"，這樣就可以在初始化時隱藏內容區。