Adding a tooolbarbutton in an accordion header

rgravel

19 Jan 2012 20:00:09 GMT

Hello,

I would like to put a toolbarbutton (or a button or, at least, an image with an onClick action) on the header of my accordion, as shown in this example :

I know we can do it on a panel doing this :

<panel title="This is my panel" border="normal" collapsible="true" sizable="true" height="173px" width="386px">
    <caption>
        <toolbarbutton image="media/images/icoAdd.png" onClick="addObjective()"></toolbarbutton>
    </caption>
    ...
</panel>

Here's my code where I would like to have the button :

<tabbox id="myTb" mold="accordion" hflex="1">
    <tabs>
        <tab label="This is where I would like to have a button" ></tab>
    </tabs>
    <tabpanels>
        <tabpanel>
            ...
        </tabpanel>
    </tabpanels>
</tabbox>

Unfortunalety, <caption> is not a valid child for <tab>. Any suggestion ?

vincentjian

20 Jan 2012 08:12:21 GMT

Hi rgravel,

You can have image in tab component as following:

<tabbox id="myTb" mold="accordion" hflex="1">
    <tabs>
        <tab label="label" image="/img/path/to/icon.jpg"></tab>
    </tabs>
    <tabpanels>
        <tabpanel>
            ...
        </tabpanel>
    </tabpanels>
</tabbox>

rgravel

20 Jan 2012 13:00:36 GMT

Hi vincentjian,

Thanks but what I really need is to be able to add an event on this image (eg. onClick) !

rgravel

1 Feb 2012 13:47:42 GMT

Hi,

I found this workaround. The only thing is that I can only have those buttons on an active panel instead on every panels at the same time (which is not that bad).

<tabbox id="myTb" mold="accordion" hflex="1">
    <tabs>
        <tab label="This is where I would like to have a button" ></tab>
    </tabs>
    <tabpanels>
        <tabpanel>
            <hbox hflex="1">
                <toolbarbutton image="/media/images/icoPrevious.png" style="position: relative; top: -30px; left: -5px" />
                <space hflex="1" />
                <toolbarbutton image="/media/images/icoNext.png" style="position: relative; top: -30px; left: 5px;" />
            </hbox>
        </tabpanel>
    </tabpanels>
</tabbox>

ZK - Open Source Ajax Java Framework

Adding a tooolbarbutton in an accordion header