Full version: jsB@nk » Menu » Navigation » FolderTree
URL: https://www.javascriptbank.com/foldertree-index.html
This script is used to display content in a familiar 'Explorer' type fashion. Simply click the little icon (or the header text itself) and the content in the folder will collapse/expand.
Full version: jsB@nk » Menu » Navigation » FolderTree
URL: https://www.javascriptbank.com/foldertree-index.html
<style type="text/css">a, a:visited, a:active {font-size:10pt;font-weight:normal;font-family:sans-serif;color:black;text-decoration:underline;}a:hover {font-size:10pt;font-weight:normal;font-family:sans-serif;color:#00436e;text-decoration:none;}body{font-size:10pt;font-weight:normal;font-family:sans-serif;color:black;background-color:rgb(255,255,255);}.code{font-size:10pt;font-weight:normal;font-family:serif;color:maroon;}.code1{font-size:10pt;font-weight:normal;font-family:serif;color:blue;}.code2{font-size:10pt;font-weight:normal;font-family:serif;color:green;}.desc {cursor:default;font-size:10pt;font-weight:normal;font-family:sans-serif;color:maroon;}.folder {cursor:default;display:block;font-size:12pt;font-family:serif;font-weight:bold;color:black;padding:6 0 0 0;}.content {display:none;color:#00436e;padding: 0 0 0 25;font-size:10pt;font-family:sans-serif;}.container{width:98%;display:block;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript" type="text/javascript" src="foldertree.js"></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
<a href="javascript:expandall()">Expand all</a> | <a href="javascript:collapseall()">Collapse all</a><br><br><div class="container"><span class="folder" id="mainID"> <img src="plus.gif" width="16" height="13"> Main Menu</span><div class="content"> <div class="container"><span class="folder"> <img src="plus.gif" width="16" height="13"> Description</span> <div class="content"> This script is used to display content in a familiar "Explorer" type fashion.<br><br> Simply click the little icon (or the header text itself) and the content in the folder will collapse/expand.<br><br> The icon will switch state when the folders are opened and closed. These icons are:<br> <ul> <li><i>minus.gif</i>: This image is shown when the folders are opened. <li><i>plus.gif</i>: This image is shown when the fodlers are closed. </ul> The default images are those of actual little folders, but I have also included (in the downloadable zip file) optional plus sign and minus sign images. </div></div> <div class="container"><span class="folder"> <img src="plus.gif" width="16" height="13"> Installation</span> <div class="content"> <ol> <li>You'll need to paste a few lines of stylesheet code in the HEAD section of your page to give the elements the properties they need to allow the script to work.:<br><br> <div class="code"> <style type="text/css"><br> .folder { cursor:default; display:block; padding:6 0 0 0; }<br> .content { display:none; padding: 0 0 0 40; }<br> .container{ display:block; }<br> </style> </div> <br> You can adjust the values in these, but the preset ones give the best effect. You can also add in font style declarations.<br><br> <li>Then, you'll need to paste one line of javascript in your page.<pre class="code"> <script language="javascript" type="text/javascript" src="foldertree.js"></script></pre> <li>This next step is probably the most difficult one, especially if you plan on having multiple nesting branches. There is a specific format that needs to be followed. First, let me explain the basic parts of the elements:<br><br> <ul> <li><i>The Folder SPAN element</i>. This is the header with the plus/minus sign next to it and is the one you click to expand the content. <li><i>The Content DIV element</i>. This is the section that is not visible until you click the header text. This is also where you put other sets of elements if you are going to have other branches. <li><i>The Container DIV element</i>. This is the container that holds both of the elements above. </ul> <br>The following example shows the basic structure:<br><br> <div class="code"> <div class="container"><br> <span class="folder"><img src="plus.gif"> The Header Text </span><br> <div class="content"> Your Content Here...</div><br> </div><br> </div> <br> This script supports multi-level nesting. The following example shows a single entry with two branches to show the format of a nested branch:<br><br> <div class="code"> <div class="container"><br> <span class="folder"><img src="plus.gif"> The Header Text </span><br> <div class="content"><br> <div class="code1"> <div class="container"><br> <span class="folder"><img src="plus.gif"> The First Branch </span><br> <div class="content"> <div class="code2"> <div class="container"><br> <span class="folder"><img src="plus.gif"> The Second Branch </span><br> <div class="content"> Content for the innermost branch... <br> </div><br> </div><br> </div> </div><br> </div><br> </div> </div><br> </div><br> </div> <br> You'll notice in both of the examples above, there is no javascript that causes the folders to open or close; that's because the script searches for elements of a certain classname and automatically assigns mouse events. You do not even have to assign an ID to any folder ( unless you want a specific folder opened initially; more on this in the <b>Notes</b> section ). This is why it is important to follow the format given above; if not, the script will generate errors.<br><br> </div></div> <div class="container"> <ol> <ol> <ol> <span class="folder"><img src="plus.gif"> Notes</span> <div class="content"> <ul> <li>This script only works in standards compliant browsers (IE5+, Netscape6+). Other browsers should simply show the menu with none of the content, but shouldn't generate any errors.<br><br> <li>This script does it's "magic" once the page loads by using the <span class="code">window.onload</span> event handler. This isn't a problem unless you use another script that also uses this event; only one will work. The good news is that you can get them all to work. Go <a href="http://scriptasylum.com/faqpage.html" target="_blank">here</a> for the explanation on how this is done.<br><br> <li>Depending on your application, you may want the tree to appear initially open or closed, just one change to the script will do the trick. Edit the <span class="code">foldertree.js</span> file and find the lines that read: <br><br> <pre class="code"> function FTinit(){ var tids=document.getElementsByTagName('span'); for(i=0;i<tids.length;i++)if(tids[i].className=="folder")ids[ids.length]=tids[i]; for(i=0;i<ids.length;i++)ids[i].onmouseup=setstate; //expandall(); // REMOVE THE // FROM THE BIGINNING OF THIS LINE TO HAVE THE TREE EXPANDED INITIALLY. }</pre> Just remove the two <span class="code">//</span> from the beginning of the line that has the <span class="code">expandall()</span> function and now your foldertree will be opened on pageload.<br><br> <li>You'll notice at the top of this page that there are two links; one to expand all the folders and one to collapse all the folders. These links just call 2 included javascript functions to expand or collapse all the folders at once. You use them as you would a normal hyperlink, see the examples below:<br><br> <div class="code"> <a href="javascript:expandall()">Expand all</a><br> <a href="javascript:collapseall()">Collapse all</a> </div> <br> <li>There are two other functions included in the script called <span class="code">openById()</span> and <span class="code">closeById()</span>. So far, the script lets you have all the folders open or all closed initally. These functions allow you have one or more folders opened or closed initially; useful if you want to have all the folders closed except for one or two individual ones. Here's a quick rundown how to use these commands:<br><br> <ol> <li>Assign a unique ID to all folders you want to have open or closed ( ONLY the <i>folder</i> elements ).<br><br> <li>Then add either of the following commands at the end of the <span class="code">window.onload</span> event handler. When you do this, you must also pass the folder's element reference:<br><br> <div class="code"> openById( 'your_id_here' );<br> closeById( 'your_id_here' ); </div><br> Substitute the ID you've assigned instead of <span class="code">your_id_here</span>.<br><br> <li>You'll need to add one of these for every individual folder element you want to have opened/closed on pageload. </ol><br> Note that if you have a specific folder expanded on pageload, but it is part of a closed branch, that folder will only be seen if the parent branch is expanded.<br><br> <li>Do not use the class names explained earlier anywhere else in your page or you'll get some weird effects or errors. This is because the script hunts down all DIV elements with a classname of "folder", it then sets mouse events to expand/collapse its sister DIV (class name "content"). So, if the format explained earlier isn't followed, the script will generate errors. </ul> </div></div> <div class="container"> <ol> <ol> <ol> <span class="folder"><img src="plus.gif"> <ol> <ol> Nesting Example</span> <div class="content"> <ol> The other entries in this folder simply demonstrate support for virtually unlimited nesting. <div class="container"><span class="folder"> <img src="plus.gif" width="16" height="13"> One level.</span> <div class="content"> <div class="container"><span class="folder"> <img src="plus.gif" width="16" height="13"> ...Another level</span> <div class="content"> <div class="container"><span class="folder"> <img src="plus.gif" width="16" height="13"> ...And another</span> <div class="content"> <div class="container"><span class="folder"> <img src="plus.gif" width="16" height="13"> ...Yet another</span> <div class="content"> Nothing of interest in here... </div></div> </div></div> </div></div> </div></div> </div></div></div></div></ol></ol></ol></ol></ol></ol></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/menu/FolderTree/foldertree.jshttp://javascriptbank.com/javascript/menu/FolderTree/minus.gifhttp://javascriptbank.com/javascript/menu/FolderTree/plus.gifhttp://javascriptbank.com/javascript/menu/FolderTree/other_icons.zip