add text to header of jquery UI tab control

Question

I would like to add some text to the header of a jquery UI tab control (see image). It would be good if I could align it on the right side.

Envenom

It's a fair question, in my opinion. I'm guessing you'd have to add it as a tab, but then style that tab differently (and disable it). – Swashbuckler

Answer 1

Something like this

$("#id_of_tab_element").tabs(); //init of your tabs element
var textElement = $("<span></span>");
textElement.text("text here...");

apply styles and append

textElement.css('position', 'absolute');
textElement.css('right', '20px');
$("#id_of_tab_element").append(textElement);

you could also define the styles in css and apply a class to the element

See this fiddle

Vulcanize

okay, that is really easy. Pretty embarrassing I didn't think of that. Works! Thank you – Envenom

I needed to add textElement.css('top', '10px'); to get it to work. – Montsaintmichel

Answer 2

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-3">Aenean lacinia</a></li>
       <span style="float: right;">hello</span>
</ul>

Markel

while you can do this as I did (even though only li elements go inside of ul elements), it will not behave properly in IE7 and renders the span element (or div in my case) as part of the previous li. – Defection