首先我们在web.config 中
添加对AtlasControlToolKit的引用
<pages>
<controls>
<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"
tagPrefix="ajaxToolkit"/>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
</pages>
Accordion 是实现折叠效果
如图
Accordion可以包括多个Pane，每次显示一个，其他的pane折叠起来。Accordion中包含多个Accordionpane来实现其功能。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="_Default" %>
<!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>Accordion 简单应用 Page</title>
<link href="Accordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="demoarea">
<div class="demoheading">Accordion 简单应用</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table style="width: 437px; position: relative; height: 68px; left: 0px; top: 0px;">
<tr>
<td colspan="3" rowspan="3" style="width: 155px">
<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"
FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" style="position: relative;
left: 4px; top: 2px;">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header><a href="" onclick="return false;" class="accordionLink">公司简介</a></Header>
<Content>
<a href= "http://zbqy.cnblogs.com" > 北京桂圆</a> </Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header><a href="" onclick="return false;" class="accordionLink">产品展示</a></Header>
<Content>
<asp:Image ImageUrl =http://www.h-master.net/web2.0/image/(reflect)zbqy.cnblogs.comBETA.png
runat="server" SkinID="qq1" />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Header><a href="" onclick="return false;" class="accordionLink">公司排名</a></Header>
<Content>
<asp:Image ID="Image1" ImageUrl =http://www.h-master.net/web2.0/image/(reflect)zbqy.cnblogs.comBETA.png
runat="server" SkinID="qq1" />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</div>
</form>
</body>
</html>
Accordion.css
/******************************/
/**Styling information specific to individual content pages**/
/* Accordion */
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeader a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}
.accordionHeader a:hover
{
background: none;
text-decoration: underline;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
posted @ 2007-05-07 03:58
桂圆 阅读(1076)
评论(1) 编辑 收藏 网摘 所属分类:
Asp.net_Ajax控件示例