Jquery ile sekmeler oluşturmak

Birçok web sayfasında sayfa yenilenmeden geçiş yapılan sekmeler görmüşsünüzdür. Bunlar basitçe javascript ile yapılabilir. Bu yazımda size jquery ile basit bir şekilde nasıl sekmeler oluşturabileceğinizi bir örnekle göstereceğim. Aslında sekmeler aynı sayfada bulunan ancak biri görünür olduğunda diğerleri gizli hale getirilen sayfa öğelerinden ibarettir. Yani örnek olarak bir sayfada ardarda oluşturduğunuz div öğelerinden birini gösterip diğerlerini gizleyerek ve bu işlemi sekme başlıklarının tıklanmasıyla tetikleyerek basit bir sekme sistemi oluşturmuş olursunuz.

İlk önce sekmeler için kullanacağımız css sınıflarını, sekme başlıklarını ve sekme içeriklerini oluşturalım:
[xml]
<style type="text/css">
.sekme_baslik{border:2px solid gray;cursor:pointer;}
.aktif_sekme_baslik{border:2px solid red;}
.sekme_icerik{border:1px dashed gray;}
</style>
<div>
<span id="sekme_1">Sekme 1</span>
<span id="sekme_2">Sekme 2</span>
<span id="sekme_3">Sekme 3</span>
</div>

<div id="sekme_1_icerik">
Sekme 1 içeriği
</div>
<div id="sekme_2_icerik" style="display:none;">
Sekme 2 içeriği
</div>
<div id="sekme_3_icerik" style="display:none;">
Sekme 3 içeriği
</div>
[/xml]



İlk sekme içeriği haricindeki sekme içeriklerinin gizlendiğine dikkat edin. Şimdi de sekmeleri aktif hale getirecek javascript kodumuzu yazalım:
[js]
$(function(){
$(".sekme_baslik").click(function(){
// önce seçilen sekme dışındaki tüm sekme başlıklarından aktif_sekme_baslik sınıfını kaldırıyoruz
$(".sekme_baslik").not($(this)).removeClass("aktif_sekme_baslik");
// seçilen sekme başlığına aktif_sekme_baslik sınıfını ekleyelim
$(this).addClass("aktif_sekme_baslik");
// seçilen sekme başlığının id değerini alıp bu değere "_icerik" ilave ederek içerik div öğesinin idsini bulalım
var icerik_id = $(this).attr("id") + "_icerik";
// içerik sekmemizi nesne olarak kaydedelim
var $sekme = $("#"+icerik_id);
// şimdi de göstermek istediğimiz sekme dışındaki sekmeleri gizleyelim
$(".sekme_icerik").not($sekme).hide();
// ve son olarak göstermek istediğimiz seçilen sekmeyi gösterelim:
$sekme.show();
});
});
[/js]



Bu basit bir sekme örneğiydi. Elbette Sekme başlıkları ve içerik için istediğiniz gibi css biçimlendirmesi uygulayarak sekmelerin daha gerçekçi görünmesini sağlayabilirsiniz.

Xml verisini diziye dönüştürmek

Geçenlerde yazdığım bir XML dönüştürme sınıfını sizlerle paylaşmak istiyorum. Bu sınıf ile xml verisini parametre olarak kullanarak ağaç yapısında bir dizi elde edebilirsiniz.

XML Parser (XML to array) : http://www.phpclasses.org/browse/package/4954.html

Bu sınıfı kullanırken xml verisini iki şekilde aktarabilirsiniz:

1. XML verisini yapılandırıcı parametresi olarak kullanıp ardından parse() işlevini çağırarak:
   [php]
   $parser = new XmlParser($xml_input);
   $result = $parser->parse();
   [/php]


2. Sınıfı parametresiz oluşturup parse() işlevine parametre olarak xml verisini aktararak:
   [php]
   $parser = new XmlParser();
   $result = $parser->parse($xml_input);
   [/php]

Elbette bu sınıfın hataları, eksikleri olabilir. Hata/eksiklik vs. bulduğunuzda bana bildirebilirsiniz.