Accordion控件
Ajax控件之Accordion
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax控件之Accordion</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body style="text-align: center">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="text-align: center">
<%-- SelectedIndex:默认打开的第一扇,FadeTransitions:淡入淡出的效果,当点击第二个Accrodion时会看到文字和背景色淡入淡出的效果
FadeTransitions ,FramesPerSecond:时间间隔如果设置小话速度会非常快 AutoSize:面板超出位置会在右侧有流动条上下移动,如果设置成null,false会把整个文字全部显示
HeaderCssClass头部ContentCssClass中间内容
--%>
<cc1:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" FadeTransitions="true" FramesPerSecond="40" TransitionDuration ="250" AutoSize="Limit" Height ="300px" Width ="400"
HeaderCssClass ="accordinHeader" ContentCssClass ="accordionContent">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="" HeaderCssClass="">
<Header>
<a href="http://blog.csdn.net/meng1986">文宇博客</a>
</Header>
<Content>
<center>
欢迎访问<asp:HyperLink ID="HyperLink1" runat ="server" NavigateUrl="http://blog.csdn.net/meng1986" Text="文宇博客" />!
</center><br />
Welcome to wenyu'Column<br />
这是我第一次使用期ajax做Accordion <br />
博客地址:http://blog.csdn.net/meng1986<br />
QQ:407504852<br />
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" HeaderCssClass="">
<Header>
<a href="http://blog.csdn.net/meng1986">文宇博客</a>
</Header>
<Content>
<center>
欢迎访问<asp:HyperLink ID="HyperLink2" runat ="server" NavigateUrl="http://blog.csdn.net/meng1986" Text="文宇博客" />!
</center><br />
Welcome to wenyu'Column<br />
这是我第一次使用期ajax做Accordion <br />
博客地址:http://blog.csdn.net/meng1986<br />
QQ:407504852<br />
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="" HeaderCssClass="">
<Header>
<a href="http://blog.csdn.net/meng1986">文宇博客</a>
</Header>
<Content>
<center>
欢迎访问<asp:HyperLink ID="HyperLink3" runat ="server" NavigateUrl="http://blog.csdn.net/meng1986" Text="文宇博客" />!
</center><br />
Welcome to wenyu'Column<br />
这是我第一次使用期ajax做Accordion <br />
博客地址:http://blog.csdn.net/meng1986<br />
QQ:407504852<br />
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</div>
</form>
</body>
</html>
StyleSheet.css
body {
}
.accordinHeader
{
border:1px solid #2F4F4F;
background-color:#A6D0E6;
font-family:@楷体_GB2312;
font-size:10px;
font-weight:bold ;
padding :5px;
margin-top:5px;
}
.accordionContent
{
border:1px dushed #2F4F4F;
background-color:#FFFEDF;
font-family:Arial;
border-top:none;
padding :5px;
padding-top:10px;
}