Rakkoc.Com Recep Akkoç / Rakkocun Yazıtları

4Eki/110

Menü İnceleme

Aşağıdaki makale benim ilk yazım sayilir. satır satır inceleme ile birlikte 2003 de " http://Ceturk.com " icin yazmistim. kendi blogumda ilk bunu yayinliyim dedim.

 

Main Code:
————————————————————-
<table align=center id=Main1Tablo width=”90%” cellpadding=0 cellspacing=0>
<tr>
<td bgcolor=”#949494″ width=”80%”> Merhaba Ziyaretci<td>
<td id=”Menu1Tablo” bgcolor=”#949494″ width=”10%” align=”center” onmouseover=”Ac(‘Menu1′,’Main1′)” onmouseout=”Kapa(‘Menu1′)”>Portal Menu<td>
<td id=”Menu2Tablo” bgcolor=”#949494″ width=”10%” align=”center” onmouseover=”Ac(‘Menu2′,’Main1′)” onmouseout=”Kapa(‘Menu2′)”>Kisisel Menu<td>
</tr>
</table>
<script language=”javascript”>

function Ac(SayStr,SayMStr) {
Konuslandir(SayStr,SayMStr)
Goster(SayStr)
}

function Konuslandir(SayStr,SayMStr) {

var HizzaM = document.getElementById(SayMStr+’Tablo’);
var Hizza = document.getElementById(SayStr+’Tablo’);
var Konus = document.getElementById(SayStr+’Div’);
Konus.style.top = Hizza.offsetTop + Hizza.offsetHeight + HizzaM.offsetTop + ‘px’;
Konus.style.left = Hizza.offsetLeft + HizzaM.offsetLeft + ‘px’;
}

function Kapa(SayStr) {
document.getElementById(SayStr+’Div’).style.visibility = “hidden”;
}

function Goster(SayStr) {
document.getElementById(SayStr+’Div’).style.visibility = “visible”;
}

</script>

<div id=”Menu1Div” style=”visibility=hidden; POSITION: absolute; left:-100px; top:-100px;” onmouseover=”Goster(‘Menu1′)” onmouseout=”Kapa(‘Menu1′)”>
<Table bgcolor=”#AA6666″>
<tr>
<td><a href=uyeler.asp>Uyeler</td>
</tr>
<tr>
<td><a href=Forum.asp>Forum</td>
</tr>
<tr>
<td><a href=Download.asp>Download</td>
</tr>
</Table>

<div id=”Menu2Div” style=”visibility=hidden; POSITION: absolute; left:-100px; top:-100px;” onmouseover=”Goster(‘Menu2′)” onmouseout=”Kapa(‘Menu2′)”>
<Table bgcolor=”#AA6666″>
<tr>
<td><a href=Profil.asp>Profil</td>
</tr>
<tr>
<td><a href=MsgKutusu.asp>MesajBox</td>
</tr>
<tr>
<td><a href=Bye.asp>Cikis</td>
</tr>
</Table>

————————————————————-

Merhaba Js ile hazirlanmis bir menuyu inceleyerek birazda Javascripte baslama ve isinma alistirmasi yapmak istedim. Simdi yukardaki kodu satir satir ne ise yaradiğini anlayarak inceleyelim.

Satir1 : <table align=center id=Main1Tablo width=”90%” cellpadding=0 cellspacing=0>

- Bu satirda html deki bilindik tablo yu olusturduk burada bizim acizdan onemli olan kisim
- position:absolute” demistik, top ve left değerlerini sayfaya göre alacaktýr. Yani bağýmsýz değiþken (position:absolute) bir nesne’nin left’i, sayfanýn en soluna olan uzaklýğý demektir. Bu durumda ana tablonun sayfa soluna uzaklýğý, tablonun içindeki ilk td’nin (merhaba yazan yer) geniþliği (width) ve ana tablonun cellspacing/cellpadding değerlerine ediyor demektir. Bunlarý fonksiyon içinden alert ile yazdýrýp görebiliriz. Sorunu cozmek icin ana tablomuzunda saydakileft bilgilisini eklememiz gerekecektir o yuzden bu ana tabloyada bir id tanimliuyoruz

