ASP.NET Tutorial/Ajax/Accordion

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

What is an accordion

<%@ 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">
    <div>
       
    <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:<br />
        <asp:DropDownList id="lstBackColor" 
                          runat="server"
                          Width="194px" 
                          AutoPostBack="True">
        </asp:DropDownList>
        <br /><br />
        Choose a foreground (text) color:<br />
        <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:<br />
        <asp:DropDownList id="lstFontName" 
                          runat="server"
                          Height="22px" 
                          Width="194px" 
                          AutoPostBack="True">
        </asp:DropDownList>
        <br /><br />
        Specify a font size:<br />
        <asp:TextBox id="txtFontSize" 
                     runat="server" 
                     AutoPostBack="True">
        </asp:TextBox>
        <br /><br />
        Enter the greeting text below:<br />
        <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:<br />
        <asp:RadioButtonList id="lstBorder" runat="server"
         Height="59px" Width="177px" Font-Size="X-Small"
         AutoPostBack="True" RepeatColumns="2">
        </asp:RadioButtonList>
        <br /><br />
        <asp:CheckBox id="chkPicture" runat="server"
         Text="Add the Default Picture" AutoPostBack="True">
        </asp:CheckBox>
        </Content>
    </ajaxToolkit:AccordionPane>
  </Panes>            
</ajaxToolkit:Accordion>
</div>
    </form>
</body>
</html>
Источник — «http://nfex.ru/index.php?title=ASP.NET_Tutorial/Ajax/Accordion&oldid=3018»