İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa]
 Site Haritası 
 
Site Map
Ana SayfaYeriniz | Ana Sayfa | Makaleler | Programcılık | PHP | Sekmeli Menü 2

Diğer Yazılar
Yapı Taşları
PHP de Dosya İşlemleri
PHP de Metin Düzenleme İşlemleri
Operatörler
Fonksiyonlar
Veri Aktarımı
Sekmeli Menü 1
Hızlı RSS Hazırlama
Web Formları İçin Güvenlik Kodu Oluşturma
PHP ye Giriş
PHP ye Giriş 2
Php ile COM Port Kontrolü
Kaya Sağlamlığında Kodlama


E-posta Gönderin Yorum Yazın
Güvenlik Kodu:7160Güvenlik Kodu:7160Güvenlik Kodu:7160Güvenlik Kodu:7160




En Son Okunan 10 Makale
  1. Anlamlı Linkler
  2. On Yılda Programlama Öğrenin
  3. Unutulmayacaklar
  4. Pazarlama Amaçlı Halkla İlişkiler (MPR)
  5. Teknolojik Hastalik: Reklam Korlugu
  6. PHP de Metin Düzenleme İşlemleri
  7. Yöneticilik Dersleri
  8. İnsan İlişkileri Üzerine
  9. Grafik Tasarımcının Egitimi İcin Bazı Öneriler
  10. Beyin Nasıl Öğreniyor?
 
Sekmeli Menü 2>
Yazı Tipi KüçültYazı Tipi BüyütAna SayfaYazıcıdan ÇıkarPDF Belgesi Olarak GörüntüleFavorilerime EkleArkadaşıma Tavsiye EdeceğimRTF (Word Dokümanı) olarak görüntüle

Birinci bölümde nesnemizin iç yapısını hiç bilmemize gerek kalmadan amacımıza yönelik nasıl kullanabileceğimizi ifade etmiştik. Fakat nesnenin kaynak kodunun indirilebilir halini yayınlamadığımız için deneme şansınız olmamıştır. Bahsettiğimiz nesnenin kaynak kodunu bu yazıda inceleyeceğiz ama detaya girmek istemeyenler zip halini daha sonra İNDİR bölümünden çekebilirler.

Nesne yapısını çok kısa gözden geçirelim. Bir nesnenin bazı değişken yada sabit özellikleri ve bazı işlevleri yani fonksiyonları vardır. Örneğin kurşun kalemler; her kurşun kalemin “gövde rengi”,”kalem ucu rengi” gibi sabit,”kalem boyu” gibi değişken değerleri vardır ve bütün kalemler yazma işlevini yerine getirir. Bazı kurşun kalemlerin tepesinde silgi vardır, o zaman silme işlevi de görebilir.

Kurşun kalem nesnemizi php ile yapıyor olsaydık şöyle gibi bir kod yazacaktık:

<?
Class KursunKalem
{
    var
$_govde_rengi;
    var
$_uc_rengi;
    var
$_kalem_boyu;
    
    function
KursunKalem()
    {
        
//.....
    
}
    
    function
Yaz()
    {
        
//.....
    
}
    
    function
Sil()
    {
        
//.....
    
}
}

?>

(Nesnemizdeki değişkenlere “özellik”, fonksiyonlara da “metod” diyoruz)

Evet, nesne yapımızı kısaca hatırladıktan sonra konumuza devam ediyoruz.

Birinci bölümden hatırlayalım; Tab nesnemizin Tab() (ana method) , TabEkle() ve TabOlustur() adında 3 metodu vardı.

Tab() ile nesnemizi oluşturup, TabEkle() ile daha önce hazırladığımız formları nesnemize herbiri ayrı bir katmanda oturacak şekilde ekliyoruz ve TabOlustur() ile sayfamızda istediğimiz bir yere oluşan sekmeli formu basıyoruz.

Nesnemizin metodlarını gördük, şimdi de özelliklerini yani sahip olduğu ana değişkenleri görelim.

$_isim; //olusacak formda kullanilacak
$_tab_sayisi; //otomatik belirleniyor
$_basliklar; //tab basliklari
$_ilk_tab; //ilk önce hangi tab’ın secili olacagı
$_aciklamalar; //tab basliklari ile ilgili alt aciklama
$_icerikler; //tab form icerikleri
$_br; //yanyana kac tab butonundan sonra satir atlanacak

