Today, I want to embark on the journey to learn Ajax controltoolkit. It provides many encapsulated controls that can be used directly. Today I learned the accordion control, which is a foldable control.
(1)
Introduction to important attributes of the accordion Control
A)
Requireopenedpane: Whether to disable the opened pane when you click the header in the pane of the control. If the value is true, the pane is not disabled. If the value is false, the pane is disabled.
B)
Suppressheaderpostbacks: When you click an element in the header of the pane control on the client, whether to prevent it from being returned. If the value is true, the return is blocked. If the value is false, the return is not blocked.
C)
Fadetransitions: When the value is true, the conversion Effect of Fade-in and fade-out is used; when the value is false, the standard conversion effect is used.
D)
Transitionduration: Set the conversion time (or speed ). The smaller the value, the faster the conversion. The larger the value, the slower the conversion.
E)
Framespersecond: The number of frames per second.
F)
Selectedindex: Set pane displayed during initial Page import. The value is 0, which is the first; the value is 1, which is the second.
G)
Headercssclass: Set the CSS style of the header in pane.
H)
Contentcssclass: Set the CSS style of content in pane.
(2)Use of the accordion Control
A) file-create-Project. In the Create Project dialog box, create an ASP. NET Ajax-enabled web project.
B) on the default. aspx page, drag and drop a scriptmanager control (if no scriptmanager exists ).
C) drag and drop an accordion on the page. It adds these two sentences to the "Source" of the page.
<% @ Register Assembly = "ajaxcontroltoolkit" namespace = "ajaxcontroltoolkit" tagprefix = "PC3" %>// Register the control package
// Create an accordion
<PC3: accordion id = "accordion1" runat = "server">
</PC3: accordion>
D) add pane to accordion. Add a panes tag in accordion. You can drag an accordionpane to panes or directly add accordionpane to panes. As follows:Code:
< MAID: accordion ID = " Accordion1 " Runat = " Server " >
< Panes >
< C0: accordionpane ID = " Accordionpane1 " Runat = " Server " >
< Header > ASP. NET Ajax </ Header >
< Content >
ASP. NET Ajax learning ASP. NET Ajax Learning
Learning ASP. NET Ajax learning ASP. NET Ajax learning
ASP. NET Ajax learning ASP. NET Ajax learning ASP. NET Ajax Learning
</ Content >
</ C0: accordionpane >
< C0: accordionpane ID = " Accordionpane2 " Runat = " Server " >
< Header > Accordion </ Header >
< Content >
Accordion learning accordion Learning
Accordion learning accordion Learning
Accordion learning accordion Learning
</ Content >
</ C0: accordionpane >
</ Panes >
</ PC3: accordion >
E) Add a CSS style to accordion and set some attribute values. The final code is as follows:
1 < MAID: accordion ID = " Accordion1 " Headercssclass = " Accordionheader " Contentcssclass = " Accordioncontent " Suppressheaderpostbacks = " True " Requireopenedpane = " False " Runat = " Server " >
2 < Panes >
3 < C0: accordionpane ID = " Accordionpane1 " Runat = " Server " >
4 < Header > ASP. NET Ajax </ Header >
5 < Content >
6 ASP. NET Ajax learning ASP. NET Ajax Learning
7 Learning ASP. NET Ajax learning ASP. NET Ajax learning
8 ASP. NET Ajax learning ASP. NET Ajax learning ASP. NET Ajax Learning
9 </ Content >
10 </ C0: accordionpane >
11 < C0: accordionpane ID = " Accordionpane2 " Runat = " Server " >
12 < Header > Accordion </ Header >
13 < Content >
14 Accordion learning accordion Learning
15 Accordion learning accordion Learning
16 Accordion learning accordion Learning
17 </ Content >
18 </ C0: accordionpane >
19 </ Panes >
20 </ PC3: accordion >
Final effect:
