Geek asks and answers

Add text to jQuery UI tab control header

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

enter image description here

+5
source share
2 answers

Something like that

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

apply styles and add

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

you can also define styles in css and apply the class to an element

See this script

+12
source 
<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>
+5
source

More articles:


All Articles