Introduction:
The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.
Description:
It also supports three AutoSize modes so it can fit in a variety of layouts.
The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.
Description:
It also supports three AutoSize modes so it can fit in a variety of layouts.
None
- The Accordion grows/shrinks without restriction. This can cause other elements
on your page to move up and down with it.
Limit
- The Accordion never grows larger than the value specified by its Height
property. This will cause the content to scroll if it is too large to be
displayed.
Fill
- The Accordion always stays the exact same size as its Height property. This
will cause the content to be expanded or shrunk if it isn't the right size.
The
Accordion is written using an extender like most of the other extenders in the
AJAX Control Toolkit. The extender expects its input in a very specific
hierarchy of container elements (like divs), so the Accordion and AccordionPane
web controls are used to generate the expected input for the extender. The
extender can also be used on its own if you provide it appropriate input.
|
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ajax
Accordion and AccordionPane - How to use Accordion in asp.net ajax</title>
<style type="text/css">
.HeaderCSS
{
color:
Snow;
background-color:
Crimson;
font-size:
medium;
border:
solid 1px salmon;
font-weight:
bold;
}
.HeaderSelectedCSS
{
color:
Snow;
background-color:
OrangeRed;
font-weight:
bold;
font-style:
italic;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color: DarkSeaGreen; font-style:
italic;">
Ajax Control Toolkit Example:
Using Accordion</h2>
<hr width="450" align="left" color="DarkSeaGreen" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion runat="server" ID="Accordion1" HeaderCssClass="HeaderCSS" HeaderSelectedCssClass="HeaderSelectedCSS"
Width="500" BorderColor="Orange" BorderWidth="2">
<Panes>
<cc1:AccordionPane runat="server" ID="AccordionPane1">
<Header>
Red Orchid</Header>
<Content>
<asp:Image ID="Image1"
runat="server"
ImageUrl="~/Images/RedOrchid.jpg"
Width="200"
/>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane runat="server" ID="AccordionPane2">
<Header>
Green Orchid</Header>
<Content>
<asp:Image ID="Image2"
runat="server"
ImageUrl="~/Images/GreenOrchid.jpg"
/>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane runat="server" ID="AccordionPane3">
<Header>
Blue Orchid</Header>
<Content>
<asp:Image ID="Image3"
runat="server"
ImageUrl="~/Images/BlueOrchid.jpg"
/>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</div>
</form>
</body>
</html>
|
0 comments :
Post a Comment