[AjaxControlToolkit] CollapsiblePanelExtender- 可折起來的panel

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

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

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

 

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

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

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

 

CollapsiblePanelExtender使用上其實很簡單,

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

想漂亮點在套點CSS。

Source Code:CollapsiblePanelExtender_Sample.rar


aspx如下:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>

 

 

 

 

可以看 到,Panel1是用來決定縮放Panel2的物件,(jQuery其實應該更容易寫)

Panel2則是要隱藏跟展開的區塊。

 

CollapsiblePanelExtender屬性說明:

  • CollapseControlID:用來點的區塊,點一下就會隱藏
  • ExpandControlID:用來點的區塊,點一下就會展開
  • TargetControlID:要隱藏/展開的區塊
  • CollapsedText:隱藏panel2時的字
  • ExpandedText:展開panel2時的字
  • TextLabelID:要呈現CollapsedText與ExpandedText的Label
  • CollapsedImage: 隱藏panel2時的圖
  • ExpandedImage:展開Panel2 時的圖
  • ImageControlID:要呈現CollapsedImage與ExpandedImage的Image
  • Collapsed:一開始要隱藏還是要展開的boolean

 

畫面:

一 開始隱藏的圖:

隱藏的圖

展開後的圖:

展開的圖

你可能感兴趣的:(extend)