Ajax Control Toolkit 34個服務器端控件第1/2頁
2024-09-01 08:29:27
供稿：網友
1. Accordion
【功能概述】
Accordion可以讓你設計多個panel 并且一次只顯示一個Panel .在頁面上的顯示效果就像是使用了多個CollapsiblePanels只不過每一次只展開其中一個CollapsiblePanel.Accordion控件內部包含了若干個AccordionPane，每一個AccordionPane的template里包括了對其Header和Content的定義。我們可以在后臺代碼中通過SelectedIndex屬性取得當前展開的哪一個Panel，還可以控制哪一個Panel展開。
經?？梢砸姷筋愃频男Ч?，比如QQ、Msn好友分類的折疊效果。
【細節】
(1)不要把Accordion放在Table中而又把 FadeTransitions 設置為True，這將引起布局混亂
(2) 在AccordionPane模板中的Content中可以定義任何Web元素，表現的就像一個容器
(3) AccordionPane內容模板自動改變大小有三種AutoSize modes ：None(推薦) Limit Fill
(4) $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender')這里找到的是Behavior.什么是Behavior呢？在Asp.net Ajax框架中包含一組動作并完成一個功能. Accordion的一個Behavior就是淡入淡出.
找到Behavior的引用，behavior.set_FadeTransitions() behavior.get_FadeTransitions()的方式來實現具體某一個Behavior的訪問和修改.
var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');這種寫法是不好的，我們在自動測試的頁面中發現了更好的寫法： var behavior=$find("<%= MyAccordion.ClientID %>_AccordionExtender");
【代碼示意】
<script language="javascript" type="text/javascript">
function toggleFade() {
var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
if (behavior) {
behavior.set_FadeTransitions(!behavior.get_FadeTransitions());
}
}
function changeAutoSize() {
var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
var ctrl = $get('autosize'); //這里找的是下拉列表控件,不是Behavior
if (behavior) {
var size = 'None'; // 這里順便看看怎么使用Select
switch (ctrl.selectedIndex) {
case 0 :
behavior.get_element().style.height = 'auto';
size = AjaxControlToolkit.AutoSize.None;
break;
case 1 :
behavior.get_element().style.height = '400px';
size = AjaxControlToolkit.AutoSize.Fill;
break;
case 2 :
behavior.get_element().style.height = '400px';
size = AjaxControlToolkit.AutoSize.Limit;
break;
}
behavior.set_AutoSize(size);
}
if (document.focus) {
document.focus();
}
}
</script>
<AjaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None">
<Panes>
<AjaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<a href="" onclick="return false;" class="accordionLink">1. Accordion</a></Header>
