Projemize ekleyeceğimiz style.css dosyasında başlık, seçilen maddenin başlığı ve içerik kısımlarının nasıl görüntüleneceğini belirliyorum. Göze hoş gelmesi için bir grafik programında hazırladığım gradient geçişleri olan 3 tane gif dosyasını bu alanların zeminlerinde kullanıyorum.
style.css
.baslik {
font-size: 13px; font-family: Verdana; font-weight: bold; height:18px;
text-indent: 5px; padding: 1px; margin-top: 1px; cursor: pointer;
border-right: #ffcd70 1px solid; border-top: #ffcd70 1px solid;
border-left: #ffcd70 1px solid; border-bottom: #ffcd70 1px solid;
background-image: url(images/baslik_zemin.gif);
background-position: top; background-repeat: repeat-x;
}
.secilenBaslik {
font-size: 13px; font-family: Verdana; font-weight: bold; height:18px;
text-indent: 5px; padding: 1px; margin-top: 1px;
border-right: #ffcd70 1px solid; border-top: #ffcd70 1px solid;
border-left: #ffcd70 1px solid; border-bottom: #ffcd70 1px solid;
background-image: url(images/secilen_baslik_zemin.gif);
background-position: top; background-repeat: repeat-x;
}
.icerik {
font-size: 11px; font-family: Verdana; padding: 5px;
border-right: #ffcd70 1px solid; border-top: none;
border-left: #ffcd70 1px solid; border-bottom: #ffcd70 1px solid;
background-image: url(images/icerik_zemin.gif);
background-position: left; background-repeat: repeat-y;
}
Açık olmayan başlıkların üzerine gelindiğinde farenin simgesini değiştirmek için başlık sınıfında cursor: pointer tanımlamasını yapmak daha güzel olacaktır. Gelelim sayfamızın tasarımına. CSS dosyamıza link vereceğimiz bir aspx dosyasında Accordion'un yukarıda belirttiğimiz özelliklerini CSS dosyasında tanımladığımız sınıflarla dolduruyoruz. Geriye kalan tek şey ise AccordionPane'lerin başlık ve içeriklerin doldurmak olacaktır.
Default.aspx
<head runat="server">
<title>Accordion'un CSS ile Etkin Kullanımı</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:Accordion ID="Accordion1" runat="server" HeaderCssClass="baslik"
HeaderSelectedCssClass="secilenBaslik" ContentCssClass="icerik" Width="185">
<Panes>
<ajaxToolkit:AccordionPane ID="pane1" runat="server">
<Header>Başlık-1</Header>
<Content>İçerik-1</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="pane2" runat="server">
<Header>Başlık-2</Header>
<Content>İçerik-2</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="pane3" runat="server">
<Header>Başlık-3</Header>
<Content>İçerik-3</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</form>
</body>
Sayfayı çalıştırdığımızda Accordion kontrolünün görünümü yandaki gibi olacaktır. Burada Accordion panelerinin genişlik ve yüksekliklerine göre zemin resimlerini hazırlamamız görünümün düzgün olmasındaki en önemli etkenlerden biri olacaktır.
Yazılar - RSS
1 yorum:
Yorum Gönder