Forums

To create an active link in a TreeView Node, don't place an <A> element in the label, instead, use the href property of a TextNode and also the target property if you wish. That will give you the behavior you want so, instead of:

new YAHOO.widget.TextNode("<a href='url'>label</a>", parent);

do:

new YAHOO.widget.TextNode({ label:"label", href:"url"}, parent);

It's more of a hack but here's how I got it to work. For your example, you would need to do the following to get it to work:

html = "<a></a><a href="link1">Link1</a> <a href="link2">Link2</a>"
new YAHOO.widget.TextNode({labell:html, href: '#'}, parent);

I don't fully understand why but if you include an open and closed anchor tag (<a></a>) before adding other links within a TextNode, you can get the functionality you're looking for. If there's a more proper way of doing it, I'm all ears but this will get it working.

That is smart, Jared. I would advise against it if the YUI2 version wasn't close to the end of its life because a future revision might change the behavior but you are right.

When a TextNode has the href property set, it lets it perform its default action. For anchor elements, it would be to navigate. It really doesn't matter how many links there are. If the href property is not set, then it will toggle the node, unless prevented by returning false from clickEvent.

The reason for the empty <a></a> is that the href property will surround the label in an anchor. The first <a> is being ignored since links cannot be nested, the first closing </a> is actually closing the <a href="#"> that TextNode is inserting. There is also a closing </a> that is being ignored. You are thus getting two HTML syntax errors in that node. You could do it better if you did:

html = "</a><a href="link1">Link1</a> <a href="link2">Link2</a><a>"

the first </a> would close the <a> openned by TextNode because of the href property and the last <a> would match its closing </a>.

The proper way would be to use an HTML node and listen to the clickEvent, checking if the target of the click was an anchor element and returning false so the toggling is prevented and navigation carried on.

Tracy,

It is obvious once you had some practice with YUI, but not when you start. Most events provide some high-level information about the object involved in the event. TreeView's clickEvent gives you a reference to the Node instance where the click has occurred. I call this high-level because it is an instance of a YUI library object, not something the browser actually knows about.

Quite often, those high-level objects are all you care about, since once the YUI object has been identified, you can extract all the information you may need from it. In many cases, however, there is more detailed information you need and most YUI events provide the raw event as provided by the browser.

Thus, the single oArgs argument the clickEvent receives has two properties, oArgs.node is the high-level piece of data and oArgs.event is the raw DOM event. You can extract from the later things like the pressed state of the shift, ctrl or alt keys.

The event object also has information about which was the actual HTML element clicked upon or the X-Y coordinates of the click. That information is presented inconsistently across browsers, thus the Event utility gives you a couple of methods, getTarget() and getXY() that tells you in a standard way where the click happened. Thus, you could do:



The deprecated labelClick event, still shown in some of the examples, gave you only the node, not the event, and it didn't check for whatever you might have returned. Anyway, with its limitations, labelClick is still fired.

AFAIK, TreeView is the oldest widget in the library and it has many such quirks that can't be dropped for the benefit of existing applications.



, or the actual coordinates of the click

I have created a TreeView and all is well except that my TreeView items (parent and leaf nodes) have a link as their text. This causes a problem since YUI defaults everything in the tree item's row to expand/collapse on click effectively disabling my link.

My questions is, how can I make it so that clicking on the actual plus icon is the only way to expand/collapse the row? At the moment the default is to allow clicking anywhere on the row to expand/collapse. Looking for how to turn this off. Thanks in advance for any help






__________________
watch free movies online