Satir2 : <tr>
Satir3 : <td bgcolor=”#949494″ width=”80%”> Merhaba Ziyaretci<td>
Satir4 : <td id=”Menu1Tablo” bgcolor=”#949494″ width=”10%” align=”center” onmouseover=”Ac(‘Menu1′,’Main1′)” onmouseout=”Kapa(‘Menu1′)”>Portal Menu<td>

- himm bu bizim hizzamiz olacak olan tablo ilk menu ismimizi buna veriyoruz. ben kullanim kolayliği olsun diesinden menu1 ile sabitliyicem burayi.baslari değisken yapip sonlari sabit yapiyorum ki acilacak olan div ile tablo id lerimiz karismasin. burada iki tane ozelliğinide kullaniyoruz systemin onmouseover=”Ac(‘Menu1′,’Main1′)” onmouseout=”Kapa(‘Menu1′)” onMauseOver ustune gelindiğinde yapilacak islem oluyor onMauseOut ta uzerinden mause ciktiğinda yapilacak olan islem. Js ile tanimladiğmiz fonksiyonlari buradan tetikliyoruz.

Satir5 : <td id=”Menu2Tablo” bgcolor=”#949494″ width=”10%” align=”center” onmouseover=”Ac(‘Menu2′,’Main1′)” onmouseout=”Kapa(‘Menu2′)”>Kisisel Menu<td>

- az onceki satir ile hemen hemen ayni dediğim gibi sadece idnin basini değistiriyoruz sonu ayni kaliyoruki fonksiyonu cok bilgi gondermek zorunda kalmayalim.

Satir6 : </tr>
Satir7 : </table>
Satir8 : <script language=”javascript”>

- Js kodlarini sayfamizin icinde kullanmaya basliyoruz.

Satir9 : function Ac(SayStr,SayMStr) {

- bir fonksiyon tanimladik. Ac isminde bir fonksiyon ve disaridan 2 tane deyer aliyor. SayStr ve SayMStr

Satir10 : Konuslandir(SayStr,SayMStr)

- Daha sonra tanimlayacağimiz konuslandir fonksiyona 2 deyeri yukleyip cağiriyoruz.

Satir11 : Goster(SayStr)

- Goster fonksiyonuna SayStr yi yukleyip cağiriyoruz

Satir12 : }

- Js de kod blocklari php c gibi dillerde oldugu seklinde { ile baslar } ile biter. function blogumuzu kapatiyoruz

Satir13 : function Konuslandir(SayStr,SayMStr) {

- Konuslandir fonksiyonunu actik

Satir13 : var HizzaM = document.getElementById(SayMStr+’Tablo’);

- Ana tablonun idsi ile bir nesneye bagladik HizzaM ismi ile. soyledğim giibi sonunda tabloyu sabit kullanmak burada isimize yarayacak butun bilgiyi alip teker teker baglanmak yerine tek deyerin sonuna ekleyip ekleyip baglanacaz.

Satir14 : 
var Hizza = document.getElementById(SayStr+’Tablo’);

- Altina hizzalanacak olan tabloyu bir nesneye bagladik simdide

Satir15 : 
var Konus = document.getElementById(SayStr+’Div’);

- alt kisimda cikacak olan div i tanimladik. Div olanin sonunda Div Tablosuna Tablo atadik.

Satir16 : Konus.style.top = Hizza.offsetTop + Hizza.offsetHeight + HizzaM.offsetTop + ‘px’;

- Konus nesneisin yukardan ne kadar asağida cikacağini, altina hizzalanacak olan tablonun yuksekliği + main tablodan hizzalanacak tablonun yuksekliği + main tablonun yuksekliği olarak atadik. offsetHeight ozelliği bize nesnenin yuksekliğini offsetTop ozelliği ise bize tepeden olan farkini veriyor.

Satir17 : Konus.style.left = Hizza.offsetLeft + HizzaM.offsetLeft + ‘px’;

- konus nesnesi hizza nesnesinin sagdan main tabloya olan uzakliği + main tablonun ana ekrandan olan uzakliğina esitleniyor.

– Burada Dikkatinizi cekmek istediğim bir sey var ozelliklerden cektiğimizde sayi deyeri geliyor ama belirtme yapmak icin kac px oldugunu belirtmemiz gerekmekte. bu yuzden sonuna + ‘px’ seklinde ekleme yapmaktayiz

Satir18 : }

