[AjaxControlToolkit] CollapsiblePanelExtender- 可折起來的panel

2009-07-24

14167
0

[AjaxControlToolkit]CollapsiblePanelExtender- 可折起來的panel

CollapsiblePanelExtender這個控制項的效果，在很多網頁都看的到，

就是點個bar，區塊可以隱藏跟顯示，以避免網頁上存在著過多detail資訊，或過大的圖把頁面撐高。

(感覺就像是我又跳出來啦～～我又縮回去啦～～打我啊笨蛋…)

另外一個跟CollapsiblePanelExtender很像的Extender，叫做Accordion，沒記錯的話好像翻譯成「手風琴」，就是可以有好幾折的。

差異在哪，CollapsiblePanelExtender是針對單一區塊，

而Accordion是多個區塊group起來，一次只能打開一個區塊，開第二個展開時，先前已經展開的就會折起來。

CollapsiblePanelExtender使用上其實很簡單，

這邊舉的例子，首先用兩個panel，搭配一個CollapsiblePanelExtender就可以搞定了，

想漂亮點在套點CSS。

Source Code：CollapsiblePanelExtender_Sample.rar

aspx如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<style type="text/css">
.collapsePanel {
   
    background-color:white;
    overflow:hidden;
}
 
.collapsePanelHeader
{
    background-position: #666;
    width: 100%;
    height: 30px;
    background: #C0C0C0;
    color: #CC6699;
    font-weight: bold;
}
</style>
    <title>CollapsiblePanelExtender</title>
</head>
<body>
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <div>                        
                <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanelHeader" Width="80%">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/image/exp.gif" />&nbsp;&nbsp;
                    <asp:Label ID="Label1" runat="server">展開圖片</asp:Label>
                </asp:Panel>
                <asp:Panel ID="Panel2" runat="server">                    
                    <asp:Image ID="Image2" runat="server" ImageUrl="~/image/IMG_0084.JPG" />
                </asp:Panel>
                <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="Panel1"
                    ExpandControlID="Panel1" TargetControlID="Panel2" ImageControlID="Image1"  
                    TextLabelID="Label1" CollapsedText="顯示圖片" ExpandedText="隱藏圖片" ExpandedImage="~/image/col.gif"
                    CollapsedImage="~/image/exp.gif" Collapsed="true">
                </cc1:CollapsiblePanelExtender>
                0. 基本原則 首引是防家溝通的第一步 因此好的首引(約定) 有助於之後的整體防禦計畫 <br />
                我們社團裡最通用的首引是 01 第四 這裡的教學就是介紹這種首引的方式<br />
                注: ﹝上﹞篇介紹只是 "單門牌張組合" 情況下應引哪一張牌 整副牌的首引和各引牌意義將放在﹝下﹞篇        
    </div>
    </form>
</body>
</html>