Ajax Toolkitle gelen Accordion nesnesinin kullanımını anlatmaya calısacagım. Toolboxtaki bu nesne sayesinde sayfalarımızda güzel menüler oluşturabiliriz..

Sayfamızın Source kısmına geleceğiz. Tüm dizaynı kod bölümünden yapacağız. Öncelikle en üste Script Manager atıyoruz. Tüm Ajax uygulamalarımız için bu böyle biliyorsunuz.
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”/>

Hemen sonrasında accordionumuzu ekliyoruz. Bunu istersek kodla yapabiliriz. Ya da ToolBox’ımızdan ekleyedebiliriz.

Eklediğimizde ilk görünümü ;

<cc1:Accordion ID="Accordion2" runat="server">                </cc1:Accordion>
gibi olacaktır. Fakat bunu şu şekilde düzenleyebiliriz.
<cc1:Accordion  ID="Accordion1"  runat="server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
FadeTransitions="true"
FramesPerSecond="40"
TransitionDuration="250"
AutoSize="None">
</cc1:Accordion>

Değişiklikleri yaptıysak accordionumuzun çerçevesi hazırdır şimdi panellerimizi ekleyerek accordionumuzu tamamlayalım..

<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<cc1:Accordion
ID="Accordion1"
runat="server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
FadeTransitions="true"
FramesPerSecond="40"
TransitionDuration="250"
AutoSize="None">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header>Başlık 1</Header><%--Başlık--%>
<Content>Panel 1</Content><%--İçerik--%>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header>Başlık 2</Header>
<Content>Panel 2</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane3" runat="server">
<Header>Başlık 3</Header>
<Content>Panel 3</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane4" runat="server">
<Header>Başlık 4</Header>
<Content>Panel 4</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>

Eğer AccordionPanelerimizi eklediysek işimiz bitmiştir. Gördüğünüz üzere her paneli ayrı renklerdirdim istediğiniz kadar panel ekleyebilirsiniz veya silebilirsiniz. F5 yaparak projemizi çalıştıralım. Göreceğimiz üzre görsellikten yoksun bir Accordionumuz var.Projemize sağ tıklayarak Add > New Item diyerek 1 adet StyleSheet ekliyoruz bu bilindik bir css dosyasıdır. İsmini style.css olarak verebilirsiniz. Accordionumuzun görsel kısmını bu css dosyamızda tanımlayacağız.

.accordionContent{
background-color: #C0C0C0;
border: thin dashed #808080;
font-size: medium;
font-family: calibri;
}

.accordionHeader{
font-family: calibri;
font-size: medium;
background-color: #008080;
border: thin solid #808080;
}

Şimdi ise oluşturduğumuz bu css dosyasını projemızde tanımlatmalıyız.Bunun için sayfamızdaki <head></head> tagları arasına

<link href="style.css" rel="stylesheet" type="text/css" />

Ekleyerek css’imizide tanımlatıyoruz.

Şu anda çalıştırdığınızda küçük ama bizim bir accordion çıkacaktır, bunu büyüretek kendi accordionlarınızı yapabilirsiniz; bu şekilde menüler, manşet sistemleri ve hatta direk siteler yapabilirsiniz, aslında farklı da olabilir o sizin hayal gücünüze kalmış tabii ki…

The post Asp.net de Ajax Accordion Nesnesinin Kullanımı first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.