CSTABS
Daha önce
jQuery ile basit bir tab uygulaması yapıyoruz
başlıklı yazımda sizlere jQuery ile basit bir tab uygulaması geliştirmeyi
göstermiştim. Bunu güzel bir tasarım altında geliştirdim ve şimdi sizlere
sunuyorum.
Uygulamayı Internet Explorer ve Firefox tarayıcılarında denedim her ikisindede başarılı bir biçimde çalıştı. Bunun yanı sıra diğer AJAX kütüphaneleri ilede çakışmayacak biçimde kodladım ve şunuda belirtmek istiyorum bu uygulamayı ihityacımdan dolayı kodladım şuana kadar bir çok tab uygulaması denedim bunlardan en iyisi Yahoo tarafından geliştirilen tab uygulamasıydı. Diğerlerinde her seferinde mutlaka bir hata aldım veya sayfamı yavaşlattı. Anasayfamda da bu uygulamayı kullandığımı görebilirsiniz.
Birazda özelliklerinden bahsedelim. Uygulamanın üç adet geçiş bulunuyor. Bunların ikisi efekt biri ise efektsiz geçiş. Eğer tab içerisinde fazla veri göstericekseniz efektsiz geçişi tavsiye ederim çünkü bende anasayfamda efektsiz geçiş kullanıyorum.
Uygulamanın sitedeki tanıtım sayfasına buradan ulaşabilirsiniz
Uygulamanın kodlarını buradan indirebilirsiniz
Kodlar diğer tab uygulamalarına göre biraz daha fazla fakat verimi konusunda memnun kalacağınıza eminim. Şimdi kodlara ve geçiş efektlerini ayarlama konusuna göz atalım.
<head>...<head> kodları arasına dahil etmeniz gereken kodlar;
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="cstabs1.1.js"></script> <link rel="stylesheet" href="cstabs1.1-style.css" type="text/css" media="screen" />
Uygulamanın kendi kodları;
<!-- Codersstuff.com Tab -->
<div id="cs"> <div id="cstabhead">Codersstuff.com</div> <ul class="cstabs"> <li><a class="1" onclick="tabslide(1,'3');">Son yazılar</a></li> <li><a class="2" onclick="tabslide(2,'2');">Yazılımcılık</a></li> <li><a class="3" onclick="tabslide(3,'1');">Tasarım</a></li> </ul> <div class="tab-content"> <div class="tab" id="1"> Tab1 in içeriği </div> <div class="tab" id="2"> Tab2 nin içeriği </div> <div class="tab" id="3"> Tab3 ün içeriği </div> </div> </div> <!-- Codersstuff.com Tab -->
Yukarıda gördüğünüz kodlar hakkında söylemek istediğim birkaç şey var öncelikle onclick="tabslide($x,'$y');" koduna değinelim.
$x : Gördüğünüz gibi cstabs sınıfın altındaki listeleme kodlarının sınıfları, $x değeri ve tab-content sıfını altındaki tab sınıflı id değerleri 1,2,3 şeklinde gitmiş bu demek oluyorki hepsi birbirleriyle bağlantılı yeni bir tab eklemek isterseniz bu düzene göre eklemelisiniz.
Şimdi gelelim efektli ve efektsiz geçişlere. onclick="tabslide($x,'$y');" burada efekti ayarlayan değişken $y dir. Bu değere 1 veya 2 atarsanız efekli bir geçiş elde edersiniz 3 değeri ise size efektsiz bir geçiş sunar. Aşağıdaki örnekte üç değeride atadık.
Diğer örnekler;
Codersstuff.com
1
Ajax tekniği aşağıdaki teknolojileri kullanır: * Bilgiyi biçimlendirmek ve görüntüsünü değiştirmek için XHTML (ya da HTML) ve CSS. * Görüntülenecek bilgiyi dinamik olarak göstermek ve onunla etkileşimli çalışmak için özellikle JavaScript ve JScript gibi ECMAScript olan kullanıcı tarafındaki bir scripting dili yardımıyla erişilebilen DOM. * Web sunucusu ile bilgi değiş tokuşunda kullanılan XMLHttpRequest objesi. Bazı Ajax frameworklerde ve bazı durumlarda web sunucusuyla bilgi alışverişi için XMLHttpRequest yerine IFrame de kullanılır; diğer uygulamalarda ise dinamik olarak eklenen JavaScript TAG'leri de kullanılabilir. * Kullanıcıyla sunucu arasındaki bilgi alışverişlerinde genelde XML formatı kullanılır. Önceden hazırlanmış HTML, düz metin, JSON ve hatta EBML dahi olmak üzere herhangi bir format da kullanılabilir. Bu tip dosyalar sunucu tarafında herhangi bir script (PHP, ASP vs.) ile bile üretilmiş olabilir. * DHTML, LAMP ve SPA gibilerin aksine Ajax kendi başına bir teknoloji değildir, ancak terim birçok teknolojinin bir bütün olarak kullanıldığını ifade eder.
2
Ajax tekniği aşağıdaki teknolojileri kullanır: * Bilgiyi biçimlendirmek ve görüntüsünü değiştirmek için XHTML (ya da HTML) ve CSS. * Görüntülenecek bilgiyi dinamik olarak göstermek ve onunla etkileşimli çalışmak için özellikle JavaScript ve JScript gibi ECMAScript olan kullanıcı tarafındaki bir scripting dili yardımıyla erişilebilen DOM. * Web sunucusu ile bilgi değiş tokuşunda kullanılan XMLHttpRequest objesi. Bazı Ajax frameworklerde ve bazı durumlarda web sunucusuyla bilgi alışverişi için XMLHttpRequest yerine IFrame de kullanılır; diğer uygulamalarda ise dinamik olarak eklenen JavaScript TAG'leri de kullanılabilir. * Kullanıcıyla sunucu arasındaki bilgi alışverişlerinde genelde XML formatı kullanılır. Önceden hazırlanmış HTML, düz metin, JSON ve hatta EBML dahi olmak üzere herhangi bir format da kullanılabilir. Bu tip dosyalar sunucu tarafında herhangi bir script (PHP, ASP vs.) ile bile üretilmiş olabilir. * DHTML, LAMP ve SPA gibilerin aksine Ajax kendi başına bir teknoloji değildir, ancak terim birçok teknolojinin bir bütün olarak kullanıldığını ifade eder.
3
Ajax tekniği aşağıdaki teknolojileri kullanır: * Bilgiyi biçimlendirmek ve görüntüsünü değiştirmek için XHTML (ya da HTML) ve CSS. * Görüntülenecek bilgiyi dinamik olarak göstermek ve onunla etkileşimli çalışmak için özellikle JavaScript ve JScript gibi ECMAScript olan kullanıcı tarafındaki bir scripting dili yardımıyla erişilebilen DOM. * Web sunucusu ile bilgi değiş tokuşunda kullanılan XMLHttpRequest objesi. Bazı Ajax frameworklerde ve bazı durumlarda web sunucusuyla bilgi alışverişi için XMLHttpRequest yerine IFrame de kullanılır; diğer uygulamalarda ise dinamik olarak eklenen JavaScript TAG'leri de kullanılabilir. * Kullanıcıyla sunucu arasındaki bilgi alışverişlerinde genelde XML formatı kullanılır. Önceden hazırlanmış HTML, düz metin, JSON ve hatta EBML dahi olmak üzere herhangi bir format da kullanılabilir. Bu tip dosyalar sunucu tarafında herhangi bir script (PHP, ASP vs.) ile bile üretilmiş olabilir. * DHTML, LAMP ve SPA gibilerin aksine Ajax kendi başına bir teknoloji değildir, ancak terim birçok teknolojinin bir bütün olarak kullanıldığını ifade eder. |