Forums

Well, each item is actually Widget, so you can use the full power of Widget's methods.
For example, you can get its contentBox via:
var node = item1.get('contentBox');

That will return you instance of Y.Node and in this case you can use .setStyle method for example.

Moreover, you can retrieve item's icons and set different styles to them. Check the documentation here.

Hello pasx.

For the background issue you may give a look at "How do I change a background image" thread: viewtopic.php?f=92&t=7396

As Dav said: Node setStyle doesn't support '-' properties, always use the JS camelCase property.

Hope that helps,
IceBox

Hi,

FYI, I managed to modify the rendering of the acc. items in the following ways:

This code is called right after adding the item to the accordion with addItem.
The variable ai is an acc. item and t

A call to ai.get('children') returns undefined at this point - as the acc. is not yet displayed I guess - but the properties headerNode and bodyNode are already valid.

var node = ai.headerNode;
node._node.style.backgroundImage = "url(img/header_small.png)"; //background image
node.setStyle("height", "22px"); //header height
node._node.children[1].style.fontWeight = "normal"; //modify style of the label node
node._node.children[2].children[0].style.visibility = "hidden"; //hide the alwaysvisible icon

header_small.png contains the background image at the top of accordion_sprite.png shrinked to 22px

In Firebug here is the content of the headerNode.

ai.headerNode._node = header (div tag)
ai.headerNode._node.children[0] = icon (a tag)
ai.headerNode._node.children[1] = icon (a tag)
ai.headerNode._node.children[2] = other icons (div tag)
ai.headerNode._node.children[2].children[0] = icon always vis. (a)
ai.headerNode._node.children[2].children[1] = icon expanded (a)
ai.headerNode._node.children[2].children[2] = icon close (a)

So far the result looks pretty good.

I tried to manage the display of "sub-items" with javascript when expanding the "parent" item. Parsing nextSibling(s) and setting the styles for visibility and height ("0px" or "").
To modify the nextSiblings of current node I managed to access them via:
event.item._stdModNode._node.nextSibling;
And one can access the style property on this object. It looks ugly but I couldn't find any other object to start from.

But all this works fine in Firefox but for some reason not in IE, some white space remain b/w the remaining accordion items and the accordion is not refreshed.

Since IE is my target I finally settled for emptying the accordion and refilling it with only the items that I want to show which is much simpler to code though less responsive.

I found out that there is no need to parse the nodes with the nextSibling property and mess up with the styles for removing items. It is much simpler to use accordion properties getItem for parsing and removeItem.

And I agree that:

is much better than:


I am not used to the set/get syntax for accessing properties and tend to assume that if I can't see them on the object in the debugger they just don't exist...

Thanks for the tip