- konuslandirmakta kullanacağimiz fonksiyonu kapadik.

Satir19 : 
function Kapa(SayStr) {

- uzeri mause nin uzerinden ciktiğinda yapacaği islemi belirtiken kapa demistik bu fonksiyonu tanimliyoruz burada.

Satir20 : 
document.getElementById(SayStr+’Div’).style.visibility = “hidden”;

- Menu iceriğinin yukleneceği div tagindaki visibility yi hidden a esitliyoruz. yine burda getElementByID ile nesneyi belirliyip islem yapiyoruz.

Satir21 : }

- kapa fonksiyonunun kod blogunu kapaiyoruz

Satir22 : function Goster(SayStr) {

- Kapasini yaptik Div gorulmez oldu simdi bunu birde gostermek lazim :p

Satir23 : document.getElementById(SayStr+’Div’).style.visibility = “visible”;

- Kapatma yontemindeki gibi fakat bu sefer visibility ozelliğini visble yapiyoruz.

Satir24 : }

- block kapanir :)

Satir25 : </script>

- script tagi kapanir

Satir26 : <div id=”Menu1Div” style=”visibility=hidden; POSITION: absolute; left:-100px; top:-100px;” onmouseover=”Goster(‘Menu1′)” onmouseout=”Kapa(‘Menu1′)”>

- tablosu belirtilmis olan id nin div’i olusturulunur. burada dikkat edilecek bir yer hemen belirtiyim. visibility=hidden ve POSITION: absolute visibility zaten gozukmemesi icin hidden edildiğini onceki satirlarda soylemistik fakat POSITION: absolute kismina deyinmedik. bu kisim sayfa daki ust obje yada baska bir değis ile bagimsiz nesne olarak tanimlanmasini sagliyor Bunu baska ornekler ile daha iii anlaya bilirsiniz. burada belirtmek istediğim baska bir noktada onmouseover ve out’un da gostermeyi saylayan kodlari yeniden kullandik.

Satir27 : <Table bgcolor=”#AA6666″>
Satir28 : <tr>
Satir29 : <td><a href=uyeler.asp>Uyeler</td>
Satir30 : </tr>
Satir31 : <tr>
Satir32 : <td><a href=Forum.asp>Forum</td>
Satir33 : </tr>
Satir34 : <tr>
Satir35 : <td><a href=Download.asp>Download</td>
Satir36 : </tr>
Satir37 : </Table>
Satir38 :
Satir39 : <div id=”Menu2Div” style=”visibility=hidden; POSITION: absolute; left:-100px; top:-100px;” onmouseover=”Goster(‘Menu2′)” onmouseout=”Kapa(‘Menu2′)”>

- Bu satira kadar olan yerler bildiğiniz html oyuzden yazmadim bu satirda ayni sekilde 26. satirdan farki id si farkli.
– Aklima gelmisken Left ve top i fix olarak -100px ile sayfa disine konuslandirdim ilk acilista bunun sebebi Netscape ve operanin bazi surumlerinde standar olarak hidden i kabul etmiyor. ilk once olmaz filan dedim ama makineme elime gecen browseri yukleyip kodlarimi hepsinde test etmeye baslayinca sonucu gordumki ilk acilista sol ust kosede duruyorlar menuye gelince yok oluyorlar. bu yuzden acilista ekran disinda yarattim.

Satir40 : <Table bgcolor=”#AA6666″>
Satir41 : <tr>
Satir42 : <td><a href=Profil.asp>Profil</td>
Satir43 : </tr>
Satir44 : <tr>
Satir45 : <td><a href=MsgKutusu.asp>MesajBox</td>
Satir46 : </tr>
Satir47 : <tr>
Satir48 : <td><a href=Bye.asp>Cikis</td>
Satir49 : </tr>

Uygulamayı indirin

Kategori: Javascript Yorum yok
Toplam 26 sayfa mevcuttur; 26. sayfayi okuyorsunuz...« Ilk...10...1920212223242526