如何在 Ajax Toolkit 中使用手风琴和手风琴面板控件

• 下载演示项目 - 527.43 KB

引言

您可以使用手风琴 (Accordion) 和手风琴面板 (Accordion Pane) 控件为您的 ASP.NET 应用程序增添非常酷炫的外观和感觉。我将教您如何在启用了 Ajax 的 ASP.NET 应用程序中使用这些控件。

现在开始吧。

在开始之前，请检查您是否已安装 ASP.NET Ajax 扩展 1.0 和 Ajax Controls Toolkit。您可以从 这里 下载它们。

步骤

1. 打开 Visual Studio 2005。
2. 从网站项目模板中选择 ASP.NET Ajax 启用网站。
3. 切换到您的设计模式。您将在页面上看到脚本管理器控件。
   不用理会它。
4. 从 Ajax 扩展工具箱选项卡添加一个更新面板 (Update Panel)。
5. 现在您会看到更新面板已添加到您的页面。
6. 选择该更新面板控件。
7. 现在，如果您已经添加了 Ajax Controls，则从 Ajax Control 添加手风琴控件。如果没有，则右键单击工具箱，选择“添加选项卡”。将其命名为“Ajax Controls”，然后再次右键单击新创建的选项卡内部，选择“新建项”，然后从您的硬盘驱动器中找到 AjaxControlToolKit 目录，并按照以下路径操作：C:\AjaxControlToolKit\SampleWebsite\bin（这是我的路径，您的可能不同）。现在您将看到一个名为 AjaxControlToolKit.dll 的 DLL，然后单击“确定”。
8. 控件将被添加。
9. 现在添加以下行。

代码

<cc1:AccordionID="Accordion1" runat="server"
 SelectedIndex="0" FadeTransitions="true"
 FramesPerSecond="40"TransitionDuration="250"
 AutoSize="None"ContentCssClass="Content" HeaderCssClass="HEADER" > 
<Panes>

<cc1:AccordionPane
ID="AccordionPane2" runat="server"> 

<Header> 
<a href=""onclick="return false;" class="Link" > 
Open 
</a> 
</Header> 
<Content> 
<div> 
First Content Area First Content AreaFirst Content Area First Content Area 
First Content Area</div> 
</Content> 
</cc1:AccordionPane> 
<cc1:AccordionPaneID="AccordionPane1" runat="server"> 
<Header> 
<a href=""onclick="return false;" class="Link" > 
Open 
</a> 
</Header> 
<Content> 
<div> 
Second Content Area Second ContentArea Second Content Area Second Content 
	Area Second Content Area 
</div> 
</Content> 
</cc1:AccordionPane> <cc1:AccordionPaneID="AccordionPane3" runat="server"> 
<Header> 
<a href=""onclick="return false;" class="Link" > 
Open 
</a> 
</Header> 
<Content> 
<div> 
Third Content Area Third Content AreaThird Content Area Third Content 
	Area Third Content Area 
</div> 
</Content> 
</cc1:AccordionPane> <cc1:AccordionPaneID="AccordionPane4" runat="server"> 
<Header> 
<a href=""onclick="return false;" class="Link" > 
Open 
</a> 
</Header> 
<Content> 
<div> 
Fourth Content Area Fourth Content AreaFourth Content Area 
Fourth Content Area Fourth Content Area 
</div> 
</Content> 
</cc1:AccordionPane> 
</Panes>
</cc1:Accordion> 

我已包含 *.css 文件和源代码。您可以从本文顶部的链接下载它并查看它。希望这能帮助您理解带有 Ajax.NET 的手风琴控件。

访问 http://www.exposecode.com。