Explorer based on tree : Tree : GUI Components : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
PHP
JavaScript DHTML Home »  GUI Components   » [  Tree  ]   
 



Explorer based on tree

Please note that some example is only working under IE or Firefox.

<html>
<head>
<title>DynAPI Examples - Explorer</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
  dynapi.library.setPath('./dynapisrc/');
  dynapi.library.include('dynapi.api');
  dynapi.library.include('dynapi.gui.BorderManager');
  dynapi.library.include('Explorer');
  dynapi.library.include('ExplorerBlockStyle'); //Optional
</script>
<script language="Javascript">

  var  s = Styles.getStyle('Explorer');
  var file1 = s.getStyleAttribute('imageFile');
  var env = dynapi.functions.getImage('./dynapiexamples/images/envelope.gif',15,18);

  var exp = new Explorer(70,100);
  exp.setBgColor('#EEEEEE');

  exp.addLeave("root","Root Folder");
    // Groceries
    exp.addLeave("groc","Groceries","root");
    exp.addLeave("flour","Flour","groc",file1);
    exp.addLeave("sugar","Sugar","groc",file1);
    exp.addLeave("choc","Chocolate","groc",file1);
      // Cakes
      exp.addLeave("cake","Cakes","groc");
      exp.addLeave("plain","Plain Cake","cake",file1);
      exp.addLeave("ccake","Chocolate Cake","cake",file1);
    // Fruits
    exp.addLeave("fruit","Fruits","root");
    exp.addLeave("mango","Mango","fruit",file1);
    exp.addLeave("apple","Apple","fruit",file1);
    exp.addLeave("grape","Grapes","fruit",file1);
  exp.addEventListener({
    onselect : function(e) {
      status=("Current ID is: "+e.getSource().currentPos+" and currentUrl is: "+e.getSource().currentUrl);
    }
  });
  dynapi.document.addChild(exp);

  var exp2 = new Explorer(270,100,null,null,'ExplorerBlock');
  exp2.addLeave("root",'<font color="green"><b>Emails<b></font>');
    // Groceries
    exp2.addLeave("ib",'<font color="Navy"><b>Inbox<b></font>',"root");
    exp2.addLeave("flour",'<font color="red">Just stop to say Hi..<br>Be of good cheer</font><hr>',"ib",env);
    exp2.addLeave("sugar",'<font color="black">This is a very long message<br>with a lot of <br>breaks...</font><hr>',"ib",env);
    exp2.addLeave("choc",'Chocolate',"ib",env);
      // Cakes
      exp2.addLeave("ar",'Archive',"ib");
      exp2.addLeave("plain",'Plain Cake',"ar",env);
      exp2.addLeave("ccake",'Chocolate Cake',"ar",env);
    // Fruits
    exp2.addLeave("ob",'<font color="maroon"><b>Outbox<b></font>',"root");
    exp2.addLeave("mango",'Mango',"ob",env);
    exp2.addLeave("apple",'Apple',"ob",env);
    exp2.addLeave("grape",'Grapes',"ob",env);
  dynapi.document.addChild(exp2);

</script>
</head>
<body bgcolor="#ffffff">
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>

           
       
Download: dynapi.zip   ( 791  K )  
Related examples in the same category
1.  Yahoo! UI Library - Tree ControlHas Download File
2.  Yahoo! UI Library - Tree Control 2Has Download File
3.  Tree ControlHas Download File
4.  Dynamic TreeView ExampleHas Download File
5.  Yahoo! UI Library - Tree Control 3Has Download File
6.  Yahoo! UI Library - Tree Control 4Has Download File
7.  Yahoo! UI Library - Tree Control 5Has Download File
8.  Build a tree in JavaScriptHas Download File
9.  Delete, insert items in a treeHas Download File
10.  Tree selection action handlerHas Download File
11.  Expand, Collapse, Close, Open selected Tree item and branch Has Download File
12.  Change Tree Node Color and IconHas Download File
13.  Checkbox tree node: checked, unchecked, get the checked itemsHas Download File
14.  Change tree expand and collapse iconsHas Download File
15.  Drag and Drop between treesHas Download File
16.  Build tree from xmlHas Download File
17.  Tree navigation barHas Download File
18.  Navigation Tree Has Download File
19.  Navigation Tree menu based on XML
20.  XML Tree
21.  Building Collapsible Trees
22.  Nano TreeHas Download File
23.  Tree which accepts drag and drop event in JavaScript (IE)Has Download File
24.  Simple Tree in JavascriptHas Download File
25.  Elegant simple tree
























Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.