How to edit the resulting html of jQuery UI tabs ?

Question

Hello

I have some tabs using jQuery UI which work just fine, but I want to edit the resulting html to add some stuff on/around it, more precisely I would like to add a left panel and some icons at the right side of the header.

Trying to give you a schema, here is what I have:

tab1|tab2|tab3
content content content content content content
content content content content content content
content content content content content content

And here is what I would like:

panel | tab1|tab2|tab3 ( empty space ) jquery_ui_icon
panel | content content content content content content
panel | content content content content content content
panel | content content content content content content

Panel would be a div containing whatever html I want

Is this possible, and if yes can any of you give me a hint as to how I could do that ?

Thanks a lot

Answer 1

Your tabs are created in a div that you have defined in html. You should put your pane1 in another div before that tab div and let the two divs float next to each other.

Hope this helps.

Answer 2

I'm not sure how to do it exactly, but somewhere in the js there will be the html that is generated. Just look for the neccessary methods like append()', prepend() or $('<div></div>');, etc.