 |
Submit Your Code | |
 |
SEO Monitor | |
 |
UpTime Monitor | |
 |
PHP Code Contest | |
 |
My Favorite Examples | |
|
My Favorite Articles | |
 |
Update Your Profile | |
|
|
| More Weber Sites | ||
| PHP Code Search | ||
| Web Development Forums | ||
| Learn MySQL Playing Trivia | ||
| PHPBB2 Templates | ||
| Web Development Index | ||
| PHP Web Logs (BLogs) | ||
| Web Development Resources | ||
| Web Development Content | ||
| Recommended Links | ||
| PHPClasses | ||
| PHP Editor | ||
| PHP Jobs | ||
| Vision.To Design | ||
| Ajax Tutorials | ||
| PHP Programming Help | ||
| PHP/MySQL Programming | ||
| Webmaster Resources | ||
| Webmaster Forum | ||
| XML meta language | ||
| website builder | ||
| Recommended | ||
| Submit Site | ||
| Forex Trading Online forex trading platform | ||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Code | |||||
The other day I was looking for a simple and functional tree script... I found to many complicated stuff!!!, so I made a simple one using JavaScript and the Document Objec Model. This will only work on I.E.5 and above... sorry... ...but I already have a new one that works in Netscape 7.1 (beta version). The Zip file contains some "uhhhgly" Gifs for the working example, just remember that the script has some hard-coded gif names, so use the same names. Take care of my baby... :-( snif!... C u later aligator, pdeitado Copy Paste this stuff below: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!--This example was created by Pedro Deitado (pdeitado@hotmail.com) --> <html> <head> <title>Untitled</title> <script> /* Scripted by Pedro Deitado, 2004 - Portugal, pdeitado@hotmail.com Version 0.9 - 20/03/2004 */ //Array that contains the elements of the tree var n1 = new Array(); //Sintax "Label|Link" n1[0] = "Hello World|http://www.weberdev.com"; n1[1] = "E-mail|http://www.google.pt"; n1[2] = "|"; //This will not show var n2 = new Array(); //if we dont want do asign a link to a label we use # n2[0] = "Stay here|#"; n2[1] = "Portugal Euro 2004|#"; n2[2] = "Cool Places|#"; n2[3] = "Linux Rules|#"; //Function tha changes the gif and recieves the TD id ("muda" means change in Portuguese) function muda_gif(gid,tid){ var obj = document.all[gid]; var strImg = obj.src; var tnum = strImg.match("_up.gif"); //naming something_up.gif will help! if(tnum == null){ obj.src ="seta_up.gif"; fechar_no(tid); //Close node ("fechar" means close in Pt) }else{ obj.src ="seta_dw.gif"; abrir_no(tid); //Open node ("abrir" means open in Pt) } } //You can replace the names of the functions to english if you wish function abrir_no(trID){ //Using DOM now! - getting parent element id var trElm = document.getElementById(trID); var ref; eval("var tot = "+trID+".length"); for(i=0; i<tot ;i++){ // Create new TR, TDs & A (hrefs) using DOM var newTR = document.createElement("tr"); var BlanknewTD= document.createElement("td"); var newTD = document.createElement("td"); var nLink = document.createElement("a"); eval("ref = "+trID+"[i].split('|')"); //Parsing string if(ref){ nLink.innerHTML = ref[0]; //Label nLink.href = ref[1]; //Link }else{ //This might not be necessary but... eval("nLink.innerHTML ="+trID+"[i]"); eval("nLink.href ="+trID+"[i]"); } //append nested child elements newTR.appendChild(BlanknewTD); newTR.appendChild(newTD); newTD.appendChild(nLink); // Add the new element to the document object trElm.appendChild(newTR); } } function fechar_no(trID){ //Using DOM now! - getting parent element id var trElm = document.getElementById(trID); eval("var tot = "+trID+".length -1"); for(i=tot; i>=0 ;i--){ // Delete elements var tag_TR = trElm.getElementsByTagName("tr").item(i); trElm.removeChild(tag_TR); } } </script> <!-- Styles--> <style> .submenu {width:115px; font-family:arial; font-size:10px; padding-left:5px;} .submenu a {color:#DA521F; text-decoration:none; font-weight:none;background-color:#FFFFFF} .submenu a:hover {color:#013853; text-decoration:none; font-style:none; font-weight:none;background-color:#FFFFFF} </style> </head> <body> <table id="r1" border="0" class="submenu"> <tr id="n1"><td><div onclick="javascript:muda_gif('g1','n1');"><img name="g1" src="seta_up.gif" alt="" width="27" height="27" border="0"></div></td><td width="100%"><font color="#0000ff" face="Tahoma" size="2">Menu 1</font></td></tr> <tr id="n2"><td><div onclick="javascript:muda_gif('g2','n2');"><img name="g2" src="seta_up.gif" alt="" width="27" height="27" border="0"></div></td><td><font color="#0000ff" face="Tahoma" size="2">Menu 2</font></td></tr> </table> </body> </html> | |||||
| Related Code Examples | |||||
