ASP.NET Tutorial/Ajax/Accordion

Материал из .Net Framework эксперт
Перейти к: навигация, поиск

What is an accordion

   <source lang="csharp">

<%@ Page Language="C#" AutoEventWireup="true"%> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %> <!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>Untitled Page</title>
   
   <style rel="stylesheet" type="text/css">

body {

   font-family: Verdana;
   font-size: small; 

} .Link {

 text-decoration: underline;
 color: Blue;

} .accordionHeader {

   border: 1px solid #2F4F4F;
   color: white;
   background-color: #2E4d7B;
   padding: 5px;
   margin-top: 5px;
   cursor: pointer;

} .accordionHeaderSelected {

   border: 1px solid #2F4F4F;
   color: white;
   background-color: #5078B3;
   padding: 5px;
   margin-top: 5px;
   cursor: pointer;

} .accordionContent {

   background-color: #D3DEEF;
   border: 1px dashed;
   border-top: none;
   padding: 5px;

}


   </style>
   

</head> <body>

   <form id="form1" runat="server">
   <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
   <ajaxToolkit:Accordion ID="Accordion1" 
                          runat="server"
                          HeaderCssClass="accordionHeader"
                          HeaderSelectedCssClass="accordionHeaderSelected"
                          ContentCssClass="accordionContent">
 <Panes>
   <ajaxToolkit:AccordionPane runat="server">
     <Header>Colors</Header>
     <Content>
       Choose a background color:
<asp:DropDownList id="lstBackColor" runat="server" Width="194px" AutoPostBack="True"> </asp:DropDownList>

Choose a foreground (text) color:
<asp:DropDownList id="lstForeColor" runat="server" Height="22px" Width="194px" AutoPostBack="True" > </asp:DropDownList> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane runat="server"> <Header>Text</Header> <Content> Choose a font name:
<asp:DropDownList id="lstFontName" runat="server" Height="22px" Width="194px" AutoPostBack="True"> </asp:DropDownList>

Specify a font size:
<asp:TextBox id="txtFontSize" runat="server" AutoPostBack="True"> </asp:TextBox>

Enter the greeting text below:
<asp:TextBox id="txtGreeting" runat="server" Height="85px" Width="240px" TextMode="MultiLine" AutoPostBack="True"> </asp:TextBox> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane> <Header>Other</Header> <Content> Choose a border style:
<asp:RadioButtonList id="lstBorder" runat="server" Height="59px" Width="177px" Font-Size="X-Small" AutoPostBack="True" RepeatColumns="2"> </asp:RadioButtonList>

<asp:CheckBox id="chkPicture" runat="server" Text="Add the Default Picture" AutoPostBack="True"> </asp:CheckBox> </Content> </ajaxToolkit:AccordionPane> </Panes>

</ajaxToolkit:Accordion>

   </form>

</body> </html></source>