Kısaca açıklayalım:

$_isim:
Sekmeli formumuzla birlikte oluşturacağımız JS (Javascript) fonksiyonların sayfadaki olası diğer sekmeli formlarla çakışmaması ve düzgün çalışması için her sekmeli formun kendine has bir adı olmalı ve JS’lerde de layer yada div gibi dinamik unsurlarda da bu isim baz alınmalı.

$_tab_sayisi:
Bu değişkeni elle girmiyoruz. Formumuza eklediğimiz sekmeler adedince değeri artıyor. Sekmeleri oluştururken kuracağımız döngüde kullanılıyor.

$_basliklar:
Tab başlıklarının tutulacağı dizi değişken.

$_ilk_tab:
İlk önce hangi tab’ın seçili olacağı ve görüntüleneceği bu değişkenle belirleniyor. Öntanımlı olarak her zaman ilk sekme olmasına rağmen bazı durumlarda bu değiştirilmek istenebilir.

$_aciklamalar:
Tab butonlarının üzerinde fare ile durunca görünecek küçük açıklama bilgilerinin tutulacağı dizi değişken.

$_icerikler:
Her bir tab formunun HTML içeriğini tutacak olan dizi değişken.

$_br:
Çok sayıda tab olan formlarda sayfanın enine göre yanyana kaç butondan sonra satır atlanacağınin belirtildiğii değişken.

Şimdi sıra ile ana metod’dan başlayarak metodlarımızı yazıp inceleyelim.

<?
function Tab($isim="",$ilk_tab="0",$br=4)
{
    if(!
$isim)
    
$isim=time(); //bir isim girilmemisse o anki zamana gore bi isim olusturuyor
    
    
if($ilk_tab)
    
$this->_ilk_tab=$ilk_tab;
    
    
$this->_isim=$isim;
    
$this->_br=$br; //br setlenmisse, 4 tab'dan sonra asagiya dizer..
}
?>

Bu fonksiyon, ana metodumuz olduğu için (nesnemizin ismi ile aynı ismi taşıyan metod, ana metoddur ve nesne sayfada oluşturulduğu anda çalışır) nesnemizin adını, ilk önce hangi tab’ın seçili olacağını (öntanımlı olarak 0 belirlendiği için girilmesi zorunlu değil) ve çok sayıda tab içeren formlar için kaç tab butonundan sonra satır atlanacağını (bu da ön tanımlı olarak 4 belirlenmiş, girilmesi zorunlu değil) burada parametre olarak belirtiyoruz. Bizim girdiğimiz parametre değerleri, nesnemizin özelliklerine kaydediliyor ve böylece nesnemizin diğer metodları o özellikleri (nesne değişkenleri) rahatlıkla kullanabiliyor.

<?
function TabEkle($baslik, $aciklama="", $icerik="")
{
    
$this->_tab_sayisi++;
    
$this->_basliklar[]=$baslik;
    
$this->_aciklamalar[]=$aciklama;
    
$this->_icerikler[]=$icerik;
}

?>

Bu fonksiyonu formumuza ekleyeceğimiz her tab sekmesi için uygun parametrelerle birer kez çağırmamız gerekir. Parametre olarak tab’ın başlığını, kısa açıklamasını ve en önemlisi tab’ın içeriğini alıp nesnenin özelliklerine bu bilgileri kaydediyor ve tab sayısı değerini de her defasında bir artırıyor.

Tab’ın HTML içeriğini doğrudan bu parametrelerle girmek zor olacağından öncelikle $form1=’<table>...</table>’ gibi bir yapıda, ayrı bir değişkene HTML içerik kaydedilmeli, sonra da bu $form1 değişkenini parametre olarak metodumuza girmeliyiz.

Gelelim en önemli methodumuza: TabOlustur()

Bu metod, oluşturduğumuz tab nesnesini, çalışması için gerekli JS kodla birlikte HTML çıktısını üretip ekrana basmamızı sağlar.

JS ve HTML çıktımızın nasıl olması gerektiği üzerinde konuşalım ve bunlari metodumuzun üzerinde görelim.

