网学网为需要Ajax的朋友们搜集整理了Ajax Control Toolkit 34个服务器端控件第1/2页相关资料,希望对各位网友有所帮助!
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>
<Content>
</Content>
</AjaxToolkit:AccordionPane>
</Panes>
</AjaxToolkit:Accordion>
2. AlwaysVisibleControl
【功能概述】
AlwaysVisibleControl 是一个简单的扩展控件可以让一部分内容浮动在页面上,当滚动页面或者改变浏览器大小时总是可见的。它可以扩展任意一个Asp.net 控件,并可按照要求设置水平 竖直方向上的相对距离.
最多的应用是在线阅读的目录和不胜其烦的浮动小广告。
【细节】
(1)