Son zamanlarda birçok haber sitesinde de karşılaşmışsınız tab şeklinde hazırlanmış bir arayüz ile aynı anda birden fazla kategoriyi farklı tablar altında listeleniyor.
Bu uygulamamızda jquery kullanarak tab şeklindeki bir manşet sistemini asp.net kontrollerinden repeaterı kullanarak her tab'ın içine veriler çekeceğiz.
İlk olarak bir asp.net web projesi açın ardından css dosyamızı hazırlamakla başlayalım.Aşağıdaki bir css dosyasımızı oluşturalım.
*
{
margin: 0;
padding: 0;
}
body
{
font: 11pt "Verdana";margin:20px 0 0 20px;
}
#tabs
{
font-size: 90%;
margin: 20px 0;
}
#tabs ul
{
float: left;
background:#336699;
padding-top: 4px;
width:365px;
}
#tabs li
{
margin-left: 8px;
list-style: none;
}
* html #tabs li
{
display: inline;
}
#tabs li,
#tabs li a
{
float: left;
}
#tabs ul li a
{
text-decoration:none;
padding:8px;
color:#fff;
font-weight:bold;
}
#tabs ul li.active
{
background-color:#EFEFEF;
}
#tabs ul li.active a
{
color:#800;
}
#tabs div
{
background:#EFEFEF;
clear:both;
padding:20px;
float:left;
width:325px;
}
#tabs div h3
{
text-transform:uppercase;
margin-bottom:10px;
}
CSS dosyamız hazır olduktan sonra jquery ve css dosyasımızı sayfamıza import edelim.Sayfamıza ekleyeceğimiz jquery dosyasını ekten indirebilirsiniz.
<link href="stil.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<head> tagları arasına ekleyerek sayfamıza dosyalarımızı ekledik.
Jquery tarafında css dosyamızdaki yapılara özgü olarak oluşturulan jquery yapımızda aşağıdaki biçimde olacak.
<script>
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
Bu yapımızıda <head> tagları arasına yerleştirelim.
design tarafındaki işlemlerimiz henüz bitmedi şimdi de sayfamızda kullacağımız repeaterımızı belirttiğimiz tabların arasına yerleştirelim ve
veritabanımızdan hangi bilgileri almasını istiyorsak o sütunu belirtiyoruz.
<div id="tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<div id="tab-1">
<h3>Tab 1 İÇERİK</h3>
<p><asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem,"konu") %><br />
</ItemTemplate>
</asp:Repeater> </p>
</div>
<div id="tab-2">
<h3>Tab 2 İÇERİK</h3>
<p><asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem,"kisadetay") %><br />
</ItemTemplate>
</asp:Repeater> </p>
</div>
<div id="tab-3">
<h3>Tab 3 İÇERİK</h3>
<p><asp:Repeater ID="Repeater3" runat="server">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem,"uzundetay") %><br />
</ItemTemplate>
</asp:Repeater> </p>
</div>
Ben haberler tablomdaki haberlerin konu başlığını tab 1 e, kısa detayını tab 2 ye, uzun açıklamasını da tab 3 yansıttım.
Burada asıl olan kategorisel olarak haberleri listeletmek amacınız olduğu için farklı bir veritabanı yapısında benzer örneği kendinize göre geliştirebilirsiniz.
Design tarafımızdaki işimizi bitirdikten sonra kod tarafına geçiyoruz ve aşağıdaki gibi repeaterımızı bağlıyoruz.
Page_Load altına ya da çalışmanızda uygun gördüğünüz yere belirtebilirsiniz.
SqlConnection cnn = new SqlConnection(ConfigurationManager.ConnectionStrings["cnn"].ConnectionString);
SqlCommand cmd = new SqlCommand("Select * FROM haberler",cnn);
SqlDataReader dr;
DataTable dt = new DataTable();
cnn.Open();
dr = cmd.ExecuteReader();
dt.Load(dr);
cnn.Close();
Repeater1.DataSource = dt;
Repeater1.DataBind();
Repeater2.DataSource = dt;
Repeater2.DataBind();
Repeater3.DataSource = dt;
Repeater3.DataBind();
Tüm bu işlemlerin ardından jquery ile hazırladığımız ve repeater ile haberleri listelettiğimiz tab uygulamamızın sonuna gelmiş oluyoruz.
Çalışmamızın görüntüsü aşağıdaki gibi olacaktır.
jquery-1.2.6.pack.rar (15,03 kb)
Böylelikle bir çalışmamızın daha sonuna geldik.
Saygılarımla ...