Tab formumuzun mantığı şu şekildedir. İlk olarak ekrana formumuzun belkemiği olan JS fonksiyonumuzu ( TabSec() ) bastırıyoruz, bu fonksiyonun detaylarına az sonra değineceğiz. Sonra bir tablo oluşturup ilk satırına tabımızın navigasyonunu sağlayacak olan butonları peşisıra yerleştiriyoruz. İkinci satıra da her biri farklı bir id’ye sahip bir katmanın (div) üzerinde oturacak şekilde formlarımızı basıyoruz. Fakat bu katmanlardan sadece ön tanımlı olarak ilk hangi katmanın seçili olacağı belirtilmişse onun görünmesini, diğerlerinin görünmemesini sağlıyoruz. Bunu, katmanın style özelliğinin display değeri ile yapıyoruz. Bir HTML unsurun style’indeki display değerini dinamik olarak ‘none’ yada ‘block’ yapabiliriz, ‘none’ yapınca o unsur sayfada hiç yer kaplamaz, ‘block’ yapınca normal bir şekilde görülür.

Tab butonlarına tıklanınca, hazırladığımız JS fonksiyon TabSec() devreye girerek hangi butona tıklanmışsa o buton renklendirilip, butonla ilişkilendirilmiş tab formunun oturduğu katman’ın (layer) görünür hale gelmesi sağlar.

Bir katman görüntülenirken katmana ait butonun diğer butonlardan farklı renkte görünmesini sağlamalıyız ki hangi sekmenin seçili olduğunu kullanıcı algılayabilsin. Oluşturdumuz TabSec() JS fonksiyonu ilk önce tıklanan butonun style değerlerini değiştirerek zemin ve yazı rengini diğerlerinden farklı hale getiriyoruz. Sonra o butonun dışındaki bütün butonları eski haline getirmek için ve benzer şekilde sadece o butonla ilişkili katmanı görünür yapıp diğer bütün katmanları gizlemek için tab formumuzdaki sekme sayısı kadar bir döngü kuruyoruz.

Fonksiyonumuzda buton ve katmanlara erişmek için JS’in belki de en çok kullanılan getElementById() fonksiyonundan yararlanıyoruz. getElementById()’ye parametre olarak HTML unsurumuzun id’sini vermemiz kafi. Böylece çok pratik bir şekilde sayfanızda istediğiniz HTML unsura dinamik olarak etki edebilirsiniz.

JS fonksiyonumuzu ekrana bastıktan sonra yukarıda bahsettiğimiz gibi bir tablo oluşturup önce sırasıyla butonları, sonra da her biri birbirinden bağımsız düzenli bir id’ye sahip (Katman_0, Katman1, Katman_2) bir div’e oturacak şekilde sekme ekranlarımızı basıyoruz. Öntanımlı olarak seçilmesini istediğimiz buton’un ve o butonla ilişkili sekme’nin görünüm özelliği diğerlerinden farklı olarak basılıyor.

Böylece Tab formumuz kullanıma hazır oluyor. Nesnemizin TabOlustur() metodunun tam kodu, kısa açıklamalarla birlikte aşağıdadır.

Intranet yazılımlarınızda kalabalık ekranlardan kurtulmanız dileğiyle :)


