Tree navigation bar : Tree : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Tree »

 

Tree navigation bar



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title></title>

<!-- The xtree script file -->

<script src="xtreeFrame_data/xtree.js">
</script>

<!-- Modify this file to change the way the tree looks -->


<link type="text/css" rel="stylesheet" href="xtreeFrame_data/xtree.css">

<style>
  body background: white; color: black; }
  input width: 120px; }
</style></head>


<body>

<!-- js file containing the tree content, edit this file to alter the menu,
     the menu will be inserted where this tag is located in the document -->
<script src="xtreeFrame_data/tree.js"></script>

<div id="webfx-tree-object-2" 
     ondblclick="webFXTreeHandler.toggle(this);" 
     class="webfx-tree-item" 
     onkeydown="return webFXTreeHandler.keydown(this, event)">
        <img id="webfx-tree-object-2-icon" class="webfx-tree-icon" 
             src="xtreeFrame_data/openfoldericon.png" 
             onclick="webFXTreeHandler.select(this);">
        <a href="http://www.navioo.com" id="webfx-tree-object-2-anchor" 
           onfocus="webFXTreeHandler.focus(this);" 
           onblur="webFXTreeHandler.blur(this);" 
           target="main">Introduction</a></div>
        
        <div id="webfx-tree-object-2-cont" 
             class="webfx-tree-container" 
             style="display: block;">
        
        <div id="webfx-tree-object-3" 
             ondblclick="webFXTreeHandler.toggle(this);" 
             class="webfx-tree-item" 
             onkeydown="return webFXTreeHandler.keydown(this, event)">
            
             <img id="webfx-tree-object-3-plus" 
             src="xtreeFrame_data/Tminus.png" 
             onclick="webFXTreeHandler.toggle(this);">
             <img id="webfx-tree-object-3-icon" class="webfx-tree-icon" 
                  src="xtreeFrame_data/openfoldericon.png" 
                  onclick="webFXTreeHandler.select(this);">
             <a class="selected" 
                id="webfx-tree-object-3-anchor"> Documentation</a>
                
         </div>
         <div id="webfx-tree-object-3-cont" 
              class="webfx-tree-container" 
              style="display: block;">
              
              <div id="webfx-tree-object-4" 
                   ondblclick="webFXTreeHandler.toggle(this);" 
                   class="webfx-tree-item" 
                   onkeydown="return webFXTreeHandler.keydown(this, event)">
                   
                   <img id="webfx-tree-object-4-indent-0" 
                        src="xtreeFrame_data/I.png">
                        
                   <img id="webfx-tree-object-4-plus" 
                        src="xtreeFrame_data/T.png" 
                        onclick="webFXTreeHandler.toggle(this);">
                   
                   <img id="webfx-tree-object-4-icon" 
                        class="webfx-tree-icon" 
                        src="xtreeFrame_data/file.png" 
                        onclick="webFXTreeHandler.select(this);">
                        
                   <a href="http://www.navioo.com" id="webfx-tree-object-4-anchor" 
                      onfocus="webFXTreeHandler.focus(this);" 
                      onblur="webFXTreeHandler.blur(this);" 
                      target="main">Installation</a>
                   
                   </div>
                   
                   <div id="webfx-tree-object-4-cont" 
                        class="webfx-tree-container" 
                        style="display: none;"></div>
                   
                   <div id="webfx-tree-object-5" 
                        ondblclick="webFXTreeHandler.toggle(this);" 
                        class="webfx-tree-item" 
                        onkeydown="return webFXTreeHandler.keydown(this, event)">
                   
                   <img id="webfx-tree-object-5-indent-0" 
                        src="xtreeFrame_data/I.png">
                   
                   <img id="webfx-tree-object-5-plus" 
                        src="xtreeFrame_data/T.png" 
                        onclick="webFXTreeHandler.toggle(this);">
                   
                   <img id="webfx-tree-object-5-icon" 
                        class="webfx-tree-icon" 
                        src="xtreeFrame_data/file.png" 
                        onclick="webFXTreeHandler.select(this);">
                   
                   <a href="http://www.navioo.com" 
                      id="webfx-tree-object-5-anchor" 
                      onfocus="webFXTreeHandler.focus(this);" 
                      onblur="webFXTreeHandler.blur(this);" 
                      target="main">Configuration</a></div>
                      
                   <div id="webfx-tree-object-5-cont" 
                        class="webfx-tree-container" 
                        style="display: none;"></div>
                   
                   <div id="webfx-tree-object-6" 
                        ondblclick="webFXTreeHandler.toggle(this);" 
                        class="webfx-tree-item" 
                        onkeydown="return webFXTreeHandler.keydown(this, event)">
                   
                   <img id="webfx-tree-object-6-indent-0" 
                        src="xtreeFrame_data/I.png">
                   <img id="webfx-tree-object-6-plus" 
                        src="xtreeFrame_data/L.png" 
                        onclick="webFXTreeHandler.toggle(this);">
                   <img id="webfx-tree-object-6-icon" 
                        class="webfx-tree-icon" 
                        src="xtreeFrame_data/file.png" 
                        onclick="webFXTreeHandler.select(this);">
                   
                   <a href="http://www.navioo.com" 
                      id="webfx-tree-object-6-anchor" 
                      onfocus="webFXTreeHandler.focus(this);" 
                      onblur="webFXTreeHandler.blur(this);" 
                      target="_blank">API</a></div>
                   
                   <div id="webfx-tree-object-6-cont" 
                        class="webfx-tree-container" 
                        style="display: none;"></div>
                </div>
                <div id="webfx-tree-object-7" 
                     ondblclick="webFXTreeHandler.toggle(this);" 
                     class="webfx-tree-item" 
                     onkeydown="return webFXTreeHandler.keydown(this, event)">
                
                <img id="webfx-tree-object-7-plus" 
                     src="xtreeFrame_data/T.png" 
                     onclick="webFXTreeHandler.toggle(this);">
                
                <img id="webfx-tree-object-7-icon" 
                     class="webfx-tree-icon" 
                     src="xtreeFrame_data/file.png" 
                     onclick="webFXTreeHandler.select(this);">
                
                <a href="http://www.navioo.com" 
                   id="webfx-tree-object-7-anchor" 
                   onfocus="webFXTreeHandler.focus(this);" 
                   onblur="webFXTreeHandler.blur(this);" 
                   target="main">Download</a></div>
                
                <div id="webfx-tree-object-7-cont" 
                     class="webfx-tree-container" 
                     style="display: none;"></div>
                     
                <div id="webfx-tree-object-8" 
                     ondblclick="webFXTreeHandler.toggle(this);" 
                     class="webfx-tree-item" 
                     onkeydown="return webFXTreeHandler.keydown(this, event)">
                
                <img id="webfx-tree-object-8-plus" 
                     src="xtreeFrame_data/T.png" 
                     onclick="webFXTreeHandler.toggle(this);">
                
                <img id="webfx-tree-object-8-icon" 
                     class="webfx-tree-icon" 
                     src="xtreeFrame_data/file.png" 
                     onclick="webFXTreeHandler.select(this);">
                     
                <a href="http://www.navioo.com" 
                   id="webfx-tree-object-8-anchor" 
                   onfocus="webFXTreeHandler.focus(this);" 
                   onblur="webFXTreeHandler.blur(this);" 
                   target="main">Support</a></div>
                
                <div id="webfx-tree-object-8-cont" 
                     class="webfx-tree-container" 
                     style="display: none;"></div>
                     
                <div id="webfx-tree-object-9" 
                     ondblclick="webFXTreeHandler.toggle(this);" 
                     class="webfx-tree-item" 
                     onkeydown="return webFXTreeHandler.keydown(this, event)">
                
                <img id="webfx-tree-object-9-plus" 
                     src="xtreeFrame_data/T.png" 
                     onclick="webFXTreeHandler.toggle(this);">
                
                <img id="webfx-tree-object-9-icon" 
                     class="webfx-tree-icon" 
                     src="xtreeFrame_data/file.png" 
                     onclick="webFXTreeHandler.select(this);">
                     
                <a href="http://www.navioo.com" 
                   id="webfx-tree-object-9-anchor" 
                   onfocus="webFXTreeHandler.focus(this);" 
                   onblur="webFXTreeHandler.blur(this);" 
                   target="main">Known issues</a></div>
                
                <div id="webfx-tree-object-9-cont" 
                     class="webfx-tree-container" 
                     style="display: none;"></div>
                
                <div id="webfx-tree-object-10" 
                     ondblclick="webFXTreeHandler.toggle(this);" 
                     class="webfx-tree-item" 
                     onkeydown="return webFXTreeHandler.keydown(this, event)">
                     
                <img id="webfx-tree-object-10-plus" 
                     src="xtreeFrame_data/L.png" 
                     onclick="webFXTreeHandler.toggle(this);">
                
                <img id="webfx-tree-object-10-icon" 
                     class="webfx-tree-icon" 
                     src="xtreeFrame_data/file.png" 
                     onclick="webFXTreeHandler.select(this);">
                 
                <a href="http://www.navioo.com" 
                   id="webfx-tree-object-10-anchor" 
                   onfocus="webFXTreeHandler.focus(this);" 
                   onblur="webFXTreeHandler.blur(this);" 
                   target="main">Themes &amp; icons</a></div>
                
                <div id="webfx-tree-object-10-cont" 
                     class="webfx-tree-container" 
                     style="display: none;"></div>
                </div>
</body>

</html>

           
       

Download : Download nav_AfreeTreeMenuWebcontrol_files.zip nav_AfreeTreeMenuWebcontrol_files.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Tree