Ajax Control Toolkit 34個服務(wù)器端控件第1/2頁
2024-09-01 08:29:27
供稿：網(wǎng)友
1. Accordion
【功能概述】
Accordion可以讓你設(shè)計多個panel 并且一次只顯示一個Panel .在頁面上的顯示效果就像是使用了多個CollapsiblePanels只不過每一次只展開其中一個CollapsiblePanel.Accordion控件內(nèi)部包含了若干個AccordionPane，每一個AccordionPane的template里包括了對其Header和Content的定義。我們可以在后臺代碼中通過SelectedIndex屬性取得當(dāng)前展開的哪一個Panel，還可以控制哪一個Panel展開。
經(jīng)常可以見到類似的效果，比如QQ、Msn好友分類的折疊效果。
【細(xì)節(jié)】
(1)不要把Accordion放在Table中而又把 FadeTransitions 設(shè)置為True，這將引起布局混亂
(2) 在AccordionPane模板中的Content中可以定義任何Web元素，表現(xiàn)的就像一個容器
(3) AccordionPane內(nèi)容模板自動改變大小有三種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()的方式來實(shí)現(xiàn)具體某一個Behavior的訪問和修改.
var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');這種寫法是不好的，我們在自動測試的頁面中發(fā)現(xiàn)了更好的寫法： 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>
