İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır

Javascript ile Tree (Internet Explorer İçin)

Projenin Amacı

Bu bir proje sayılmaz. Basit bir tree'dir. Sol bölmede bir menü bulunur. Bu menüdeki linkler tıklanırsa sağ bölmede içerik görüntülenir. Sağ bölmedeki frame'in adı vcontent'tir ve base attribute'si ile set edilmiştir. Böylece tüm linkler content frame'inde açılacaklar. Linkler birbirinin içindedir. En soldaki resim tıklanırsa tree açılır veya kapanır.

Bu tree yanlız internet explorer'de çalışır. Style ile javascript birarada kullanılmıştır. Her grup bir div etiketinin içindedir. div etiketinin display özelliği none ise div etiketinin içindekiler gözükmez. Display özelliği block yapılırsa gözükür. Tüm tree buna dayanır.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <html>
  2 <head>
  3 	<base target="content"></base>
  4 	<!-- tree maddeleri tıklandığında açılacak sayfalar content frame'inde gösterilecek.-->
  5 	<script language="javaScript">
  6 		var plusUrl="plus.gif";
  7 		var minusUrl="minus.gif";
  8 		function refresh(objId){
  9 			obj=getObject(objId);
 10 			if(isDisplay(obj)){
 11 				hide(obj,objId);
 12 			}else{
 13 				view(obj,objId);
 14 			}
 15 		}
 16 		function view(obj,objId){
 17 			obj.style.display="block";		
 18 			document.images[objId+"Img"].src=plusUrl;				
 19 		}
 20 		function hide(obj,objId){
 21 			obj.style.display="none";
 22 			document.images[objId+"Img"].src=minusUrl;						
 23 		}
 24 		function isDisplay(obj){
 25 			return obj.style.display=="block";
 26 		}
 27 		function getObject(objectId){
 28 			return eval("document.all."+objectId);
 29 		}	
 30 	</script>
 31 	<style>
 32 		body{
 33 			margin-left:3%;		
 34 			background:white;
 35 		}
 36 		div{
 37 			margin-left:9%;
 38 		}
 39 	</style>
 40 </head>
 41 <body>
 42 <h2>Tree</h2>
 43 	<img name="computerImg" src="plus.gif" onClick="refresh('computer')"></img>
 44 	<a href="computer.html">Bilgisayar</a><br>
 45 		<div id="computer" style="display:none"> 
 46 			<img name="javaImg" src="plus.gif" onClick="refresh('java')"></img>		
 47 			<a href="java.html">java</a><br>		
 48 				<div id="java" style="display:none"> 					
 49 					<a href="swing.html">swing</a><br>
 50 					<a href="io.html">io</a><br>
 51 				</div>
 52 			<a href="html.html">html</a><br>
 53 			<a href="css.html">css (Cascading Style Sheet)</a><br>
 54 		</div>
 55 	<img name="historyImg" src="plus.gif" onClick="refresh('history')"></img>
 56 	<a href="history.html">Tarih</a><br>
 57 		<div id="history" style="display:none"> 
 58 			<a href="ottoman.html">Osmanlı</a><br>		
 59 			<a href="mongol.html">Moğollar</a><br>
 60 		</div>
 61 </body>
 62 </html>

Dosya Listesi

İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır