epic
02/04/2004, 12:56
LYCOS'un sundugu ucretsiz web alani hizmetinin uyelere ozel kontrol panelinde gordugum bir agac listesi uygulamasi cok hosuma gitmisti. aslinda agac listeleri kolay hazirlaniyor ama ben bir degisiklik olsun diye sayfayi yenileseniz ya da ileri-geri tuslarini kullansaniz bile genisletilmis halini koruyan bir agac listesi yapmayi dusundum. ve asagida gordugunuz gibi yaptim da. :) ornek script, genisletilmis uyeleri saklamak icin cerezleri kullaniyor. Scriptteki her ifadeyi yorum satirlariyla aciklamaya calistim. Umarim isinize yarar. Kolay gelsin.
<HTML>
<HEAD>
<TITLE>epic Tree List</TITLE>
<STYLE TYPE="text/css">
<!--
a:link, a:active, a:visited
{
color: #000000;
text-decoration: none
}
a:hover
{
text-decoration: underline
}
li
{
list-style: square inside;
font-weight: normal;
padding-left: 20px;
}
#header
{
cursor: default;
font-family: Sans-Serif;
font-size: 12px;
font-weight: bold;
}
#item
{
list-style: disc;
}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
// genisletilmis uyelerin id'lerini kaydedecegimiz degisken:
members = new String("")
// agac yapisina tiklaninca icra edilecek fonksiyon:
function TreeOnClick(object)
{
// hedef uyemiz (agac yapisinda tiklanan oge):
el = document.all ? event.srcElement : object.target
// hedef uyemizin id'si "header" ise
if (el.id == "header")
{
// hedef uyemizden sonraki ilk genisletilebilir uye:
member = el.getElementsByTagName("UL")[0]
// eger uye genisletilmemisse...
if (member.style.display == "none")
{
// uye id'sini not al...
members += member.id + ","
// uyeyi genislet...
member.style.display = "inline"
}
// uye genisletilmisse...
else
{
// uye id'sini nottan temizle...
members = members.replace(member.id + ",", "")
// uyeyi daralt...
member.style.display = "none"
}
}
}
// onceden genisletilmis uyelerin id'lerini cookie'den okuyup
// sayfa yenilendiginde tekrar genisleten fonksiyon:
function LoadMembers()
{
// cookie icinde aratacagimiz anahtar:
search = "members="
// eger cookie tanimliysa...
if (document.cookie.length)
{
// anahtar cookie icinde bulunuyorsa...
// offset degiskenine anahtarin basladigi konumu kaydet...
if ((offset = document.cookie.indexOf(search)) != -1)
{
// offset degiskeninin degerini anahtar uzunlugu kadar arttir...
offset += search.length
// end degiskenine anahtar degerinin bittigi konumu kaydet...
if ((end = document.cookie.indexOf(";", offset)) == -1)
end = document.cookie.length
// members degiskenine cookie'de kayitli uye id'lerini kaydet...
members = document.cookie.substring(offset, end)
// c_members dizisine uye id'lerini yerlestir...
c_members = members.split(",")
// uye id'lerinin sayisi kadar surecek bir dongu baslat...
for (i = 0; i < c_members.length; i++)
// id'si belirtilen uyeyi genislet...
document.getElementById(c_members[i]).style.display = "inline"
}
}
}
// genisletilmis uyelerin id'lerini cookie'ye kaydeden fonksiyon:
function SaveMembers()
{
document.cookie = "members=" + members;
}
window.onload = LoadMembers
window.onunload = SaveMembers
-->
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="tree" STYLE="position: absolute; width: 300px; height:400px; left:-40; top:10; z-index:0">
<UL ONCLICK="TreeOnClick(event)">
<LI ID="header">Programlama</LI>
<UL ID="programlama" style="display: none">
<LI ID="header">Betik Dilleri</LI>
<UL ID="betik" style="display: none">
<LI ID="header">Istemci Tarafli</LI>
<UL ID="bistemci" style="display: none">
<LI ID="item"><A HREF=1>JavaScript</A></LI>
<LI ID="item"><A HREF=2>JScript</A></LI>
<LI ID="item"><A HREF=3>VBScript</A></LI>
</UL>
<LI ID="header">Sunucu Tarafli</LI>
<UL ID="bsunucu" style="display: none">
<LI ID="item"><A HREF=4>PHP</A></LI>
<LI ID="item"><A HREF=5>ASP</A></LI>
<LI ID="item"><A HREF=6>Python</A></LI>
</UL>
</UL>
<LI ID="header">Programlama Dilleri</LI>
<UL ID="pdilleri" style="display: none">
<LI ID="item"><A HREF=7>Delphi</A></LI>
<LI ID="item"><A HREF=8>C/C++</A></LI>
<LI ID="item"><A HREF=9>Java</A></LI>
<LI ID="item"><A HREF=10>Python</A></LI>
</UL>
</UL>
</UL>
</DIV>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>epic Tree List</TITLE>
<STYLE TYPE="text/css">
<!--
a:link, a:active, a:visited
{
color: #000000;
text-decoration: none
}
a:hover
{
text-decoration: underline
}
li
{
list-style: square inside;
font-weight: normal;
padding-left: 20px;
}
#header
{
cursor: default;
font-family: Sans-Serif;
font-size: 12px;
font-weight: bold;
}
#item
{
list-style: disc;
}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
// genisletilmis uyelerin id'lerini kaydedecegimiz degisken:
members = new String("")
// agac yapisina tiklaninca icra edilecek fonksiyon:
function TreeOnClick(object)
{
// hedef uyemiz (agac yapisinda tiklanan oge):
el = document.all ? event.srcElement : object.target
// hedef uyemizin id'si "header" ise
if (el.id == "header")
{
// hedef uyemizden sonraki ilk genisletilebilir uye:
member = el.getElementsByTagName("UL")[0]
// eger uye genisletilmemisse...
if (member.style.display == "none")
{
// uye id'sini not al...
members += member.id + ","
// uyeyi genislet...
member.style.display = "inline"
}
// uye genisletilmisse...
else
{
// uye id'sini nottan temizle...
members = members.replace(member.id + ",", "")
// uyeyi daralt...
member.style.display = "none"
}
}
}
// onceden genisletilmis uyelerin id'lerini cookie'den okuyup
// sayfa yenilendiginde tekrar genisleten fonksiyon:
function LoadMembers()
{
// cookie icinde aratacagimiz anahtar:
search = "members="
// eger cookie tanimliysa...
if (document.cookie.length)
{
// anahtar cookie icinde bulunuyorsa...
// offset degiskenine anahtarin basladigi konumu kaydet...
if ((offset = document.cookie.indexOf(search)) != -1)
{
// offset degiskeninin degerini anahtar uzunlugu kadar arttir...
offset += search.length
// end degiskenine anahtar degerinin bittigi konumu kaydet...
if ((end = document.cookie.indexOf(";", offset)) == -1)
end = document.cookie.length
// members degiskenine cookie'de kayitli uye id'lerini kaydet...
members = document.cookie.substring(offset, end)
// c_members dizisine uye id'lerini yerlestir...
c_members = members.split(",")
// uye id'lerinin sayisi kadar surecek bir dongu baslat...
for (i = 0; i < c_members.length; i++)
// id'si belirtilen uyeyi genislet...
document.getElementById(c_members[i]).style.display = "inline"
}
}
}
// genisletilmis uyelerin id'lerini cookie'ye kaydeden fonksiyon:
function SaveMembers()
{
document.cookie = "members=" + members;
}
window.onload = LoadMembers
window.onunload = SaveMembers
-->
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="tree" STYLE="position: absolute; width: 300px; height:400px; left:-40; top:10; z-index:0">
<UL ONCLICK="TreeOnClick(event)">
<LI ID="header">Programlama</LI>
<UL ID="programlama" style="display: none">
<LI ID="header">Betik Dilleri</LI>
<UL ID="betik" style="display: none">
<LI ID="header">Istemci Tarafli</LI>
<UL ID="bistemci" style="display: none">
<LI ID="item"><A HREF=1>JavaScript</A></LI>
<LI ID="item"><A HREF=2>JScript</A></LI>
<LI ID="item"><A HREF=3>VBScript</A></LI>
</UL>
<LI ID="header">Sunucu Tarafli</LI>
<UL ID="bsunucu" style="display: none">
<LI ID="item"><A HREF=4>PHP</A></LI>
<LI ID="item"><A HREF=5>ASP</A></LI>
<LI ID="item"><A HREF=6>Python</A></LI>
</UL>
</UL>
<LI ID="header">Programlama Dilleri</LI>
<UL ID="pdilleri" style="display: none">
<LI ID="item"><A HREF=7>Delphi</A></LI>
<LI ID="item"><A HREF=8>C/C++</A></LI>
<LI ID="item"><A HREF=9>Java</A></LI>
<LI ID="item"><A HREF=10>Python</A></LI>
</UL>
</UL>
</UL>
</DIV>
</BODY>
</HTML>