Jquery’de Sekmeler

Modern Web programcılığında arkadaki işlemler kadar sitenin görselliği de projeye büyük bir artı sağlıyor. Bunu yapmak içinde Javascript en basit ve en iyi yollardan biri.

Görsel olarak Javascript bazlı değişimler yapmak için bir sürü Framework oluşturulmuş bulunmakta. Bu yazı ile Jquery ile sekme sisteminin nasıl yapıldığını anlayıp uygulayacaksınız.

Neye İhtiyacımız Var?

Basit bir Sekme sistemi oluşturacağımız için bize JQuery Framework Dosyası ve JQuery UI Javascript dosyaları gerekiyor. UI Downloader size hangi özellikleri kullanmak istediğinizi seçme olanağı tanıyor, bu aşamada ben sadece Tabs yani sekme bölümünü seçtim. Neler gerekli olduğunu öğrendiğimize göre artık işleme başlayabiliriz.

Başlangıçta Yapılacaklar

İlk işimiz indirdiğimiz Jquery dosyalarını HTML dosyamızın bulunduğu yere kopyalamak ve ilgili HTML dosyamız içinde </head> bölümünün hemen üstüne aşağıdaki kodları yapıştırmak.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-tabs.js"></script>

Bir sonraki aşamamızda script’in döküman yüklendiğinde ne yapması gerektiğini yazıyoruz. diğer kodların hemen altına. Buradaki “#tabs” ilgili taşıyıcı div’in id’sidir.

<script>
$(document).ready(function()
{
	$("#tabs > ul").tabs();
});
</script>

Basitçe anlatmak gerekirse bu script bütün diğer dosyalar yüklendiğinde bir kereye mahsus çalışacak. Script’in istediğimiz yeri döküman içinden seçebilmesi için Div’in id olayı kullanıldı. Sistemi az çok anladığımıza göre şimdi içerik ekleyelim.

Sekmeleri Oluşturalım

Sekmeler birer div taşıyıcına bağlanacak, böylece istediğimizi script sayesinde gösterebileceğiz. Biraz önce div taşıyıcı olarak id’i “#tabs” olarak kullandığımız için burada da aşağıdaki gibi olacak.

<div id="tabs" class="tabs">
<ul>
	<li><a href="target"><span>Bir</span></a></li>
	<li><a href="target"><span>İki</span></a></li>
</ul>
</div>

Bilgiyi sekmelerin içine koymak için bir çok yol var. İlki ilgili sekmede göstermek istediğimiz bilgiyi sayfadaki farklı bir div’den çekebiliriz. Bunu yapmak için çekmek istediğimiz farklı div’in id’sini olması gerektiği gibi gerekli yere yazmalıyız. Diğer metottaysa sekmeyi div olarak deil dosya yani .html olarak çekmekten bahsedebiliriz.

Bu şekilde anlatıldığında anlamlı gelmese de yukarıdaki kodumuzu biraz değiştirerek ne demek istediğimizi anlatabiliriz.

<div id="tabs" class="tabs">
<ul>
	<li><a href="#example"><span>Örnek</span></a></li>
	<li><a href="another_file.html"><span>Diğer Dosya</span></a></li>
</ul>
        <div id="example">
        Birşeyler yazalım
        </div>
</div>

Bunu yaptıktan sonra aynı dizine birde another_file.html dosyası oluşturun ve içine aşağıdakini yazıp kaydedin.

<p>bu da diğer dosyadaki yazı</p>

HTML dosyasında yapmamız gerekenler bu kadardan ibaret. Şu anda basit şekilde oluşturulmuş sekmelerimiz bulunmakta. Bu dosyalara CSS yardımıyla şekil vermek size kalmış.

 

DAHA FAZLA İÇERİK

Google Para Dağıtmaya başlıyor Google Para Dağıtmaya başlıyor

14 Aralık 2014, Pazar

Facebook’a Etiket Arama Özelliği Facebook’a Etiket Arama Özelliği

17 Aralık 2014, Çarşamba

SİZDE YORUM YAPIN

USB Bellekten Windows 7 Yüklemek

USB Bellekten Windows 7 Yüklemek 21 Kasım 2016, Pazartesi

Windows 10 için Önemli Uyarı!

Windows 10 için Önemli Uyarı! 10 Şubat 2016, Çarşamba

Windows Store Çıkışta

Windows Store Çıkışta 5 Şubat 2016, Cuma

Windows 10 Nasıl Kurulur?

Windows 10 Nasıl Kurulur? 5 Haziran 2015, Cuma