AJAX Akordeon Kontrolü için CSS Stili

AJAX Akordeon Kontrolü için bazı basit CSS stil kuralları

AJAX

AJAX Accordian Panel, AJAX Toolkit'in bir parçası olarak gelen harika bir parçadır. Yine de çok fazla bilgiyi tek bir sayfada yoğunlaştırmanıza izin verirken çok yerden tasarruf sağlar.
Bunu kullanmadan önce, aşağıdakileri kontrol etmeye değer olabiliriz. AJAX Araç Seti
Kontrol, Visual Studio'yu indirmenizi ve eklemenizi gerektiriyor, yine de bu makalede buna girmeyeceğim.

Kontrol aşağıdaki bölümlerden yapılır. Her biri için içeriğiniz İçerik Etiketleri arasına girer.

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

Bu, giriş sayfamdaki akordeon bölmesine stil vermek için kullandığım koddur, CSS'yi kullanarak stili yalnızca bir kez ayarlamanız yeterlidir ve bu, stili CssClass="akordeon" olarak ayarlamaktır. Ayrıca yukarıda ayarlanmış üç bölüm daha olduğunu görebilirsiniz.

Kodun dökümü şu şekilde;

akordiyan dış kap, burada ayarladığım tek şey sınır yarıçapı ve genişlikleri.

CSS

.accordion{width: 98%;margin: auto;border-radius: 5px;moz-border-radius: 5px;border: 1px solid #6C5A39;background-color: #DED3BE;}

AJAX

Accordian başlığı, seçilmemiş tüm başlıkların stilidir.

CSS

.accordionHeader{border-radius: 5px;moz-border-radius: 5px;background-color: #DED3BE;font-weight: bold;text-align: center;padding: 0px 0px 2px 0px;}

AJAX

Bu, seçilen başlıktır, bunu farklı bir renk olarak ayarlayarak kullanıcı hangi sekmeyi seçtiğini kolayca belirleyebilir.

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

Artık içerik alanına biraz stil ekleyebiliriz, bu, seçilen sekmenin arka planının rengini belirler.

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

Yukarıdaki kod, açıkçası yapabileceklerinizin sadece başlangıcıdır.