function TabOlustur()
{
    
$seciliTabZemin='#6666CC';
    
$seciliTabYazi='#ffffff';
    
$normalTabZemin='#dddddd';
    
$normalTabYazi='#000000';

    
$cikti="<script language="Javascript">
    var GenelStil=''

    // Tab butonlarini ve katmanları idare eden JS fonksiyon
    function TabSec_"
.$this->_isim."(id)
    {        
        obj=document.getElementById(id)
        obj.style.backgroundColor='”.$seciliTabZemin'  //seçili tab butonunun zemin rengi
        obj.style.color='”.$seciliTabYazi.”’ //seçili  tab butonunun yazi rengi
        
        for(i=0;i<"
.$this->_tab_sayisi.";i++)
        {
            ElmIsim='Buton_"
.$this->_isim."_'+i
            Elm=document.getElementById(ElmIsim)
            
            AltIsim='Katman_"
.$this->_isim."_'+i
            AltElm=document.getElementById(AltIsim)
            
            if(AltElm)                    
                AltElm.style.display='block' //butonla ilişkili katman görünür yapılıyor.
            
            if(ElmIsim!=obj.name)
            {
                Elm.style.backgroundColor='”.$normalTabZemin.”' //normal tab but. zemin rengi
                Elm.style.color='”.$normalTabYazi.”' //normal tab butonu yazi rengi.
                
                if(AltElm)
                    AltElm.style.display='none'  //diğer bütün katmanlar gizleniyor
            }
        }
    }    
    </script>"        
    
."<table border=0 width="90%" cellpadding=2 cellspacing=0>"
    
."<tr><td valign=top >"
    
."<table cellpadding=1 cellspacing=0 width="100%">"
    
."<tr><td valign=top > ";
    
    
//JS’i ekrana bastık, sıra butonlar ve katmanlarda

    
for($i=0;$i<$this->_tab_sayisi;$i++)
    {
        if(
$i!=$this->_ilk_tab)   //öntanımlı olarak ilk önce seçilecek olan buton mu?
        
{
            
$stil=" style=" background-color:#dddddd;"
            
."color:#000000 " ";
        }
        else
        {
            
$stil=" style=" background-color:".$seciliTabZemin.";"
            
."color:".$seciliTabYazi."" ";            
        }
        
        if(
$this->_basliklar[$i])
            
$Isim=$this->_basliklar[$i];
        else
            
$Isim=$this->_isim[$i].$i;
        
        
//Butonlar burda basılıyor ve katmanlarla TabSec() ile ilişkilendiriliyor.
        
$cikti.="<input type=button $stil id="Buton_".$this->_isim."_$i" "
        
." name="Buton_".$this->_isim."_$i" value="".$this->_basliklar[$i]."" "
        
." title="".$this->_aciklamalar[$i]."" "            
        
." onclick="TabSec_".$this->_isim."('Buton_".$this->_isim."_$i')" >";        
        
        
//Yanyana en fazla kaç buton koyacağımız önceden belirtmiştik, ona göre belli bir sayıdan sonra
        //<br> konarak çok syaıda butonun yanyana gelip sayfa tasarımını bozmaması sağlanıyor.
        
if(($i+1)%$this->_br==0 and $this->_br)
            
$cikti.="<br>";
        
    }
            
    
$cikti.="</td></tr>"
    
."</table>"
    
."</td></tr>"
    
."<tr><td valign=top>";

    for(
$i=0;$i<$this->_tab_sayisi;$i++)
    {
        if(
$i!=$this->_ilk_tab)
            
$gorunum="none";
        else
            
$gorunum="block";

        
//Katmanlar burada basılıyor.
        
$cikti.="n<div id="Katman_".$this->_isim."_".$i."" style="display: "
        
.$gorunum."" !style="position: absolute; visibility: ".$gorunum."">"
        
.$this->_icerikler[$i]
        .
"</div>nn";

    }

    
$cikti.="</td></tr>"
    
."</table>";
    
//."<!--</div>-->";
    
    
return $cikti;
}


Not: Yazılar konusundaki yorumlarınız için lütfen Yorum Yazın bölümümüzü kullanın.

Yazar : Hasan Civelek
Son Güncelleme : 29 Mayıs 2005, Pazar
Sayfa Sürümü : 1
Okunma Adedi : 7,616
Son Okunma : 2017-08-22 18:22:48
Kaynaklar : http://www.bthayat.net/site/yazi_goster.php?id=141

Sekmeli Menü  1Sekmeli Menü 2Hızlı RSS Hazırlama
© [Site Haritası]
| Makaleler | Seyir Defteri | Kaynaklar | İndirin | İletişim |

RSS dosyasını görmek için tıklayınız. RSS dosyasını görmek için tıklayınız.XML versiyonu için tıklayınız WAP versiyonu için tıklayınız Bu site DyNA İçerik Yönetim Sistemi üzerinde çalışmaktadır.
İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa
ismail kırbaş ile web sitesi tasarimi sitemap ismail kırbaş ile web sitesi tasarimi sitemap
  Sitemizde 10 kişi çevirimiçi | Bugün =234 | Dün =299 | Bu Ay=7,336 | Günlük En Fazla=1,109 tekil ziyaretçi