Merhaba arkadaşlar,
Bu makalemde 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.
Şuanda ç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ış tabiki de.Bir sonraki makalede görüşmek dileğiyle..
Sorularınızı yorum kısmından sorabilirsiniz..