CSS-Styling für die AJAX-Akkordeonsteuerung
Einige einfache CSS-Stilregeln für ein AJAX-Akkordeon-Steuerelement
AJAX
Das AJAX Accordian Panel ist ebenfalls ein tolles kleines Tool, das Teil des AJAX Toolkits ist. Es spart viel Platz und ermöglicht es Ihnen dennoch, viele Informationen auf einer einzigen Seite zu verdichten.
Bevor Sie dies verwenden, sollten Sie Folgendes überprüfen. AJAX-Toolkit
Das Steuerelement erfordert, dass Sie Visual Studio herunterladen und hinzufügen, darauf gehe ich in diesem Artikel jedoch nicht ein.
Die Steuerung besteht aus den folgenden Teilen. Ihre Inhalte werden jeweils zwischen die Inhalts-Tags eingefügt.
HTML
<asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" ContentCssClass="accordionContent" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"> <Panes> <asp:AccordionPane ID="PaneOne" runat="server" CssClass="accordion"> <Header>Pane1</Header> <Content> </Content> </asp:AccordionPane> <asp:AccordionPane ID="PaneTwo" runat="server" CssClass="accordion"> <Header>Pane2</Header> <Content> </Content> </asp:AccordionPane> </Panes></asp:Accordion>AJAX
Dies ist der Code, den ich verwendet habe, um das Akkordeon-Fenster auf meiner Anmeldeseite zu gestalten, indem Sie das CSS verwenden, müssen Sie den Stil nur einmal festlegen, und das ist das Festlegen des Stils als CssClass="accordion". Sie können auch sehen, dass oben drei weitere Abschnitte festgelegt sind.
Eine Aufschlüsselung des Codes wie folgt;
Akkordeon ist der äußere Container, alles, was ich hier einstelle, sind der Randradius und die Breite.
CSS
.accordion{width: 98%;margin: auto;border-radius: 5px;moz-border-radius: 5px;border: 1px solid #6C5A39;background-color: #DED3BE;}AJAX
Akkordeon-Kopfzeile ist der Stil für alle nicht ausgewählten Kopfzeilen.
CSS
.accordionHeader{border-radius: 5px;moz-border-radius: 5px;background-color: #DED3BE;font-weight: bold;text-align: center;padding: 0px 0px 2px 0px;}AJAX
Dies ist die ausgewählte Kopfzeile. Indem Sie diese als eine andere Farbe festlegen, kann der Benutzer leicht erkennen, welche Registerkarte er ausgewählt hat.
CSS
.accordionHeaderSelected{border-top-right-radius: 5px;border-top-left-radius: 5px;moz-border-top-right-radius: 5px;moz-border-top-left-radius: 5px;border-bottom: 1px solid #6C5A39;background-color: #D1C2A5;font-weight: bold;color: #000000;text-align: center;padding: 0px 0px 2px 0px;}AJAX
Jetzt können wir dem Inhaltsbereich etwas Styling hinzufügen, das legt die Farbe für den Hintergrund der ausgewählten Registerkarte fest.
CSS
.accordionContent{border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;moz-border-bottom-right-radius: 5px;moz-border-bottom-left-radius: 5px;background-color: White;}AJAX
Der obige Code ist offensichtlich nur der Anfang dessen, was Sie tun könnten.
