[ 7 posts ]

Boris Marinov

  • Username: boris_m
  • Joined: Mon Apr 02, 2012 12:39 am
  • Posts: 4
  • Offline
  • Profile

A simple question about TreeView

Post Posted: Mon Apr 02, 2012 7:22 am
+1-
Hello,

I want to use YUI Treeview as a menu in my website. I generate the tree-menu in an external JS file and then insert the script in each page of my website (in a div element). So far, so good. But I would like for the menu to be expanded on the page that the user is currently visiting.

My nodes are named after the titles of the pages. I can easily get the current page title and then find the corresponding node. My question is how do I highlight it.

My code is a modification of this example.
http://developer.yahoo.com/yui/examples ... style.html

and you will notice that the last item the user has clicked is highlighted in green. My problem is that I couldn't find a function in the API that does this. I tried the "highlight" and "focus" functions, but nothing happened.

I will post my code, although I the isn't much to see in it.

Code:
var tree;
   
   function treeInit() {
      
   
   tree = new YAHOO.widget.TreeView("leftnavigation");
            
      var cond = new YAHOO.widget.MenuNode("Conditions" , tree.getRoot(), false)
      var something = new YAHOO.widget.MenuNode("Something" , cond, false)
      
      var timer = new YAHOO.widget.MenuNode("Using Timer Conditions" , something, false)
        timer.title = "This document provides an overview of the timer conditions available in the Home Automation Manager Module."
      timer.href="timer_conditions.html"
      
      var logic = new YAHOO.widget.MenuNode("Using Logic Conditions" , something, false)
        logic.title = "This document provides an overview of the logic conditions available in the Home Automation Manager Module."
      logic.href="logic_conditions.html"
      
      
    //I find the node that is named after the document title and expand its parent:
  tree.getNodeByProperty ( "label" , document.title ).parent.expanded= true;
 
     
      tree.render();
   
      }
   
   YAHOO.util.Event.onDOMReady(treeInit);


Sorry is my question is too obvious.

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2016
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: A simple question about TreeView

Post Posted: Mon Apr 02, 2012 12:08 pm
+1-
The expanded state does not propagate up. You can have a branch deep down expanded but invisible within a collapsed branch. You have to loop all the way up to make sure the whole branch gets expanded, like:

var node = three.getNodeByProperty("label", document.title);
while (node) {
node.expanded = true;
node = node.parent;
}

And no, your question is not obvious, the treeview might have been defined so that the expanded property did propagate but it doesn't.

Boris Marinov

  • Username: boris_m
  • Joined: Mon Apr 02, 2012 12:39 am
  • Posts: 4
  • Offline
  • Profile
Tags:

Re: A simple question about TreeView

Post Posted: Mon Apr 02, 2012 12:51 pm
+0-
OK, that is super. Now I just have to find way to mark the current node, so that the user knows on what page he is? I can perhaps change its style, with the same one that is in the example.

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2016
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: A simple question about TreeView

Post Posted: Mon Apr 02, 2012 9:59 pm
+0-
You could use highlighting but with none of the CSS styles provided but one of your own. The highlighting function would set the class names on the highlighted nodes and it is up to you to decide how they should show.

Boris Marinov

  • Username: boris_m
  • Joined: Mon Apr 02, 2012 12:39 am
  • Posts: 4
  • Offline
  • Profile

Re: A simple question about TreeView

Post Posted: Tue Apr 03, 2012 1:23 am
+0-
I will do that if I dont discover why doesnt the "focus" function work.

Boris Marinov

  • Username: boris_m
  • Joined: Mon Apr 02, 2012 12:39 am
  • Posts: 4
  • Offline
  • Profile

Re: A simple question about TreeView

Post Posted: Tue Apr 03, 2012 5:05 am
+0-
nevermind. Did it already

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2016
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: A simple question about TreeView

Post Posted: Fri Apr 13, 2012 4:41 am
+0-
highlight adds a className to the highlighted nodes on the tree but, if you don't declare some styling for those classNames, nothing will happen. TreeView comes with a couple of styles, which get activated by setting one of two possible classNames in the container of the tree, but you might as well declare your own. Please check the examples to see how these built-in styles get activated and how they look or otherwise, make your own styles.
  [ 7 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum