| Page 1 of 1 | [ 7 posts ] |
|
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. |
|
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. |
|
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.
|
|
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.
|
|
I will do that if I dont discover why doesnt the "focus" function work.
|
|
nevermind. Did it already
|
|
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.
|
| Page 1 of 1 | [ 7 posts ] |
| 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 |
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info
Powered by phpBB® Forum Software © phpBB Group