今天开始第一个控件:Accordion,Accordion 是一个可以让你在你的 Web 页面方便地开发类似 Outlook 工具栏的 ASP.Net AJAX 控件。 它可以使得你的页面用户方便地展开或者关闭一系列页面元素的显示.
Defalult.aspx的代码如下:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
<!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">
<title>AJAX控件Accordion示例</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server" AutoSize ="None" FramesPerSecond="250"
HeaderCssClass="AccordionHeader" ContentCssClass="AccordionContent"
Height="300px" SelectedIndex="0" TransitionDuration="40" Width= "400px">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>实验1</Header>
<Content>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>实验2</Header>
<Content>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Header>实验3</Header>
<Content>
cccccccccccccccccccccccccccccc<br />cccccccccccccccccccccccccccccccccc<br />
cccccccccccccccccccccccccccccc<br />cccccccccccccccccccccccccccccccccc<br />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
<!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">
<title>AJAX控件Accordion示例</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server" AutoSize ="None" FramesPerSecond="250"
HeaderCssClass="AccordionHeader" ContentCssClass="AccordionContent"
Height="300px" SelectedIndex="0" TransitionDuration="40" Width= "400px">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>实验1</Header>
<Content>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>实验2</Header>
<Content>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Header>实验3</Header>
<Content>
cccccccccccccccccccccccccccccc<br />cccccccccccccccccccccccccccccccccc<br />
cccccccccccccccccccccccccccccc<br />cccccccccccccccccccccccccccccccccc<br />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
Accordion可设置的属性如下:
- SelectedIndex - 当 Accordion 被初始化的 AccordionPane 页面 ID
- HeaderCssClass - 每一个 AccordionPane 标题的 Css 样式。在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
- HeaderSelectedCssClass - 当某一个 AccordionPane 被选中的时候，其标题的 Css 样式。在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
- ContentCssClass - 每一个 AccordionPane 内容的 Css 样式。在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
- FadeTransitions - 如果设置为 True 那么在其选中的 AccordionPane 变化时将出现渐变的效果。
- TransitionDuration - 用毫秒表示的渐变效果显示的时间。
- AutoSize - 设置 Accordion 的显示和排版方式。
None - Accordion 在其展开或者折叠过程中，将根据它内部显示的内容自动尺寸的变化，不受到任何的条件限制。 如果将 AutoSize 属性设置为 None 它将可能造成页面上的其它元素跟随 Accordion 的尺寸变化产生向上或者向下的移动。
Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度（Height）属性之外， 如果将 AutoSize 属性设置为 Limit，可能会造成在某种情况下，它里面的内容需要通过滚动条来滚动。
Fill - 它将使得 Accordion 控件永远都保持在其高度（Height）属性规定的高度。
- RequireOpenedPane - 如果设置为 True 将可以避免当前展开的 AccordionPane 被折叠。
- SuppressHeaderPostbacks - 如果设置为 True 将可以避免 AccordionPane 的标题部分被点击触发的页面提交事件。
- Panes - AccordionPane 的集合表示
- HeaderTemplate - 当采用数据绑定方式时的标题模板
- ContentTemplate - 当采用数据绑定方式时的内容模板
- DataSource - 数据源
- DataSourceID - 数据源控件 ID
导入的样式表如下:
CSS
.AccordionHeader
{
font-weight:bold;
background:#A6D0E6;
font-family:@黑体;
font-size:16px;
border:1px solid #2F4F4F;
padding:5px;
}
.AccordionContent
{
background:#DDD;
font-family:@黑体;
font-size:16px;
border:1px solid #2F4F4F;
padding:5px;
}
{
font-weight:bold;
background:#A6D0E6;
font-family:@黑体;
font-size:16px;
border:1px solid #2F4F4F;
padding:5px;
}
.AccordionContent
{
background:#DDD;
font-family:@黑体;
font-size:16px;
border:1px solid #2F4F4F;
padding:5px;
}
最后运行效果如下:
