AJAX Accordion Control के लिए CSS स्टाइलिंग

AJAX Accordion Control के लिए कुछ सरल CSS स्टाइलिंग नियम

ajax

AJAX एकॉर्डियन पैनल बहुत छोटा है जो AJAX टूलकिट के भाग के रूप में आता है। यह आपको बहुत सारी जानकारी को एक पृष्ठ में संघनित करने की अनुमति देते हुए बहुत सी जगह बचाता है।
इसका उपयोग करने से पहले, हम निम्नलिखित पर जाँच करने लायक हो सकते हैं। AJAX टूलकिट
नियंत्रण के लिए आपको विजुअल स्टूडियो को डाउनलोड करने और जोड़ने की आवश्यकता है, हालांकि मैं इस लेख में उस पर नहीं जाऊंगा।

नियंत्रण निम्नलिखित भागों से बना है। प्रत्येक के लिए आपकी सामग्री सामग्री टैग के बीच में जाती है।

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

यह वह कोड है जिसका उपयोग मैंने अपने लॉगिन पेज पर अकॉर्डियन पेन को स्टाइल करने के लिए किया है, CSS का उपयोग करके आपको केवल एक बार स्टाइल सेट करने की आवश्यकता है, और वह स्टाइल को CssClass = "accordion" के रूप में सेट कर रहा है। आप यह भी देख सकते हैं कि ऊपर तीन अन्य खंड सेट किए गए हैं।

इस प्रकार कोड का टूटना;

अकॉर्डियन बाहरी कंटेनर है, मैं यहां जो कुछ भी सेट कर रहा हूं वह सीमा त्रिज्या और चौड़ाई है।

CSS

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

ajax

Accordian शीर्षलेख सभी चयनित शीर्षलेखों की शैली है।

CSS

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

ajax

यह चयनित हेडर है, इसे एक अलग रंग के रूप में सेट करके उपयोगकर्ता आसानी से पहचान सकता है कि उन्होंने कौन सा टैब चुना है।

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

अब हम सामग्री क्षेत्र में कुछ स्टाइल जोड़ सकते हैं, यह चयनित टैब की पृष्ठभूमि के लिए रंग सेट करता है।

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

उपरोक्त कोड स्पष्ट रूप से केवल शुरुआत है कि आप क्या कर सकते हैं।