JQuery TabPanel Uygulaması
Asp.Net projelerinizde AjaxControlToolkit.Dll 'lerinin sahip olduğu TabContainer, TabPanel özelliğini kullanamayacağınız zamanlarda JQuery'nin basit ve sade bir şekilde kullanılan ve aynı zamanda tasarlanabilen Tab Panel özelliğini tercih edebilirsiniz.
Tasarımı için basit bir CSS File hazırlayabilirsiniz. Uygulamamız için hazırlanmış olan Css File 'ı sizlere örnek olması açısından aşağıda paylaşıyor olacağım. JQuery-1.3.2.min.Js dosyasını internetten hazır bir şekilde indirebilirsiniz. Kendi uygulamamız içinde Css dosyasından yardım alarak bir JavaScript dosyası oluşturabiliriz.
İşin Asp kod dizaynı tarafına geldiğimizde hazırlamış olduğumu css ve js dosyalarımızı Html tarafında etiketler arasında çağırıyoruz. Burada kullanmış olduğumuz, TabPanel(0) 'da ki sıfır, 0.indexten başlatıyoruz, yani bizim belirtmiş olduğumuz ilk tab'tan başlamasını sağlıyoruz. dilerseniz uygulamalarınıza göre istediğiniz tab'tan başlatabilmek için o tab'ın index numarasını vermeniz yeterli olacaktır. Yukarıda da gördüğünüz gibi ilk div tagları arasında sizin tab'larınızla ilgili bilgilerin girebileceği bir düzenek hazırlanmıştır. Burada 5. satırda kullandığımız ifade ile her defasında tablar arası geçiş yapıldığında kendisini refreshleyebilmesi amaçlanmıştır. İkinci div tag'larında ise her bir tab'a ait olan uygulamanıza ekleyeceğiniz içerikleri buraya aktarabilrsiniz.
Şimdi dilerseniz işe Css ve JS file'larını hazırlamakla başlayalım ve ardından Aspx ile hazırlanacak olan Web Form'mumuzun dizaynı ile ilgili kodları yazmaya başlayalım.
TabPanel.Css Kaynak Kodları;
.tabPanel {
font-size: 11px;
}
.tabHeader {
border-bottom: 2px solid #333;
}
.tabHeader-item {
background-color:#ccc;
float:left;
padding:3px;
margin-right:5px;
cursor:pointer;
}
.tabHeader-item-active {
background-color:#333;
float:left;
padding:5px;
margin-right:5px;
cursor:pointer;
color:#fff;
}
.tabContent {
padding: 4px;
}
TabPanel.Js Kaynak Kodları ;
jQuery.fn.TabPanel = function (selected) {
jQuery(this).addClass("tabPanel");
var tabHeader = jQuery(this).children().get(0);
jQuery(tabHeader).addClass("tabHeader");
jQuery(tabHeader).children().addClass("tabHeader-item");
var hdSize = jQuery(tabHeader).children().length;
var clearDiv = jQuery(tabHeader).children().get(hdSize-1);
jQuery(clearDiv).removeClass("tabHeader-item");
var selectedItem = jQuery(tabHeader).children().get(selected);
jQuery(selectedItem).addClass("tabHeader-item-active");
var tabContend = jQuery(this).children().get(1);
jQuery(tabContend).children().hide();
jQuery(tabContend).children().addClass("tabContent");
var selectedTab = jQuery(tabContend).children().get(selected);
jQuery(selectedTab).show();
jQuery(tabHeader).children().click(function() {
jQuery(tabHeader).children().removeClass("tabHeader-item-active");
$(this).addClass("tabHeader-item-active");
var indx = jQuery(tabHeader).children().index($(this));
jQuery(tabContend).children().hide();
var selectedTab = jQuery(tabContend).children().get(indx);
jQuery(selectedTab).show();
});
}
Videolar.Aspx Kaynak Kodları ;
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Videolar.aspx.cs" Inherits="Videolar" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="TabPanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="tabPanel.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabPanel1').TabPanel(0);
});
</script>
</head> <body> <div id="tabPanel1"> <div> <div>Açılış Konuşmaları</div> <div>İş Kritik Güven</div> <div>Atılım Yaratan İş Zekası</div> <div>Dene Keşfet</div> <div style="clear:both"></div> </div> <div> <div> <table> <tr> <td> <a href="VideoDetay.aspx?videono=cab23e99-718a-4687-8bbf-42ca4c357cdd"> <img alt="" src="Videolar/15.jpg" /></a> </td> <td> </td> <td></td> <td> </td></tr> <tr> <td>SQL 2012 Açılış Konuşmaları</td> <td></td> <td></td> <td></td> </tr> </table></div> <div> <table> <tr> <td> <a href="VideoDetay.aspx?videono=bd4124d6-8f48-4520-89db-572c55c91085"> <img alt="" src="Videolar/05.jpg" /> </a> </td> <td> <a href="VideoDetay.aspx?videono=06a985ba-05e7-47fb-9580-b88ac04b6a1b"> <img alt="" src="Videolar/10.jpg" /></a> </td> <td> <a href="VideoDetay.aspx?videono=40d9485a-c214-4699-9331-9ef17dbf7db8"> <img alt="" src="Videolar/13.jpg" /> </a> </td> <td> <a href="VideoDetay.aspx?videono=1f5f1af2-b795-4675-a686-8efb3635be15"> <img alt="" src="Videolar/14.jpg" /></a> </td> </tr> <tr> <td>SQL Azure ile Veri Senkronizasyon ve Fedarasyonu</td> <td>Distributed Replay</td> <td>SQL Server 2012 Performans Yenilikleri</td> <td>SQL Server 2012 ve İş Kritik Güvenlik</td> </tr> </table></div> <div> <table> <tr> <td> <a href="VideoDetay.aspx?videono=8d023cd1-6620-44c7-b96a-354daffc67de"> <img alt="" src="Videolar/02.jpg" /></a> </td> <td> <a href="VideoDetay.aspx?videono=7ce0ed67-9e4e-4ab6-aaf4-5d4160d6b5e3"> <img alt="" src="Videolar/06.jpg" /></a> </td> <td> <a href="VideoDetay.aspx?videono=1b91f456-02a6-44f0-93e4-a06a31000a5d"> <img alt="" src="Videolar/09.jpg" /></a> </td> <td> <a href="VideoDetay.aspx?videono=d0f0473a-d44f-4348-9e56-d4e2e1095928"> <img alt="" src="Videolar/11.jpg" /></a> </td> </tr> <tr> <td>PowerView ile Son Kullanıcıları Güçlendirin</td> <td>Güvenilir ve Tutarlı Veri - Master Data Services</td> <td>SQL Server 2012 için neden EMC</td> <td>Microsoft Veri Ambarı Çözümleri</td> </tr> <tr> <td> <a href="VideoDetay.aspx?videono=405e496a-2b8d-4fb2-a8cd-000cf2e0b894"> <img alt="" src="Videolar/16.jpg" /></a> </td> <td></td> <td></td> <td></td> </tr> <tr> <td>Microsoft Çözümleri ve Yol Haritası </td> <td></td> <td></td> <td></td> </tr> </table></div> <div> <table> <tr> <td> <a href="VideoDetay.aspx?videono=d43c2708-4594-42fa-8e65-1e6c4f971e5f"> <img alt="" src="Videolar/01.jpg" /></a> </td> <td> <a href="VideoDetay.aspx?videono=1c9c8cd6-8d31-494c-909b-356cd5378b07"> <img alt="" src="Videolar/03.jpg" /></a> </td> <td> <a href="VideoDetay.aspx?videono=b8c783d3-a262-4845-8c7f-50849ac453ec"> <img alt="" src="Videolar/04.jpg" /></a> </td> <td> <a href="VideoDetay.aspx?videono=3f082b46-1810-4c5a-bc40-7fe16045aaee"> <img alt="" src="Videolar/07.jpg" /></a> </td> </tr> <tr> <td>Data Quality Service Hands-on-Lab</td> <td>Powerview ile Dashboard Tasarımı</td> <td>Yüksek Süreklilik - Always On Demo</td> <td>Yeni Nesil Veritabanı Geliştirme Araçları</td> </tr> <tr> <td> <a href="VideoDetay.aspx?videono=f8ad5d97-0f18-4406-b00b-8c684ba0e096"> <img alt="" src="Videolar/08.jpg" /></a> </td> <td> <a href="VideoDetay.aspx?videono=1a2ce105-56e6-4d4b-9840-fb7c2c1dc2d8"> <img alt="" src="Videolar/12.jpg" /></a> </td> <td> </td> <td> </td> </tr> <tr> <td>Yeni Güvenlik Özellikleri Hands-on-lab</td> <td>Master Data Services</td> <td></td> <td></td> </tr> </table></div> </div> </div> </body> </html> Jquery-1.3.2.min.js ile ilgii JavaScript File 'ı google'da arattığınızda herhangi birini indirirek projenize dahil edebilirsiniz. Şimdilik bu linki kullanabilirsiniz ; http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn
Uygulamanın Ekran Görüntüsü ;
Görüldüğü gibi tab'lar arasında dolaştıkça bizim Div tag'ları arasında belirtmiş olduğumuz Table özelliklerini kullanarak hazırladığımız içerikler bulunacaktır. Keyifli Çalışmalar Dilerim.
Yorumlar