<% @ Page Language = "C #" autoeventwireup = "true" codefile = "accordion. aspx. cs" inherits = "ajax_accordion" %>
<% @ Register Assembly = "ajaxcontroltoolkit" namespace = "ajaxcontroltoolkit" tagprefix = "PC3" %>
<! 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> </title>
<Style type = "text/CSS">
Body
{
Color: #000000;
Background-color: # ffffff;
Font-family: tahoma,;
Font-size: 14px;
Margin: 0px;
Padding: 0px;
Text-align: center;
}
Div, form, IMG, UL, ol, Li, DL, DT, DD, P
{
Border: 0 none;
Margin: 0;
Padding: 0;
Vertical-align: middle;
}
H1, H2, H3, H4, H5, h6
{
Margin: 0;
Padding: 0;
}
Ul
{
List-style-type: none;
Margin: 0;
Padding-left: 2px;
}
Li
{
Line-Height: 18px;
}
A
{
Color: #000000;
Text-Decoration: none;
Font-size: 12px;
}
A: hover
{
Color: # f37114;
Text-Decoration: underline;
}
. Space50
{
Height: 50px;
}
. Header
{
Color: red;
}
. Content
{
Color: blue;
}
. Accordion
{
Line-Height: 30px;
Text-align: left;
Padding-left: 200px;
}
</Style>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div class = "space50">
</Div>
<Div class = "accordion">
<% -- Ajax control management -- %>
<Asp: scriptmanager id = "scriptmanager1" runat = "server">
</ASP: scriptmanager>
<C0: accordion id = "accordion1" runat = "server" selectedindex = "0" fadetransitions = "true"
Transitionduration = "250" cssclass = "myaccordion" headercssclass = "Header" contentcssclass = "content">
<Panes>
<PC3: accordionpane runat = "server">
<Header>
My Consulting
</Header>
<Content>
Independent consultation records
<Br/>
Psychological evaluation records
<Br/>
Expert analysis records
<Br/>
Feedback records
</Content>
</PC3: accordionpane>
<PC3: accordionpane id = "accordionpane1" runat = "server">
<Header>
My activities
</Header>
<Content>
My themes
<Br/>
My replies
<Br/>
My topics
<Br/>
My comments
</Content>
</PC3: accordionpane>
<PC3: accordionpane id = "accordionpane2" runat = "server">
<Header>
Physician Management
</Header>
<Content>
Friend Consultant
<Br/>
Add Consultant
<Br/>
Appointment Consultant
<Br/>
Contact Consultant
</Content>
</PC3: accordionpane>
</Panes>
</PC3: accordion>
</Div>
</Form>
</Body>
</Html>
======================================
Running result:
My Consulting Independent consultation records
Psychological evaluation records
Expert analysis records
Feedback records My activities Physician Management
Note: The Display Effect of the stacked dynamic management menu is very nice.
==================================
The additional attributes are described as follows: Accordion is the first control: 1. Accordion is an ASP. NET Ajax control similar to the Outlook toolbar that allows you to easily develop on your web page. It allows you to easily expand or close the display of a series of page elements. It is similar to the combination of multiple collapsiblepanels controls. However, within a period of time, it can only limit that you can expand only one part of the page. Each accordion control contains several accordionpane controls. The accordionpane control can be the same as the panel control, it is used as a carrier for its display content. In addition, each accordionpane has header and content, which are used to indicate its title and content respectively. The accordion control can maintain its selected status. When the page is submitted, accordion retains the page selected before submission.
It supports the following three display and layout methods: None-Accordion will automatically change the size according to the content displayed inside it during its expansion or collapse, without any restrictions. Setting the autosize attribute to none may cause other elements on the page to move up or down following the size change of accordion.
Limit-it will make the accordion control never extend its size beyond the specified height attribute. If you set the autosize attribute to limit, it may cause a situation where, the content in it needs to be rolled through the scroll bar.
Fill-it will keep the accordion Control always at the height defined by the height attribute.
The accordion control can also bind data, specify a data source through the datasource or performanceid attribute, and set the header data field (headertemplate) and content data field (contenttemplate ). Accordion can also bind data like a DataGrid. It can also bind data by setting the datasource attribute and performanceid attribute, and setting the bound template in the headertemplate and contenttemplate attributes. The accordion in the preceding example will be initialized as follows:Code. Italic attributes are optional attributes: <Ajaxtoolkit: accordion
Id = "myaccordion"
Runat = "server"
Selectedindex = "0"
Headercssclass = "accordionheader"
Headerselectedcssclass = "accordionheaderselected"
Contentcssclass = "accordioncontent"
Autosize = "NONE"
Fadetransitions = "true"
Transitionduration = "250"
Framespersecond = "40"
Requireopenedpane = "false"
Suppressheaderpostbacks = "true">
<Panes>
<Ajaxtoolkit: accordionpane
Headercssclass = "accordionheader"
Headerselectedcssclass = "accordionheaderselected"
Contentcssclass = "accordioncontent">
<Header>... <Content>... </content>
</Ajaxtoolkit: accordionpane>
.
.
.
</Panes>
<Headertemplate>... <Contenttemplate>... </contenttemplate>
</Ajaxtoolkit: accordion> selectedindex-ID of the accordionpane page when accordion is initialized
Headercssclass-CSS style for each accordionpane title. During development, we can set the default CSS style for each accordionpane title here. In addition, we can also specify its CSS style for each accordionpane.
Headerselectedcssclass-CSS style of the title when an accordionpane is selected. During development, we can set the default CSS style for each accordionpane title here. In addition, we can also specify its CSS style for each accordionpane.
Contentcssclass-the CSS style of each accordionpane content. During development, we can set the default CSS style for each accordionpane title here. In addition, we can also specify its CSS style for each accordionpane.
Fadetransitions-if set to true, the gradient will appear when the selected accordionpane changes.
Transitionduration-the time when the gradient effect is displayed in milliseconds.
Autosize-set the display and layout of accordion. You can find its description in the preceding overview.
Requireopenedpane-if set to true, the expanded accordionpane is not folded.
Suppressheaderpostbacks-if set to true, the Page Submission event triggered by clicking accordionpane is avoided.
The Set representation of PANES-accordionpane
Headertemplate-title template when data binding is used
Contenttemplate-content template when data binding is used
Datasource-Data Source
Performanceid-Data Source Control ID
Bound to XML:
<Asp: xmldatasource id = "xml1" runat = "server" datafile = "~ /App_data/carsservice. xml "XPath ="/carsservice/make "/>
<Ajaxtoolkit: accordion id = "xmlbound" runat = "server" performanceid = "xml1" fadetransitions = "true"
Headercssclass = "accordionheader" contentcssclass = "accordioncontent">
<Headertemplate>
Header: <% # eval ("name") %>
</Headertemplate>
<Contenttemplate>
Pane: <% # eval ("name") %>
</Contenttemplate>
</Ajaxtoolkit: accordion> Bound to dictionary:
<Ajaxtoolkit: accordion id = "dictionarybound" runat = "server"
Headercssclass = "accordionheader" contentcssclass = "accordioncontent">
<Headertemplate>
Header: <% # eval ("key") %>
</Headertemplate>
<Contenttemplate>
Data: <% # eval ("value") %>
</Contenttemplate>
</Ajaxtoolkit: accordion> The most useful format <Ajaxtoolkit: accordion runat = "server" selectedindex = "0" headercssclass = "accordionheader"
Contentcssclass = "accordioncontent" fadetransitions = "false" framespersecond = "40"
Transitionduration = "250" autosize = "NONE">
<Panes>
<Ajaxtoolkit: accordionpane runat = "server">
<Header>
<A href = "#"> 1. Accordion </a> <Content>
</Content>
</Ajaxtoolkit: accordionpane>
</Panes>
</Ajaxtoolkit: accordion>
